<div class="card-block separator-bottom bg-component text-center flex-no-shrink p-24">
  <div class="d-flex fit-w a-i-center j-c-center">
    <i
      class="icon-24 m-r-8"
      [c8yIcon]="'science'"
    ></i>
    <h3
      class="m-0"
      translate
    >
      Preview features
    </h3>
  </div>
  <p class="text-16 m-t-8">
    {{
      'Select any feature to view additional details and documentation. Toggle features on or off using the switches.'
        | translate
    }}
  </p>

  <p>
    {{
      'These beta capabilities may change or be removed before final release. We value your feedback. The descriptions for the features below are available only in English.'
        | translate
    }}
  </p>
</div>

<div class="card-block p-0">
  <div class="d-flex fit-h">
    <div class="col-md-4 col-lg-3 p-l-0 p-r-0 sticky-top m-t-0 inner-scroll bg-level-1">
      <div class="nav-tabs nav-tabs-vertical nav-tabs-vertical--wide p-t-0">
        @for (feature of features$ | async; track feature) {
          <div
            [class.active]="feature === selectedFeature"
            class="d-flex fit-w a-i-center"
          >
            <button
              class="d-flex gap-4 text-truncate flex-grow min-width-0"
              title="{{ feature.label }}"
              [ngClass]="{
                'bg-component': feature === selectedFeature,
                'bg-level-1': feature !== selectedFeature
              }"
              (click)="updateSelectedFeature(feature)"
            >
              <i
                class="m-l-0"
                [c8yIcon]="'science'"
              ></i>
              <span class="text-truncate">
                {{ feature.label }}
              </span>
            </button>
            <div
              class="a-s-stretch d-flex a-i-center separator-bottom p-r-16"
              [ngClass]="{
                'bg-component': feature === selectedFeature,
                'bg-level-1': feature !== selectedFeature
              }"
            >
              <label
                class="c8y-switch c8y-switch--inline m-l-auto"
                title="{{ 'Enable or disable' | translate }}"
              >
                <input
                  [attr.aria-label]="feature.label"
                  type="checkbox"
                  [checked]="feature.key | featureState | async"
                  (change)="$event.stopPropagation(); onToggle(feature, $event)"
                />
                <span class="slider round"></span>
              </label>
            </div>
          </div>
        }
      </div>
    </div>

    @if (selectedFeature) {
      <div class="col-md-8 col-lg-9 p-24 inner-scroll markdown-content">
        <span class="tag tag--primary h4">
          {{ 'Feature preview' | translate }} — {{ selectedFeature.label }}
        </span>
        @if (isComponent(description$.value)) {
          <div>
            <ng-container *ngComponentOutlet="description$.value"></ng-container>
            @if (selectedFeature.key) {
              <c8y-feedback-form
                [featureKey]="selectedFeature.key"
                [featurePreviewName]="selectedFeature.label"
              ></c8y-feedback-form>
            }
          </div>
        } @else {
          <p [innerHTML]="description$.value"></p>
          @if (selectedFeature.key) {
            <c8y-feedback-form
              [featureKey]="selectedFeature.key"
              [featurePreviewName]="selectedFeature.label"
            ></c8y-feedback-form>
          }
        }
      </div>
    }
  </div>
</div>

<div class="text-center card-footer p-24 separator">
  <button
    class="btn btn-default"
    title="{{ 'Close' | translate }}"
    type="button"
    (click)="close()"
  >
    {{ 'Close' | translate }}
  </button>
</div>