<app-header [title]="'pamAccessRules' | i18n">
  @if (!loading() && rules().length > 0) {
    <button
      type="button"
      bitButton
      buttonType="primary"
      [bitAction]="openCreate"
      id="access-rules_button_new"
    >
      {{ "pamAccessRuleNew" | i18n }}
    </button>
  }
</app-header>

<p bitTypography="body">{{ "pamAccessRulesSubheading" | i18n }}</p>

@if (!loading()) {
  @if (rules().length > 0) {
    <div class="tw-mb-4 tw-flex tw-items-center tw-gap-3" [formGroup]="filterForm">
      <bit-search
        class="tw-grow tw-max-w-md"
        [placeholder]="'pamSearchRules' | i18n"
        formControlName="search"
      />
      <bit-chip-filter
        [placeholderText]="'status' | i18n"
        placeholderIcon="bwi-filter"
        [options]="statusOptions"
        formControlName="status"
      />
      <bit-chip-filter
        [placeholderText]="'pamAccessRuleCollectionsColumn' | i18n"
        placeholderIcon="bwi-collection-shared"
        [options]="collectionOptions()"
        formControlName="collection"
      />
    </div>

    <bit-table [dataSource]="dataSource">
      <ng-container header>
        <tr>
          <th bitCell class="tw-w-0">
            <input
              type="checkbox"
              bitCheckbox
              id="access-rules_checkbox_select-all"
              [checked]="allSelected()"
              [indeterminate]="someSelected()"
              (change)="toggleAll()"
            />
            <label for="access-rules_checkbox_select-all" class="tw-sr-only">{{
              "selectAll" | i18n
            }}</label>
          </th>
          <th bitCell bitSortable="name">{{ "pamAccessRuleName" | i18n }}</th>
          <th bitCell>{{ "pamAccessRuleAppliesTo" | i18n }}</th>
          <th bitCell>{{ "pamAccessRuleConditionsColumn" | i18n }}</th>
          <th bitCell>{{ "pamAccessWindow" | i18n }}</th>
          <th bitCell bitSortable="status" [fn]="sortByStatus">{{ "status" | i18n }}</th>
          <th bitCell bitSortable="revisionDate" default="desc" [fn]="sortByRevisionDate">
            {{ "pamAccessRuleLastModified" | i18n }}
          </th>
          <th bitCell class="tw-w-0"></th>
        </tr>
      </ng-container>
      <ng-template body let-rows$>
        <tr bitRow *ngFor="let r of rows$ | async">
          <td bitCell>
            <input
              type="checkbox"
              bitCheckbox
              [id]="'access-rules_checkbox_' + r.id"
              [checked]="selection.isSelected(r.id)"
              (change)="selection.toggle(r.id)"
            />
            <label [for]="'access-rules_checkbox_' + r.id" class="tw-sr-only">{{ r.name }}</label>
          </td>
          <td bitCell>
            <button type="button" bitLink linkType="primary" (click)="openEdit(r)">
              {{ r.name }}
            </button>
            @if (r.description) {
              <div class="tw-text-sm tw-text-muted">{{ r.description }}</div>
            }
          </td>
          <td bitCell>
            <pam-access-rule-collection-badges
              [collectionIds]="r.collections"
              [collections]="collections()"
            />
          </td>
          <td bitCell>
            <div class="tw-flex tw-flex-wrap tw-gap-1">
              @for (badge of r.conditions | conditionBadges; track badge.labelKey) {
                <span bitBadge variant="subtle" [startIcon]="badge.icon">{{
                  badge.labelKey | i18n
                }}</span>
              }
            </div>
          </td>
          <td bitCell>
            @if (r | accessRuleWindow; as window) {
              <span bitBadge variant="subtle" startIcon="bwi-clock"
                >{{ window.defaultSeconds | durationShort }}
                @if (window.maxSeconds) {
                  –{{ window.maxSeconds | durationShort }}
                }
              </span>
            } @else {
              <span class="tw-text-muted">—</span>
            }
          </td>
          <td bitCell>
            @if (r.enabled) {
              <span bitBadge variant="success">{{ "pamAccessRuleEnabled" | i18n }}</span>
            } @else {
              <span bitBadge variant="subtle">{{ "disabled" | i18n }}</span>
            }
          </td>
          <td bitCell>
            <span class="tw-text-muted" [title]="r.revisionDate | date: 'medium'">{{
              r.revisionDate | relativeTime
            }}</span>
          </td>
          <td bitCell>
            <button
              type="button"
              bitIconButton="bwi-ellipsis-h"
              [bitMenuTriggerFor]="rowMenu"
              label="{{ 'options' | i18n }}"
            ></button>
            <bit-menu #rowMenu>
              <button type="button" bitMenuItem (click)="openEdit(r)">
                <bit-icon name="bwi-pencil-square" class="tw-text-muted" />
                {{ "edit" | i18n }}
              </button>
              <button type="button" bitMenuItem (click)="toggleEnabled(r)">
                @if (r.enabled) {
                  <bit-icon name="bwi-circle" class="tw-text-muted" />
                  {{ "pamAccessRuleDisable" | i18n }}
                } @else {
                  <bit-icon name="bwi-check-circle" class="tw-text-muted" />
                  {{ "pamAccessRuleEnable" | i18n }}
                }
              </button>
              <button type="button" bitMenuItem (click)="remove(r)">
                <bit-icon name="bwi-trash" class="tw-text-danger" />
                <span class="tw-text-danger">{{ "delete" | i18n }}</span>
              </button>
            </bit-menu>
          </td>
        </tr>
        @if (processedRows().length === 0) {
          <tr bitRow>
            <td bitCell colspan="8" class="tw-py-6 tw-text-center tw-text-muted">
              {{ "pamAccessRulesNoResults" | i18n }}
            </td>
          </tr>
        }
      </ng-template>
    </bit-table>

    <bit-bulk-actions-bar [selectedCount]="selectedCount()" (clear)="clearSelection()">
      <bit-bulk-action
        [action]="bulkEnable"
        icon="bwi-check-circle"
        [label]="'pamAccessRuleBulkEnable' | i18n"
      />
      <bit-bulk-action
        [action]="bulkDisable"
        icon="bwi-circle"
        [label]="'pamAccessRuleBulkDisable' | i18n"
      />
      <bit-bulk-action [action]="bulkDelete" icon="bwi-trash" [label]="'delete' | i18n" />
    </bit-bulk-actions-bar>
  } @else {
    <pam-access-rules-empty-state
      (create)="openCreate()"
      (useTemplate)="openFromTemplate($event)"
    />
  }
} @else {
  <bit-icon name="bwi-spinner" class="bwi-spin tw-text-muted" />
}
