<bit-section disableMargin>
  <bit-section-header>
    <h2 bitTypography="h6">{{ "itemHistory" | i18n }}</h2>
  </bit-section-header>
  <bit-card>
    <p class="tw-mb-1 tw-text-xs tw-text-muted tw-select-all">
      <span class="tw-font-medium">{{ "lastEdited" | i18n }}:</span>
      {{ cipher.revisionDate | date: "medium" }}
    </p>
    <p
      class="tw-text-xs tw-text-muted tw-select-all"
      [ngClass]="{
        'tw-mb-1 ': cipher.hasPasswordHistory,
        'tw-mb-0': !cipher.hasPasswordHistory,
      }"
    >
      <span class="tw-font-medium">{{ "dateCreated" | i18n }}:</span>
      {{ cipher.creationDate | date: "medium" }}
    </p>
    @if (cipher.passwordRevisionDisplayDate) {
      <p
        class="tw-text-xs tw-text-muted tw-select-all"
        [ngClass]="{ 'tw-mb-3': cipher.hasPasswordHistory }"
      >
        <span class="tw-font-medium">{{ "datePasswordUpdated" | i18n }}:</span>
        {{ cipher.passwordRevisionDisplayDate | date: "medium" }}
      </p>
    }
    @if (cipher.hasPasswordHistory) {
      <button (click)="viewPasswordHistory()" bitTypography="body2" bitLink type="button">
        {{ "passwordHistory" | i18n }}
      </button>
    }
  </bit-card>
</bit-section>
