<c8y-title>{{ 'Feature toggles' | translate }}</c8y-title>

<div class="content-fullpage d-flex d-col border-top border-bottom">
  <c8y-data-grid
    [title]="'Feature toggles' | translate"
    [actionControls]="actionControls"
    [columns]="columns"
    [rows]="items"
    [pagination]="pagination"
    [displayOptions]="displayOptions"
    (onReload)="reload()"
  >
    <c8y-column name="name">
      <ng-container *c8yCellRendererDef="let context">
        <strong>{{ context.value || '--' | translate }}</strong>
      </ng-container>
    </c8y-column>
    <c8y-column name="description">
      <ng-container *c8yCellRendererDef="let context">
        <p>{{ context.value || '--' | translate }}</p>
      </ng-container>
    </c8y-column>
    <c8y-column name="status">
      <ng-container *c8yCellRendererDef="let context">
        <label class="c8y-switch c8y-switch--inline">
          <input
            type="checkbox"
            [ngModel]="context.value"
            [disabled]="!(context.item | canToggleStatusOfFeatureToggle)"
            (ngModelChange)="updateFeature(context.item, !context.value)"
            [ngModelOptions]="{ standalone: true }"
          />
          <span></span>
          <span class="text-12 a-s-center">
            @if (context.value) {
              {{ 'Enabled' | translate }}
            } @else {
              {{ 'Disabled' | translate }}
            }
          </span>
        </label>
      </ng-container>
    </c8y-column>
    <c8y-column name="phase">
      <ng-template #phasePopoverHelp>
        <p>
          <strong>{{ 'Feature phases' | translate }}</strong>
        </p>
        @for (phaseKey of phaseKeysOrder; track phaseKey) {
          @if (phaseKey !== 'PRIVATE_PREVIEW' || hasPrivatePreviewFeatures) {
            <span
              class="tag chip m-b-4"
              [ngClass]="phaseDetails[phaseKey].class"
            >
              {{ phaseDetails[phaseKey].name | translate }}
            </span>
            <p class="text-12 m-b-8">
              {{ phaseDetails[phaseKey].description | translate }}
            </p>
          }
        }
      </ng-template>
      <ng-container *c8yHeaderCellRendererDef>
        {{ 'Phase' | translate }}
        <button
          class="btn-help btn-help--sm"
          [attr.aria-label]="'Help' | translate"
          [popover]="phasePopoverHelp"
          placement="bottom"
          triggers="focus"
          container="body"
          type="button"
        ></button>
      </ng-container>
      <ng-container *c8yCellRendererDef="let context">
        <span
          class="tag"
          [ngClass]="phaseDetails[context.value]?.class || 'tag--warning'"
        >
          {{ phaseDetails[context.value]?.name || context.value | translate }}
        </span>
      </ng-container>
    </c8y-column>
    <c8y-column name="strategy">
      <ng-template #strategyPopoverHelp>
        <p>
          <strong>{{ 'Feature strategies' | translate }}</strong>
        </p>
        @for (strategy of strategyDetails; track strategy) {
          <span
            class="tag chip m-b-4"
            [ngClass]="strategy.class"
          >
            {{ strategy.name | translate }}
          </span>
          <p class="text-12 m-b-8">
            {{ strategy.description | translate }}
          </p>
        }
      </ng-template>
      <ng-container *c8yHeaderCellRendererDef>
        {{ 'Strategy' | translate }}
        <button
          class="btn-help btn-help--sm"
          [attr.aria-label]="'Help' | translate"
          [popover]="strategyPopoverHelp"
          placement="bottom"
          triggers="focus"
          container="body"
          type="button"
        ></button>
      </ng-container>
      <ng-container *c8yCellRendererDef="let context">
        @for (strategy of strategyDetails; track strategy) {
          @if (context.value === strategy.key) {
            <span
              class="tag"
              [ngClass]="strategy.class"
            >
              {{ strategy.name | translate }}
            </span>
          }
        }
      </ng-container>
    </c8y-column>
    <c8y-ui-empty-state
      [icon]="'toggle-on'"
      [title]="'No feature toggles available.' | translate"
      [horizontal]="true"
    ></c8y-ui-empty-state>
  </c8y-data-grid>
</div>