<div class="modal fade" role="dialog" aria-modal="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <form class="modal-content" #form (ngSubmit)="submit()">
      <div class="modal-body">
        <div>
          {{ "setYourPinCode" | i18n }}
        </div>
        <div class="box">
          <div class="box-content">
            <div class="box-content-row box-content-row-flex no-hover no-bg" appBoxRow>
              <div class="row-main">
                <label for="pin">{{ "pin" | i18n }}</label>
                <input
                  id="pin"
                  type="{{ showPin ? 'text' : 'password' }}"
                  name="Pin"
                  class="monospaced"
                  [(ngModel)]="pin"
                  required
                  appInputVerbatim
                />
              </div>
              <div class="action-buttons">
                <button
                  type="button"
                  class="row-btn"
                  appStopClick
                  appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                  (click)="toggleVisibility()"
                  [attr.aria-pressed]="showPin"
                >
                  <i
                    class="bwi bwi-lg"
                    aria-hidden="true"
                    [ngClass]="{ 'bwi-eye': !showPin, 'bwi-eye-slash': showPin }"
                  ></i>
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="checkbox" *ngIf="showMasterPassOnRestart">
          <label for="masterPasswordOnRestart">
            <input
              type="checkbox"
              id="masterPasswordOnRestart"
              name="MasterPasswordOnRestart"
              [(ngModel)]="masterPassOnRestart"
            />
            <span>{{ "lockWithMasterPassOnRestart" | i18n }}</span>
          </label>
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary btn-submit">
          <span>{{ "ok" | i18n }}</span>
        </button>
        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
          {{ "cancel" | i18n }}
        </button>
      </div>
    </form>
  </div>
</div>
