<app-header></app-header>

@let organization = organization$ | async;
@let policiesEnabledMap = policiesEnabledMap$ | async;
@let organizationId = organizationId$ | async;

<bit-container>
  @if (!organization || !policiesEnabledMap || !organizationId) {
    <i
      class="bwi bwi-spinner bwi-spin tw-text-muted"
      title="{{ 'loading' | i18n }}"
      aria-hidden="true"
    ></i>
    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
  } @else {
    <bit-table>
      <ng-template body>
        @for (p of policies$ | async | policyOrder; track $index) {
          @if (p.display$(organization, configService) | async) {
            <tr bitRow>
              <td bitCell ngPreserveWhitespaces>
                <div class="tw-flex tw-items-center tw-gap-2">
                  <button type="button" bitLink (click)="edit(p, organizationId)">
                    {{ p.name | i18n }}
                  </button>
                  @if (policiesEnabledMap.get(p.type)) {
                    <span bitBadge variant="success">{{ "on" | i18n }}</span>
                  }
                </div>
                <small class="tw-text-muted tw-block">{{ p.description | i18n }}</small>
              </td>
            </tr>
          }
        }
      </ng-template>
    </bit-table>
  }
</bit-container>
