@if (options$ | async; as options) {
  <div class="excel-password-root">
    <clr-modal
      [clrModalOpen]="options.open"
      [clrModalSize]="'md'"
      [clrModalClosable]="false"
    >
      <h3 class="modal-title center text-center color-darker-gray">
        Password Protected File
      </h3>
      <div class="modal-body d-flex clr-justify-content-center">
        <p class="m-0">Please enter password:</p>
        <input
          #filePasswordInput
          [(ngModel)]="passwordInput"
          data-lpignore="true"
          autocomplete="off"
          id="filePasswordInput"
          type="text"
          class="clr-input disable-password-manager"
        />
      </div>
      <div class="modal-footer">
        <div>
          @if (options.error) {
            <p class="m-0 color-red">Sorry that didn't work, try again.</p>
          }
        </div>
        <div class="buttons">
          <button
            type="button"
            class="btn btn-sm btn-outline"
            (click)="close()"
          >
            Cancel
          </button>
          <button
            type="button"
            class="btn btn-sm btn-success-outline"
            [disabled]="filePasswordInput.value.length < 1"
            (click)="close(filePasswordInput.value)"
          >
            Unlock
          </button>
        </div>
      </div>
    </clr-modal>
  </div>
}