<popup-page [loading]="loading$ | async">
  <popup-header
    slot="header"
    [pageTitle]="'atRiskPasswords' | i18n"
    showBackButton
    [backAction]="navigateToVault"
  >
    <ng-container slot="end">
      <app-pop-out></app-pop-out>
    </ng-container>
  </popup-header>

  @if (showAutofillCallout$ | async) {
    <bit-callout
      type="info"
      [appA11yTitle]="'changeAtRiskPasswordsFaster' | i18n"
      data-testid="autofill-callout"
    >
      <p bitTypography="body2">{{ "changeAtRiskPasswordsFasterDesc" | i18n }}</p>
      <button
        type="button"
        bitButton
        buttonType="primary"
        (click)="activateInlineAutofillMenuVisibility()"
        data-testid="turn-on-autofill-button"
        class="tw-mr-2"
      >
        {{ "turnOnAutofill" | i18n }}
      </button>
      <button
        type="button"
        bitButton
        buttonType="secondary"
        (click)="dismissCallout()"
        data-testid="dismiss-callout-button"
      >
        {{ "dismiss" | i18n }}
      </button>
    </bit-callout>
  }

  @if (atRiskItems$ | async; as items) {
    <p bitTypography="body2">{{ pageDescription$ | async }}</p>

    <bit-item-group>
      @for (cipher of items; track cipher.id) {
        <bit-item>
          <button
            bit-item-content
            type="button"
            [appA11yTitle]="'viewItemTitle' | i18n: cipher.name"
            (click)="viewCipher(cipher)"
          >
            <div slot="start" class="tw-justify-start tw-w-7 tw-flex">
              <app-vault-icon [cipher]="cipher"></app-vault-icon>
            </div>
            <span data-testid="item-name">{{ cipher.name }}</span>
            <span slot="secondary">{{ cipher.subTitle }}</span>
            <div slot="default-trailing">
              @if (cipher.hasAttachments) {
                <i class="bwi bwi-paperclip bwi-sm" [appA11yTitle]="'attachments' | i18n"></i>
              }
            </div>
          </button>
          <bit-item-action slot="end">
            @if (hasLoginUri(cipher)) {
              <button
                type="button"
                bitButton
                buttonType="primary"
                [loading]="launchingCipher() == cipher"
                appStopProp
                (click)="launchChangePassword(cipher)"
                [appA11yTitle]="'changeButtonTitle' | i18n: cipher.name"
              >
                {{ "change" | i18n }}
              </button>
            } @else {
              <button
                type="button"
                bitButton
                buttonType="primary"
                [appA11yTitle]="'viewItemTitle' | i18n: cipher.name"
                (click)="viewCipher(cipher)"
              >
                {{ "viewLogin" | i18n }}
              </button>
            }
          </bit-item-action>
        </bit-item>
      }
    </bit-item-group>
  }
</popup-page>
