<app-header></app-header>

@let policySections = policySections$ | async;
@let policiesEnabledMap = policiesEnabledMap$ | async;
@let organization = organization$ | async;
@let drawerEnabled = useDrawer();

<bit-container>
  @if (!policySections || !policiesEnabledMap || !organization) {
    <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 {
    @for (section of policySections; track section.category) {
      <bit-section>
        <bit-section-header>
          <h2 bitTypography="h2">{{ section.labelKey | i18n }}</h2>
        </bit-section-header>
        <bit-item-group [attr.aria-label]="section.labelKey | i18n">
          @for (p of section.policies; track p.type) {
            <bit-item>
              <button type="button" bit-item-content (click)="edit(p, organization)">
                {{ (drawerEnabled && p.v2?.name ? p.v2.name : p.name) | i18n }}
                <span slot="secondary">{{
                  (drawerEnabled && p.v2?.description ? p.v2.description : p.description) | i18n
                }}</span>
                @if (policiesEnabledMap.get(p.type)) {
                  <span bitBadge variant="success" slot="end">{{ "on" | i18n }}</span>
                } @else {
                  <span bitBadge variant="secondary" slot="end">{{ "off" | i18n }}</span>
                }
              </button>
            </bit-item>
          }
        </bit-item-group>
      </bit-section>
    }
  }
</bit-container>
