<h1 mat-dialog-title>
  @if (initialSetup) {
    {{ textKeys.SETUP_ENCRYPTION_TITLE | translate }}
  } @else {
    {{ textKeys.ENABLE_ENCRYPTION_TITLE | translate }}
  }
</h1>

@if (!canProceed()) {
  <mat-dialog-content>
    <div class="info-box">
      <mat-icon aria-hidden="true">info</mat-icon>
      <div>
        <p>{{ errorReason() | translate }}</p>
      </div>
    </div>
  </mat-dialog-content>

  <mat-dialog-actions align="end">
    <button
      mat-button
      type="button"
      (click)="cancel()"
    >
      {{ T.G.CLOSE | translate }}
    </button>
  </mat-dialog-actions>
} @else if (initialSetup) {
  <!-- Simplified dialog for initial SuperSync setup -->
  <mat-dialog-content>
    <div class="info-box">
      <mat-icon aria-hidden="true">enhanced_encryption</mat-icon>
      <div>
        <p [innerHTML]="textKeys.ENCRYPTION_SETUP_INTRO | translate"></p>
        <p>{{ textKeys.SETUP_ENCRYPTION_PASSWORD_WARNING | translate }}</p>
      </div>
    </div>

    <div class="password-fields">
      <mat-form-field appearance="outline">
        <mat-label>{{ T.F.SYNC.FORM.L_ENCRYPTION_PASSWORD | translate }}</mat-label>
        <input
          class="e2e-setup-encrypt-password"
          matInput
          [type]="showPassword() ? 'text' : 'password'"
          [(ngModel)]="password"
          [ngModelOptions]="{ standalone: true }"
          autocomplete="new-password"
        />
        <button
          mat-icon-button
          matSuffix
          type="button"
          [attr.aria-label]="T.G.TOGGLE_PASSWORD_VISIBILITY | translate"
          (click)="showPassword.set(!showPassword())"
        >
          <mat-icon aria-hidden="true">{{
            showPassword() ? 'visibility_off' : 'visibility'
          }}</mat-icon>
        </button>
      </mat-form-field>

      <password-strength [password]="password" />

      <mat-form-field appearance="outline">
        <mat-label>{{ textKeys.L_CONFIRM_PASSWORD | translate }}</mat-label>
        <input
          class="e2e-setup-encrypt-confirm-password"
          matInput
          [type]="showPassword() ? 'text' : 'password'"
          [(ngModel)]="confirmPassword"
          [ngModelOptions]="{ standalone: true }"
          autocomplete="new-password"
        />
      </mat-form-field>

      @if (passwordError) {
        <div class="password-error">
          <mat-icon aria-hidden="true">error</mat-icon>
          <span>{{ passwordError | translate }}</span>
        </div>
      }
    </div>
  </mat-dialog-content>

  <mat-dialog-actions align="end">
    @if (providerType === 'file-based') {
      <!-- E2EE is optional here, so setup must be skippable (the modal is
           disableClose, so this is the only non-encrypting way out). -->
      <button
        class="e2e-setup-encrypt-skip"
        mat-button
        type="button"
        [disabled]="isLoading()"
        (click)="cancel()"
      >
        {{ textKeys.SETUP_SKIP_ENCRYPTION_BTN | translate }}
      </button>
    } @else {
      <button
        mat-button
        type="button"
        [disabled]="isLoading()"
        (click)="disableSuperSync()"
      >
        {{ textKeys.SETUP_DISABLE_SUPERSYNC_BTN | translate }}
      </button>
    }
    <button
      class="e2e-setup-encrypt-submit"
      mat-flat-button
      color="primary"
      type="button"
      [disabled]="isLoading() || !isPasswordValid"
      (click)="confirm()"
    >
      @if (isLoading()) {
        <mat-spinner
          diameter="20"
          [attr.aria-label]="T.G.PROCESSING | translate"
        ></mat-spinner>
      } @else {
        <ng-container>
          <mat-icon aria-hidden="true">lock</mat-icon>
          {{ textKeys.SETUP_ENCRYPTION_BTN | translate }}
        </ng-container>
      }
    </button>
  </mat-dialog-actions>
} @else {
  <!-- Full dialog for enabling encryption on existing setup -->
  <mat-dialog-content>
    <div class="warning-box">
      <mat-icon aria-hidden="true">warning</mat-icon>
      <p>{{ textKeys.ENABLE_ENCRYPTION_WARNING | translate }}</p>
    </div>

    <div class="password-fields">
      <mat-form-field appearance="outline">
        <mat-label>{{ T.F.SYNC.FORM.L_ENCRYPTION_PASSWORD | translate }}</mat-label>
        <input
          matInput
          [type]="showPassword() ? 'text' : 'password'"
          [(ngModel)]="password"
          [ngModelOptions]="{ standalone: true }"
          autocomplete="new-password"
        />
        <button
          mat-icon-button
          matSuffix
          type="button"
          [attr.aria-label]="T.G.TOGGLE_PASSWORD_VISIBILITY | translate"
          (click)="showPassword.set(!showPassword())"
        >
          <mat-icon aria-hidden="true">{{
            showPassword() ? 'visibility_off' : 'visibility'
          }}</mat-icon>
        </button>
      </mat-form-field>

      <password-strength [password]="password" />

      <mat-form-field appearance="outline">
        <mat-label>{{ textKeys.L_CONFIRM_PASSWORD | translate }}</mat-label>
        <input
          matInput
          [type]="showPassword() ? 'text' : 'password'"
          [(ngModel)]="confirmPassword"
          [ngModelOptions]="{ standalone: true }"
          autocomplete="new-password"
        />
      </mat-form-field>

      @if (passwordError) {
        <div class="password-error">
          <mat-icon aria-hidden="true">error</mat-icon>
          <span>{{ passwordError | translate }}</span>
        </div>
      }
    </div>

    <div class="info-section">
      <h3>{{ textKeys.ENABLE_ENCRYPTION_WHAT_HAPPENS | translate }}</h3>
      <ul>
        <li>{{ textKeys.ENABLE_ENCRYPTION_ITEM_1 | translate }}</li>
        <li>{{ textKeys.ENABLE_ENCRYPTION_ITEM_2 | translate }}</li>
        <li>{{ textKeys.ENABLE_ENCRYPTION_ITEM_3 | translate }}</li>
      </ul>
    </div>

    <p class="note">
      <mat-icon aria-hidden="true">info</mat-icon>
      <span>{{ textKeys.ENABLE_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>
    <button
      mat-flat-button
      color="warn"
      type="button"
      [disabled]="isLoading() || !isPasswordValid"
      (click)="confirm()"
    >
      @if (isLoading()) {
        <mat-spinner
          diameter="20"
          [attr.aria-label]="T.G.PROCESSING | translate"
        ></mat-spinner>
      } @else {
        <ng-container>
          <mat-icon aria-hidden="true">lock</mat-icon>
          {{ textKeys.BTN_ENABLE_ENCRYPTION | translate }}
        </ng-container>
      }
    </button>
  </mat-dialog-actions>
}
