<div *ngIf="showHeaderInfo" class="tw-mt-6 tw-mb-2 tw-pb-2.5">
  <div class="tw-flex tw-items-center tw-gap-2 tw-mb-5">
    <h1 class="tw-m-0">{{ "devices" | i18n }}</h1>

    <button
      type="button"
      class="tw-border-none tw-bg-transparent tw-text-primary-600 tw-flex tw-items-center tw-size-4"
      [bitPopoverTriggerFor]="infoPopover"
      position="right-start"
    >
      <i class="bwi bwi-question-circle" aria-hidden="true"></i>
    </button>

    <bit-popover [title]="'whatIsADevice' | i18n" #infoPopover>
      <p class="tw-mb-0">{{ "aDeviceIs" | i18n }}</p>
    </bit-popover>
  </div>

  <p>
    {{ "deviceListDescriptionTemp" | i18n }}
  </p>
</div>

@if (initializing) {
  <div class="tw-flex tw-justify-center tw-items-center tw-p-4">
    <i class="bwi bwi-spinner bwi-spin tw-text-2xl" aria-hidden="true"></i>
  </div>
} @else {
  <!-- Table View: displays on medium to large screens -->
  <auth-device-management-table
    ngClass="tw-hidden md:tw-block"
    [devices]="devices"
    (onAuthRequestAnswered)="handleAuthRequestAnswered($event)"
  ></auth-device-management-table>

  <!-- List View: displays on small screens -->
  <auth-device-management-item-group
    ngClass="md:tw-hidden"
    [devices]="devices"
    (onAuthRequestAnswered)="handleAuthRequestAnswered($event)"
  ></auth-device-management-item-group>
}
