<ng-container>
  <bit-table-scroll [dataSource]="dataSource()" [rowSize]="53">
    <ng-container header>
      <th bitCell>
        <input
          data-testid="selectAll"
          bitCheckbox
          type="checkbox"
          [checked]="allAppsSelected()"
          [bitTooltip]="allAppsSelected() ? ('deselectAll' | i18n) : ('selectAll' | i18n)"
          (change)="selectAllChanged($event.target)"
          [attr.aria-label]="allAppsSelected() ? ('deselectAll' | i18n) : ('selectAll' | i18n)"
          [disabled]="dataSource().filteredData?.length === 0"
        />
      </th>
      <th bitCell></th>
      <th bitSortable="applicationName" bitCell tabindex="0">{{ "application" | i18n }}</th>
      <th bitSortable="atRiskPasswordCount" bitCell default="desc" tabindex="0">
        {{ "atRiskPasswords" | i18n }}
      </th>
      <th bitSortable="passwordCount" bitCell tabindex="0">{{ "totalPasswords" | i18n }}</th>
      <th bitSortable="atRiskMemberCount" bitCell tabindex="0">{{ "atRiskMembers" | i18n }}</th>
      <th bitSortable="memberCount" bitCell tabindex="0">{{ "totalMembers" | i18n }}</th>
    </ng-container>
    <ng-template bitRowDef let-row>
      <td
        bitCell
        [ngClass]="{ 'tw-bg-primary-100': row.applicationName === openApplication }"
        [attr.aria-label]="'select' | i18n"
        appStopProp
      >
        <input
          bitCheckbox
          type="checkbox"
          [checked]="selectedUrls().has(row.applicationName)"
          (change)="checkboxChange()(row.applicationName, $event)"
        />
      </td>
      <td
        bitCell
        class="tw-cursor-pointer"
        [ngClass]="{ 'tw-bg-primary-100': row.applicationName === openApplication }"
        (click)="showAppAtRiskMembers()(row.applicationName)"
        (keydown.enter)="showAppAtRiskMembers()(row.applicationName)"
        (keydown.space)="showAppAtRiskMembers()(row.applicationName)"
        role="button"
        tabindex="0"
        [attr.aria-label]="row.applicationName"
      >
        @if (row.iconCipher) {
          <app-vault-icon [cipher]="row.iconCipher" [size]="24"></app-vault-icon>
        }
      </td>
      <td
        class="tw-cursor-pointer tw-align-middle"
        [ngClass]="{ 'tw-bg-primary-100': row.applicationName === openApplication }"
        (click)="showAppAtRiskMembers()(row.applicationName)"
        (keydown.enter)="showAppAtRiskMembers()(row.applicationName)"
        (keydown.space)="showAppAtRiskMembers()(row.applicationName)"
        role="button"
        tabindex="0"
        [attr.aria-label]="
          row.applicationName + ' ' + (row.isMarkedAsCritical ? ('criticalBadge' | i18n) : '')
        "
      >
        <div class="tw-flex tw-items-center tw-gap-2">
          <div class="tw-max-w-md tw-truncate" [title]="row.applicationName">
            {{ row.applicationName }}
          </div>

          @if (row.isMarkedAsCritical) {
            <span bitBadge [attr.aria-label]="'criticalBadge' | i18n">{{
              "criticalBadge" | i18n
            }}</span>
          }
        </div>
      </td>
      <td
        bitCell
        class="tw-cursor-pointer"
        [ngClass]="{ 'tw-bg-primary-100': row.applicationName === openApplication }"
        (click)="showAppAtRiskMembers()(row.applicationName)"
        (keydown.enter)="showAppAtRiskMembers()(row.applicationName)"
        (keydown.space)="showAppAtRiskMembers()(row.applicationName)"
        role="button"
        tabindex="0"
        [attr.aria-label]="('atRiskPasswords' | i18n) + ' ' + row.atRiskPasswordCount"
      >
        <span>
          {{ row.atRiskPasswordCount }}
        </span>
      </td>
      <td
        bitCell
        class="tw-cursor-pointer"
        [ngClass]="{ 'tw-bg-primary-100': row.applicationName === openApplication }"
        (click)="showAppAtRiskMembers()(row.applicationName)"
        (keydown.enter)="showAppAtRiskMembers()(row.applicationName)"
        (keydown.space)="showAppAtRiskMembers()(row.applicationName)"
        role="button"
        tabindex="0"
        [attr.aria-label]="('totalPasswords' | i18n) + ' ' + row.passwordCount"
      >
        <span>
          {{ row.passwordCount }}
        </span>
      </td>
      <td
        bitCell
        class="tw-cursor-pointer"
        [ngClass]="{ 'tw-bg-primary-100': row.applicationName === openApplication }"
        (click)="showAppAtRiskMembers()(row.applicationName)"
        (keydown.enter)="showAppAtRiskMembers()(row.applicationName)"
        (keydown.space)="showAppAtRiskMembers()(row.applicationName)"
        role="button"
        tabindex="0"
        [attr.aria-label]="('atRiskMembers' | i18n) + ' ' + row.atRiskMemberCount"
      >
        <span>
          {{ row.atRiskMemberCount }}
        </span>
      </td>
      <td
        bitCell
        data-testid="total-membership"
        class="tw-cursor-pointer"
        [ngClass]="{ 'tw-bg-primary-100': row.applicationName === openApplication }"
        (click)="showAppAtRiskMembers()(row.applicationName)"
        (keydown.enter)="showAppAtRiskMembers()(row.applicationName)"
        (keydown.space)="showAppAtRiskMembers()(row.applicationName)"
        role="button"
        tabindex="0"
        [attr.aria-label]="('totalMembers' | i18n) + ' ' + row.memberCount"
      >
        {{ row.memberCount }}
      </td>
    </ng-template>
  </bit-table-scroll>
</ng-container>
