<h1 mat-dialog-title>
  @if (mode === 'disable-only') {
    {{ textKeys.DISABLE_ENCRYPTION_TITLE | translate }}
  } @else {
    {{ textKeys.L_CHANGE_ENCRYPTION_PASSWORD | translate }}
  }
</h1>

<mat-dialog-content>
  @if (mode === 'full') {
    <div class="warning-box">
      <mat-icon aria-hidden="true">warning</mat-icon>
      <p>{{ textKeys.CHANGE_PASSWORD_WARNING | translate }}</p>
    </div>

    <form
      #formEl="ngForm"
      (ngSubmit)="formEl.valid && isValid && confirm()"
    >
      <mat-form-field>
        <mat-label>{{ textKeys.L_NEW_PASSWORD | translate }}</mat-label>
        <input
          [(ngModel)]="newPassword"
          name="newPassword"
          matInput
          type="password"
          required
          minlength="8"
        />
        @if (newPassword.length > 0 && newPassword.length < 8) {
          <mat-error>{{ textKeys.PASSWORD_MIN_LENGTH | translate }}</mat-error>
        }
      </mat-form-field>

      <mat-form-field>
        <mat-label>{{ textKeys.L_CONFIRM_PASSWORD | translate }}</mat-label>
        <input
          [(ngModel)]="confirmPassword"
          name="confirmPassword"
          matInput
          type="password"
          required
        />
        @if (confirmPassword.length > 0 && !passwordsMatch) {
          <mat-error>{{ textKeys.PASSWORDS_DONT_MATCH | translate }}</mat-error>
        }
      </mat-form-field>
    </form>

    @if (providerType !== 'supersync') {
      <mat-divider></mat-divider>

      <div class="remove-encryption-section">
        <h3>{{ textKeys.L_REMOVE_ENCRYPTION | translate }}</h3>
        <p class="remove-warning">
          {{ textKeys.REMOVE_ENCRYPTION_WARNING | translate }}
        </p>
        <button
          mat-stroked-button
          color="warn"
          type="button"
          [disabled]="isLoading() || isRemovingEncryption()"
          (click)="removeEncryption()"
        >
          @if (isRemovingEncryption()) {
            <mat-spinner
              diameter="20"
              aria-label="Processing"
            ></mat-spinner>
          } @else {
            <ng-container>
              <mat-icon aria-hidden="true">lock_open</mat-icon>
              {{ textKeys.BTN_DISABLE_ENCRYPTION | translate }}
            </ng-container>
          }
        </button>
      </div>
    }
  } @else {
    <div class="warning-box">
      <mat-icon aria-hidden="true">warning</mat-icon>
      <p>{{ textKeys.DISABLE_ENCRYPTION_WARNING | translate }}</p>
    </div>

    <div class="info-section">
      <h3>{{ textKeys.DISABLE_ENCRYPTION_WHAT_HAPPENS | translate }}</h3>
      <ul>
        <li>{{ textKeys.DISABLE_ENCRYPTION_ITEM_1 | translate }}</li>
        <li>{{ textKeys.DISABLE_ENCRYPTION_ITEM_2 | translate }}</li>
        <li>{{ textKeys.DISABLE_ENCRYPTION_ITEM_3 | translate }}</li>
      </ul>
    </div>

    <p class="note">
      <mat-icon aria-hidden="true">info</mat-icon>
      <span>{{ textKeys.DISABLE_ENCRYPTION_NOTE | translate }}</span>
    </p>
  }
</mat-dialog-content>

<mat-dialog-actions align="end">
  <button
    mat-button
    type="button"
    [disabled]="isLoading()"
    (click)="cancel()"
  >
    {{ T.G.CANCEL | translate }}
  </button>
  @if (mode === 'full') {
    <button
      mat-flat-button
      color="warn"
      type="button"
      [disabled]="!isValid || isLoading()"
      (click)="confirm()"
    >
      @if (isLoading()) {
        <mat-spinner
          diameter="20"
          aria-label="Processing"
        ></mat-spinner>
      } @else {
        <ng-container>
          <mat-icon aria-hidden="true">lock_reset</mat-icon>
          {{ textKeys.BTN_CHANGE_PASSWORD | translate }}
        </ng-container>
      }
    </button>
  } @else {
    <button
      mat-flat-button
      color="warn"
      type="button"
      [disabled]="isRemovingEncryption()"
      (click)="removeEncryption()"
    >
      @if (isRemovingEncryption()) {
        <mat-spinner
          diameter="20"
          aria-label="Processing"
        ></mat-spinner>
      } @else {
        <ng-container>
          <mat-icon aria-hidden="true">lock_open</mat-icon>
          {{ textKeys.BTN_DISABLE_ENCRYPTION | translate }}
        </ng-container>
      }
    </button>
  }
</mat-dialog-actions>
