<form
  [formGroup]="form"
  bit-dialog
  dialogSize="large"
  [title]="'settingsTitle' | i18n: currentUserEmail()"
>
  <ng-container bitDialogContent>
    <bit-tab-group>
      <bit-tab [label]="'security' | i18n">
        <bit-section disableMargin>
          <bit-section-header>
            <h2 bitTypography="h6">{{ "sessionTimeoutHeader" | i18n }}</h2>
          </bit-section-header>

          <bit-session-timeout-settings [refreshTimeoutActionSettings]="refreshTimeoutSettings$" />
        </bit-section>

        @if (pinEnabled() || form.value.pin) {
          <bit-form-control class="tw-mt-4">
            <input type="checkbox" bitCheckbox formControlName="pin" />
            <bit-label>{{ "unlockWithPin" | i18n }}</bit-label>
          </bit-form-control>
        }

        @if (supportsBiometric()) {
          <bit-form-control>
            <input type="checkbox" bitCheckbox formControlName="biometric" />
            <bit-label>{{ biometricText | i18n }}</bit-label>
            @if (form.value.biometric && isMac) {
              <bit-hint>{{ "additionalTouchIdSettings" | i18n }}</bit-hint>
            }
          </bit-form-control>
        }

        @if (
          supportsBiometric() &&
          form.value.biometric &&
          isWindows &&
          (userHasMasterPassword() || (form.value.pin && userHasPinSet()))
        ) {
          <bit-form-control class="tw-ms-5">
            <input
              type="checkbox"
              bitCheckbox
              formControlName="requireMasterPasswordOnAppRestart"
            />
            <bit-label>
              @if (pinEnabled()) {
                {{ "requireMasterPasswordOrPinOnAppRestart" | i18n }}
              } @else {
                {{ "requireMasterPasswordOnAppRestart" | i18n }}
              }
            </bit-label>
          </bit-form-control>
        }

        @if (supportsBiometric() && form.value.biometric && isMac) {
          <bit-form-control class="tw-ms-5">
            <input
              type="checkbox"
              bitCheckbox
              formControlName="autoPromptBiometrics"
              (change)="updateAutoPromptBiometrics()"
            />
            <bit-label>{{ "autoPromptTouchId" | i18n }}</bit-label>
          </bit-form-control>
        }
      </bit-tab>

      <bit-tab [label]="'accountPreferences' | i18n">
        <bit-form-field>
          <bit-label>{{ "clearClipboard" | i18n }}</bit-label>
          <bit-select formControlName="clearClipboard" [items]="clearClipboardOptions" />
          <bit-hint>{{ "clearClipboardDesc" | i18n }}</bit-hint>
        </bit-form-field>

        <bit-form-control>
          <input
            type="checkbox"
            bitCheckbox
            formControlName="minimizeOnCopyToClipboard"
            (change)="saveMinOnCopyToClipboard()"
          />
          <bit-label>{{ "minimizeOnCopyToClipboard" | i18n }}</bit-label>
          <bit-hint>{{ "minimizeOnCopyToClipboardDesc" | i18n }}</bit-hint>
        </bit-form-control>

        <bit-form-control>
          <input
            type="checkbox"
            bitCheckbox
            formControlName="enableFavicons"
            (change)="saveFavicons()"
          />
          <bit-label>
            {{ "showIconsChangePasswordUrls" | i18n }}
            <vault-permit-cipher-details-popover slot="end" />
          </bit-label>
        </bit-form-control>
      </bit-tab>

      <bit-tab [label]="'appPreferences' | i18n">
        <bit-form-control>
          <input
            type="checkbox"
            bitCheckbox
            formControlName="runInBackground"
            (change)="saveRunInBackground()"
          />
          <bit-label>{{ runInBackgroundText }}</bit-label>
          <bit-hint>{{ runInBackgroundDescText }}</bit-hint>
        </bit-form-control>

        @if (showOpenAtLoginOption) {
          <bit-form-control>
            <input
              type="checkbox"
              bitCheckbox
              formControlName="openAtLogin"
              (change)="saveOpenAtLogin()"
            />
            <bit-label>{{ "openAtLogin" | i18n }}</bit-label>
            <bit-hint>{{ "openAtLoginDesc" | i18n }}</bit-hint>
          </bit-form-control>
        }

        @if (showEnableAutotype()) {
          <bit-form-control>
            <input
              type="checkbox"
              bitCheckbox
              formControlName="enableAutotype"
              (change)="saveEnableAutotype()"
            />
            <bit-label>
              <span class="tw-flex tw-items-center tw-gap-2">
                {{ "enableAutotypeShortcutPreview" | i18n }}
                <code>{{ form.value.autotypeShortcut }}</code>
                <app-premium-badge />
              </span>
            </bit-label>
            @if (form.value.enableAutotype) {
              <bit-hint>
                <b>{{ "important" | i18n }}</b>
                {{ "enableAutotypeShortcutDescription" | i18n }}
                <a
                  class="tw-cursor-pointer"
                  bitLink
                  tabindex="0"
                  (click)="saveAutotypeShortcut(); $event.preventDefault()"
                  (keydown.enter)="saveAutotypeShortcut(); $event.preventDefault()"
                >
                  {{ "editShortcut" | i18n }}
                </a>
              </bit-hint>
            }
          </bit-form-control>
        }

        <bit-form-control>
          <input
            type="checkbox"
            bitCheckbox
            formControlName="enableHardwareAcceleration"
            (change)="saveHardwareAcceleration()"
          />
          <bit-label>{{ "enableHardwareAcceleration" | i18n }}</bit-label>
          <bit-hint>{{ "enableHardwareAccelerationDesc" | i18n }}</bit-hint>
        </bit-form-control>

        <bit-form-control>
          <input
            type="checkbox"
            bitCheckbox
            formControlName="enableSshAgent"
            (change)="saveSshAgent()"
          />
          <bit-label>{{ "enableSshAgent" | i18n }}</bit-label>
          <bit-hint>{{ "enableSshAgentDesc" | i18n }}</bit-hint>
        </bit-form-control>

        @if (form.value.enableSshAgent) {
          <bit-form-field>
            <bit-label>{{ "sshAgentPromptBehavior" | i18n }}</bit-label>
            <bit-select
              formControlName="sshAgentPromptBehavior"
              [items]="sshAgentPromptBehaviorOptions"
            />
            <bit-hint>{{ "sshAgentPromptBehaviorDesc" | i18n }}</bit-hint>
          </bit-form-field>
        }

        @if (!isLinux) {
          <bit-form-control>
            <input
              type="checkbox"
              bitCheckbox
              formControlName="allowScreenshots"
              (change)="savePreventScreenshots()"
            />
            <bit-label>{{ "allowScreenshots" | i18n }}</bit-label>
            <bit-hint>{{ "allowScreenshotsDesc" | i18n }}</bit-hint>
          </bit-form-control>
        }

        @if (showDuckDuckGoIntegrationOption) {
          <bit-form-control>
            <input
              type="checkbox"
              bitCheckbox
              formControlName="enableDuckDuckGoBrowserIntegration"
              (change)="saveDdgBrowserIntegration()"
            />
            <bit-label>{{ "enableDuckDuckGoBrowserIntegration" | i18n }}</bit-label>
            <bit-hint>{{ "enableDuckDuckGoBrowserIntegrationDesc" | i18n }}</bit-hint>
          </bit-form-control>
        }

        <bit-form-field>
          <bit-label>{{ "theme" | i18n }}</bit-label>
          <bit-select formControlName="theme" [items]="themeOptions" />
          <bit-hint>{{ "themeDesc" | i18n }}</bit-hint>
        </bit-form-field>

        <bit-form-field>
          <bit-label>{{ "language" | i18n }}</bit-label>
          <bit-select formControlName="locale" [items]="localeOptions" />
          <bit-hint>{{ "languageDesc" | i18n }}</bit-hint>
        </bit-form-field>
      </bit-tab>
    </bit-tab-group>
  </ng-container>
</form>
