<header>
  <div class="left">
    <button type="button" routerLink="/tabs/settings">
      <span class="header-icon"><i class="bwi bwi-angle-left" aria-hidden="true"></i></span>
      <span>{{ "back" | i18n }}</span>
    </button>
  </div>
  <h1 class="center">
    <span class="title">{{ "autofill" | i18n }}</span>
  </h1>
  <div class="right"></div>
</header>
<main tabindex="-1">
  <div class="box tw-mt-4">
    <div class="box-content">
      <button
        type="button"
        class="box-content-row box-content-row-link box-content-row-flex"
        (click)="commandSettings()"
      >
        <div class="row-main">{{ "autofillShortcut" | i18n }}</div>
        <i class="bwi bwi-external-link bwi-lg bwi-fw" aria-hidden="true"></i>
      </button>
    </div>
    <div id="autofillKeyboardHelp" class="box-footer">
      {{ autofillKeyboardHelperText }}
    </div>
  </div>
  <div class="box">
    <div class="box-content">
      <div class="box-content-row" appBoxRow>
        <label for="autofill-overlay-settings">{{ "showAutoFillMenuOnFormFields" | i18n }}</label>
        <select
          id="autofill-overlay-settings"
          name="autofill-overlay-settings"
          [(ngModel)]="autoFillOverlayVisibility"
          (change)="updateAutoFillOverlayVisibility()"
        >
          <option *ngFor="let o of autoFillOverlayVisibilityOptions" [ngValue]="o.value">
            {{ o.name }}
          </option>
        </select>
      </div>
      <div class="box-footer" *ngIf="accountSwitcherEnabled && canOverrideBrowserAutofillSetting">
        {{ "showAutoFillMenuOnFormFieldsDescAlt" | i18n }}
      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-content" *ngIf="canOverrideBrowserAutofillSetting">
      <div class="box-content-row box-content-row-checkbox" appBoxRow>
        <label for="overrideBrowserAutofill" class="!tw-mr-0">{{
          "overrideDefaultBrowserAutoFillSettings" | i18n
        }}</label>
        <input
          id="overrideBrowserAutofill"
          type="checkbox"
          (change)="updateDefaultBrowserAutofillDisabled()"
          [(ngModel)]="defaultBrowserAutofillDisabled"
        />
      </div>
    </div>
    <div class="box-footer">
      <span *ngIf="accountSwitcherEnabled">{{ "showAutoFillMenuOnFormFieldsDescAlt" | i18n }}</span>
      {{ "turnOffBrowserBuiltInPasswordManagerSettings" | i18n }}
      <a
        [attr.href]="disablePasswordManagerLink"
        (click)="openDisablePasswordManagerLink($event)"
        target="_blank"
        rel="noreferrer"
      >
        {{ "turnOffBrowserBuiltInPasswordManagerSettingsLink" | i18n }}
      </a>
    </div>
  </div>
  <div class="box tw-mt-4">
    <div class="box-content">
      <div class="box-content-row box-content-row-checkbox" appBoxRow>
        <label for="autofill">{{ "enableAutoFillOnPageLoad" | i18n }}</label>
        <input
          id="autofill"
          type="checkbox"
          aria-describedby="autofillHelp"
          (change)="updateAutoFillOnPageLoad()"
          [(ngModel)]="enableAutoFillOnPageLoad"
        />
      </div>
    </div>
    <div id="autofillHelp" class="box-footer">
      {{ "enableAutoFillOnPageLoadDesc" | i18n }}
      <b>{{ "warning" | i18n }}</b
      >: {{ "experimentalFeature" | i18n }}
      <a href="https://bitwarden.com/help/auto-fill-browser/" target="_blank" rel="noreferrer">
        {{ "learnMoreAboutAutofill" | i18n }}.
        <i
          [attr.aria-label]="'opensInANewWindow' | i18n"
          class="bwi bwi-external-link bwi-sm bwi-fw"
        ></i>
      </a>
    </div>
  </div>
  <div class="box">
    <div class="box-content">
      <div class="box-content-row" appBoxRow>
        <label for="defaultAutofill">{{ "defaultAutoFillOnPageLoad" | i18n }}</label>
        <select
          id="defaultAutofill"
          name="DefaultAutofill"
          aria-describedby="defaultAutofillHelp"
          [(ngModel)]="autoFillOnPageLoadDefault"
          (change)="updateAutoFillOnPageLoadDefault()"
          [disabled]="!enableAutoFillOnPageLoad"
        >
          <option *ngFor="let o of autoFillOnPageLoadOptions" [ngValue]="o.value">
            {{ o.name }}
          </option>
        </select>
      </div>
    </div>
    <div id="defaultAutofillHelp" class="box-footer">
      {{ "defaultAutoFillOnPageLoadDesc" | i18n }}
    </div>
  </div>
  <div class="box">
    <div class="box-content">
      <div class="box-content-row" appBoxRow>
        <label for="defaultUriMatch">{{ "defaultUriMatchDetection" | i18n }}</label>
        <select
          id="defaultUriMatch"
          name="DefaultUriMatch"
          aria-describedby="defaultUriMatchHelp"
          [(ngModel)]="defaultUriMatch"
          (change)="saveDefaultUriMatch()"
        >
          <option *ngFor="let o of uriMatchOptions" [ngValue]="o.value">{{ o.name }}</option>
        </select>
      </div>
    </div>
    <div id="defaultUriMatchHelp" class="box-footer">
      {{ "defaultUriMatchDetectionDesc" | i18n }}
    </div>
  </div>
</main>
