<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="settingsTitle">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body form" [formGroup]="form">
        <div class="box">
          <h1 class="box-header" id="settingsTitle">
            {{ "settingsTitle" | i18n: currentUserEmail }}
          </h1>
          <div class="box-content box-content-padded">
            <h2>
              <button
                id="app-settings"
                type="button"
                class="box-header-expandable"
                (click)="showSecurity = !showSecurity"
                [attr.aria-expanded]="showSecurity"
                appAutofocus
              >
                <bit-icon
                  [name]="showSecurity ? 'bwi-angle-down' : 'bwi-angle-right'"
                  class="bwi-sm icon"
                ></bit-icon>
                {{ "security" | i18n }}
              </button>
            </h2>
            <ng-container *ngIf="showSecurity">
              <bit-section disableMargin>
                <bit-section-header>
                  <h2 bitTypography="h6">{{ "sessionTimeoutHeader" | i18n }}</h2>
                </bit-section-header>

                <bit-session-timeout-settings
                  [refreshTimeoutActionSettings]="refreshTimeoutSettings$"
                />
              </bit-section>
              <div class="form-group tw-mt-4" *ngIf="(pinEnabled$ | async) || this.form.value.pin">
                <div class="checkbox">
                  <label for="pin">
                    <input id="pin" type="checkbox" formControlName="pin" />
                    {{ "unlockWithPin" | i18n }}
                  </label>
                </div>
              </div>
              <div class="form-group" *ngIf="supportsBiometric">
                <div class="checkbox">
                  <label for="biometric">
                    <input id="biometric" type="checkbox" formControlName="biometric" />
                    {{ biometricText | i18n }}
                  </label>
                </div>
                <small class="help-block" *ngIf="this.form.value.biometric && this.isMac">{{
                  "additionalTouchIdSettings" | i18n
                }}</small>
              </div>
              <div
                class="form-group"
                *ngIf="
                  supportsBiometric &&
                  form.value.biometric &&
                  isWindows &&
                  (userHasMasterPassword || (form.value.pin && userHasPinSet))
                "
              >
                <div class="checkbox form-group-child">
                  <label for="requireMasterPasswordOnAppRestart">
                    <input
                      id="requireMasterPasswordOnAppRestart"
                      type="checkbox"
                      formControlName="requireMasterPasswordOnAppRestart"
                    />
                    @if (pinEnabled$ | async) {
                      {{ "requireMasterPasswordOrPinOnAppRestart" | i18n }}
                    } @else {
                      {{ "requireMasterPasswordOnAppRestart" | i18n }}
                    }
                  </label>
                </div>
              </div>
              <div
                class="form-group"
                *ngIf="supportsBiometric && this.form.value.biometric && this.isMac"
              >
                <div class="checkbox form-group-child">
                  <label for="autoPromptBiometrics">
                    <input
                      id="autoPromptBiometrics"
                      type="checkbox"
                      formControlName="autoPromptBiometrics"
                      (change)="updateAutoPromptBiometrics()"
                    />
                    {{ "autoPromptTouchId" | i18n }}
                  </label>
                </div>
              </div>
            </ng-container>
          </div>
        </div>
        <div class="box">
          <div class="box-content box-content-padded">
            <h2>
              <button
                type="button"
                class="box-header-expandable"
                (click)="showAccountPreferences = !showAccountPreferences"
                [attr.aria-expanded]="showAccountPreferences"
              >
                <bit-icon
                  [name]="showAccountPreferences ? 'bwi-angle-down' : 'bwi-angle-right'"
                  class="bwi-sm icon"
                ></bit-icon>
                {{ "accountPreferences" | i18n }}
              </button>
            </h2>
            <ng-container *ngIf="showAccountPreferences">
              <div class="form-group">
                <label for="clearClipboard">{{ "clearClipboard" | i18n }}</label>
                <select
                  id="clearClipboard"
                  aria-describedby="clearClipboardHelp"
                  formControlName="clearClipboard"
                  (change)="saveClearClipboard()"
                >
                  <option *ngFor="let o of clearClipboardOptions" [ngValue]="o.value">
                    {{ o.name }}
                  </option>
                </select>
                <small id="clearClipboardHelp" class="help-block">{{
                  "clearClipboardDesc" | i18n
                }}</small>
              </div>
              <div class="form-group">
                <div class="checkbox">
                  <label for="minimizeOnCopyToClipboard">
                    <input
                      id="minimizeOnCopyToClipboard"
                      type="checkbox"
                      aria-describedby="minimizeOnCopyToClipboardHelp"
                      formControlName="minimizeOnCopyToClipboard"
                      (change)="saveMinOnCopyToClipboard()"
                    />
                    {{ "minimizeOnCopyToClipboard" | i18n }}
                  </label>
                </div>
                <small id="minimizeOnCopyToClipboardHelp" class="help-block">{{
                  "minimizeOnCopyToClipboardDesc" | i18n
                }}</small>
              </div>
              <div class="form-group">
                <div class="checkbox">
                  <label for="enableFavicons">
                    <input
                      id="enableFavicons"
                      type="checkbox"
                      formControlName="enableFavicons"
                      (change)="saveFavicons()"
                    />
                    {{ "showIconsChangePasswordUrls" | i18n }}
                  </label>
                  <div class="tw-inline-block tw-ml-2">
                    <vault-permit-cipher-details-popover></vault-permit-cipher-details-popover>
                  </div>
                </div>
              </div>
            </ng-container>
          </div>
        </div>
        <div class="box">
          <div class="box-content box-content-padded">
            <h2>
              <button
                type="button"
                class="box-header-expandable"
                (click)="showAppPreferences = !showAppPreferences"
                [attr.aria-expanded]="showAppPreferences"
              >
                <bit-icon
                  [name]="showAppPreferences ? 'bwi-angle-down' : 'bwi-angle-right'"
                  class="bwi-sm icon"
                ></bit-icon>
                {{ "appPreferences" | i18n }}
              </button>
            </h2>
            <ng-container *ngIf="showAppPreferences">
              <div class="form-group">
                <div class="checkbox">
                  <label for="runInBackground">
                    <input
                      id="runInBackground"
                      type="checkbox"
                      aria-describedby="runInBackgroundHelp"
                      formControlName="runInBackground"
                      (change)="saveRunInBackground()"
                    />
                    {{ runInBackgroundText }}
                  </label>
                </div>
                <small id="runInBackgroundHelp" class="help-block">{{
                  runInBackgroundDescText
                }}</small>
              </div>
              @if (showQuickCopyActionsSetting()) {
                <div class="form-group">
                  <div class="checkbox">
                    <label for="showQuickCopyActions">
                      <input
                        id="showQuickCopyActions"
                        type="checkbox"
                        formControlName="showQuickCopyActions"
                        (change)="saveQuickCopyActions()"
                      />
                      {{ "showQuickCopyActionsInVault" | i18n }}
                    </label>
                    <div class="tw-inline-block tw-ml-2">
                      <show-quick-copy-actions-details-popover></show-quick-copy-actions-details-popover>
                    </div>
                  </div>
                </div>
              }
              <div class="form-group" *ngIf="showOpenAtLoginOption">
                <div class="checkbox">
                  <label for="openAtLogin">
                    <input
                      id="openAtLogin"
                      type="checkbox"
                      aria-describedby="openAtLoginHelp"
                      formControlName="openAtLogin"
                      (change)="saveOpenAtLogin()"
                    />
                    {{ "openAtLogin" | i18n }}
                  </label>
                </div>
                <small id="openAtLoginHelp" class="help-block">{{
                  "openAtLoginDesc" | i18n
                }}</small>
              </div>
              <div class="form-group" *ngIf="showEnableAutotype">
                <div class="checkbox">
                  <label for="enableAutotype">
                    <input
                      id="enableAutotype"
                      type="checkbox"
                      formControlName="enableAutotype"
                      (change)="saveEnableAutotype()"
                    />
                    <div class="tw-flex tw-items-center tw-gap-2">
                      {{ "enableAutotypeShortcutPreview" | i18n }}
                      <div>
                        <code>{{ form.value.autotypeShortcut }}</code>
                      </div>
                      <app-premium-badge></app-premium-badge>
                    </div>
                  </label>
                </div>
                <small class="help-block" *ngIf="form.value.enableAutotype">
                  <b>{{ "important" | i18n }}</b>
                  {{ "enableAutotypeShortcutDescription" | i18n }}
                  <a
                    class="settings-link"
                    tabindex="0"
                    *ngIf="this.form.value.enableAutotype"
                    (click)="saveAutotypeShortcut()"
                    (keydown.enter)="saveAutotypeShortcut(); $event.preventDefault()"
                  >
                    {{ "editShortcut" | i18n }}
                  </a></small
                >
              </div>
              <div class="form-group">
                <div class="checkbox">
                  <label for="enableHardwareAcceleration">
                    <input
                      id="enableHardwareAcceleration"
                      type="checkbox"
                      aria-describedby="enableHardwareAccelerationHelp"
                      formControlName="enableHardwareAcceleration"
                      (change)="saveHardwareAcceleration()"
                    />
                    {{ "enableHardwareAcceleration" | i18n }}
                  </label>
                </div>
                <small id="enableHardwareAccelerationHelp" class="help-block">{{
                  "enableHardwareAccelerationDesc" | i18n
                }}</small>
              </div>
              <div class="form-group">
                <div class="checkbox">
                  <label for="enableSshAgent">
                    <input
                      id="enableSshAgent"
                      type="checkbox"
                      aria-describedby="enableSshAgentHelp"
                      formControlName="enableSshAgent"
                      (change)="saveSshAgent()"
                    />
                    {{ "enableSshAgent" | i18n }}
                  </label>
                </div>
                <small id="enableSshAgentHelp" class="help-block">{{
                  "enableSshAgentDesc" | i18n
                }}</small>
              </div>
              <div class="form-group" *ngIf="this.form.value.enableSshAgent">
                <label for="sshAgentPromptBehavior">{{ "sshAgentPromptBehavior" | i18n }}</label>
                <select
                  id="sshAgentPromptBehavior"
                  aria-describedby="sshAgentPromptBehaviorHelp"
                  formControlName="sshAgentPromptBehavior"
                  (change)="saveSshAgentPromptBehavior()"
                >
                  <option *ngFor="let o of sshAgentPromptBehaviorOptions" [ngValue]="o.value">
                    {{ o.name }}
                  </option>
                </select>
                <small id="sshAgentPromptBehaviorHelp" class="help-block">{{
                  "sshAgentPromptBehaviorDesc" | i18n
                }}</small>
              </div>
              <div class="form-group" *ngIf="!isLinux">
                <div class="checkbox">
                  <label for="allowScreenshots">
                    <input
                      id="allowScreenshots"
                      type="checkbox"
                      aria-describedby="allowScreenshotsHelp"
                      formControlName="allowScreenshots"
                      (change)="savePreventScreenshots()"
                    />
                    {{ "allowScreenshots" | i18n }}
                  </label>
                </div>
                <small id="allowScreenshotsHelp" class="help-block">{{
                  "allowScreenshotsDesc" | i18n
                }}</small>
              </div>
              <div class="form-group" *ngIf="showDuckDuckGoIntegrationOption">
                <div class="checkbox">
                  <label for="enableDuckDuckGoBrowserIntegration">
                    <input
                      id="enableDuckDuckGoBrowserIntegration"
                      type="checkbox"
                      formControlName="enableDuckDuckGoBrowserIntegration"
                      (change)="saveDdgBrowserIntegration()"
                    />
                    {{ "enableDuckDuckGoBrowserIntegration" | i18n }}
                  </label>
                </div>
                <small class="help-block">{{
                  "enableDuckDuckGoBrowserIntegrationDesc" | i18n
                }}</small>
              </div>
              <div class="form-group">
                <label for="theme">{{ "theme" | i18n }}</label>
                <select
                  id="theme"
                  aria-describedby="themeHelp"
                  formControlName="theme"
                  (change)="saveTheme()"
                >
                  <option *ngFor="let o of themeOptions" [ngValue]="o.value">{{ o.name }}</option>
                </select>
                <small id="themeHelp" class="help-block">{{ "themeDesc" | i18n }}</small>
              </div>
              <div class="form-group">
                <label for="locale">{{ "language" | i18n }}</label>
                <select
                  id="locale"
                  aria-describedby="localeHelp"
                  formControlName="locale"
                  (change)="saveLocale()"
                >
                  <option *ngFor="let o of localeOptions" [ngValue]="o.value">{{ o.name }}</option>
                </select>
                <small id="localeHelp" class="help-block">{{ "languageDesc" | i18n }}</small>
              </div>
            </ng-container>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" data-dismiss="modal">{{ "close" | i18n }}</button>
      </div>
    </div>
  </div>
</div>
