<bit-dialog [dialogSize]="'default'">
  <span bitDialogTitle>{{ "prioritizeCriticalApplications" | i18n }}</span>
  <div bitDialogContent>
    <div class="tw-overflow-x-auto">
      <table class="tw-w-full tw-border-collapse">
        <thead>
          <tr class="tw-border-b tw-border-secondary-300">
            <th bitTypography="body2" class="tw-text-left tw-py-3 tw-px-2 tw-w-12"></th>
            <th bitTypography="body2" class="tw-text-left tw-py-3 tw-px-2 tw-font-semibold">
              {{ "application" | i18n }}
            </th>
            <th bitTypography="body2" class="tw-text-right tw-py-3 tw-px-2 tw-font-semibold">
              {{ "atRiskItems" | i18n }}
            </th>
          </tr>
        </thead>
        <tbody>
          @for (app of newApplications; track app) {
            <tr class="tw-border-b tw-border-secondary-300 hover:tw-bg-background-alt">
              <td class="tw-py-3 tw-px-2">
                <button
                  type="button"
                  class="tw-bg-transparent tw-border-0 tw-p-0 tw-cursor-pointer"
                  (click)="toggleSelection(app)"
                  [attr.aria-label]="
                    isSelected(app) ? ('unselectApplication' | i18n) : ('selectApplication' | i18n)
                  "
                >
                  <i
                    class="bwi tw-text-muted"
                    [ngClass]="isSelected(app) ? 'bwi-star-f' : 'bwi-star'"
                    aria-hidden="true"
                  ></i>
                </button>
              </td>
              <td bitTypography="body1" class="tw-py-3 tw-px-2">
                <div class="tw-flex tw-items-center tw-gap-2">
                  <i class="bwi bwi-globe tw-text-muted" aria-hidden="true"></i>
                  <span>{{ app }}</span>
                </div>
              </td>
              <td bitTypography="body1" class="tw-py-3 tw-px-2 tw-text-right tw-text-muted">—</td>
            </tr>
          }
        </tbody>
      </table>
    </div>
  </div>
  <ng-container bitDialogFooter>
    <button
      type="button"
      bitButton
      size="small"
      buttonType="primary"
      (click)="onMarkAsCritical()"
      [attr.aria-label]="'markAsCritical' | i18n"
    >
      {{ "markAsCritical" | i18n }}
    </button>
    <button
      type="button"
      bitButton
      size="small"
      buttonType="secondary"
      [bitDialogClose]
      [attr.aria-label]="'cancel' | i18n"
    >
      {{ "cancel" | i18n }}
    </button>
  </ng-container>
</bit-dialog>
