<c8y-list-group>
  @if ('SearchModule' | c8yPluginLoaded | async) {
    <c8y-li data-cy="feature-config--feature-list">
      <c8y-li-icon icon="search"></c8y-li-icon>
      <div class="d-flex a-i-center">
        <div>
          <p>{{ 'Global search' | translate }}</p>
          <p>
            <small translate>Display the global search in the main header.</small>
          </p>
        </div>
        <label
          class="c8y-switch c8y-switch--inline m-l-auto"
          title="{{ 'Global search' | translate }}"
        >
          <input
            name="search"
            type="checkbox"
            [(ngModel)]="config().features.search"
            (change)="updateFeatures()"
          />
          <span></span>
        </label>
      </div>
    </c8y-li>
  }
  <c8y-li data-cy="feature-config--feature-list">
    <c8y-li-icon icon="c8y-group"></c8y-li-icon>
    <div class="d-flex a-i-center">
      <div>
        <p>{{ 'Groups' | translate }}</p>
        <p>
          <small translate>Display top level groups under the Groups navigator menu.</small>
        </p>
      </div>
      <label
        class="c8y-switch c8y-switch--inline m-l-auto"
        title="{{ 'Groups' | translate }}"
      >
        <input
          name="groups"
          type="checkbox"
          [(ngModel)]="config().features.groups"
          (change)="updateFeatures()"
        />
        <span></span>
      </label>
    </div>
  </c8y-li>
  @if ('CockpitAlarmsModule' | c8yPluginLoaded | async) {
    <c8y-li data-cy="feature-config--feature-list">
      <c8y-li-icon icon="bell"></c8y-li-icon>
      <div class="d-flex a-i-center">
        <div>
          <p>{{ 'Alarms' | translate }}</p>
          <p>
            <small translate>Display a link to the global alarms list in the navigator menu.</small>
          </p>
        </div>
        <label
          class="c8y-switch c8y-switch--inline m-l-auto"
          title="{{ 'Global Alarms view' | translate }}"
        >
          <input
            name="alarms"
            type="checkbox"
            [(ngModel)]="config().features.alarms"
            (change)="updateFeatures()"
          />
          <span></span>
        </label>
      </div>
    </c8y-li>
  }
  @if ('eventsCockpitProviders' | c8yPluginLoaded | async) {
    <c8y-li data-cy="feature-config--feature-list">
      <c8y-li-icon icon="online1"></c8y-li-icon>
      <div class="d-flex a-i-center">
        <div>
          <p>{{ 'Events' | translate }}</p>
          <p>
            <small translate>Display a link to the global events list in the navigator menu.</small>
          </p>
        </div>
        <label
          class="c8y-switch c8y-switch--inline m-l-auto"
          title="{{ 'Global Events view' | translate }}"
        >
          <input
            name="events"
            type="checkbox"
            [(ngModel)]="config().features.events"
            (change)="updateFeatures()"
          />
          <span></span>
        </label>
      </div>
    </c8y-li>
  }
  <c8y-li data-cy="feature-config--feature-list">
    <c8y-li-icon icon="c8y-data-explorer"></c8y-li-icon>
    <div class="d-flex a-i-center">
      <div>
        <p>{{ 'Data explorer' | translate }}</p>
        <p>
          <small translate>
            Display the data explorer in the navigator menu and on the group tabs.
          </small>
        </p>
      </div>
      <label
        class="c8y-switch c8y-switch--inline m-l-auto"
        title="{{ 'Data explorer' | translate }}"
      >
        <input
          name="dataExplorer"
          type="checkbox"
          [(ngModel)]="config().features.dataExplorer"
          (change)="updateFeatures()"
        />
        <span></span>
      </label>
    </div>
  </c8y-li>
  @if ('ReportDashboardModule' | c8yPluginLoaded | async) {
    <c8y-li data-cy="feature-config--feature-list">
      <c8y-li-icon icon="c8y-reports"></c8y-li-icon>
      <div class="d-flex a-i-center">
        <div>
          <p>{{ 'Reports' | translate }}</p>
          <p>
            <small translate>Display a link to the Reports list in the navigator menu.</small>
          </p>
        </div>
        <label
          class="c8y-switch c8y-switch--inline m-l-auto"
          title="{{ 'Reports' | translate }}"
        >
          <input
            name="reports"
            type="checkbox"
            [(ngModel)]="config().features.reports"
            (change)="updateFeatures()"
          />
          <span></span>
        </label>
      </div>
    </c8y-li>
  }
  @if ('exportsProviders' | c8yPluginLoaded | async) {
    <c8y-li data-cy="feature-config--feature-list">
      <c8y-li-icon icon="graph-report"></c8y-li-icon>
      <div class="d-flex a-i-center">
        <div>
          <p>{{ 'Exports' | translate }}</p>
          <p>
            <small translate>
              Display a link to the Exports list under the Configuration navigator menu.
            </small>
          </p>
        </div>
        <label
          class="c8y-switch c8y-switch--inline m-l-auto"
          title="{{ 'Exports' | translate }}"
        >
          <input
            name="exports"
            type="checkbox"
            [(ngModel)]="config().features.exports"
            (change)="updateFeatures()"
          />
          <span></span>
        </label>
      </div>
    </c8y-li>
  }
  @if ('DatapointLibraryModule' | c8yPluginLoaded | async) {
    <c8y-li data-cy="feature-config--feature-list">
      <c8y-li-icon icon="c8y-data-points"></c8y-li-icon>
      <div class="d-flex a-i-center">
        <div>
          <p>{{ 'Data point library' | translate }}</p>
          <p>
            <small translate>
              Display a link to the Data point library under the Configuration navigator menu.
            </small>
          </p>
        </div>
        <label
          class="c8y-switch c8y-switch--inline m-l-auto"
          title="{{ 'Data point library' | translate }}"
        >
          <input
            name="dataPointLibrary"
            type="checkbox"
            [(ngModel)]="config().features.dataPointLibrary"
            (change)="updateFeatures()"
          />
          <span></span>
        </label>
      </div>
    </c8y-li>
  }
  <c8y-li data-cy="feature-config--feature-list">
    <c8y-li-icon icon="c8y-smart-rules"></c8y-li-icon>
    <div class="d-flex a-i-center">
      <div>
        <p>{{ 'Global smart rules' | translate }}</p>
        <p>
          <small translate>
            Display a link to the Global smart rules under the Configuration navigator menu.
          </small>
        </p>
      </div>
      <label
        class="c8y-switch c8y-switch--inline m-l-auto"
        title="{{ 'Global smart rules' | translate }}"
      >
        <input
          name="globalSmartRules"
          type="checkbox"
          [(ngModel)]="config().features.globalSmartRules"
          (change)="updateFeatures()"
        />
        <span></span>
      </label>
    </div>
  </c8y-li>
  <c8y-li data-cy="feature-config--feature-list">
    <c8y-li-icon icon="c8y-group-open"></c8y-li-icon>
    <div class="d-flex a-i-center">
      <div>
        <p>{{ 'Subassets view' | translate }}</p>
        <p><small translate>Display the "Subassets" tab on groups.</small></p>
      </div>
      <label
        class="c8y-switch c8y-switch--inline m-l-auto"
        title="{{ 'Subassets view' | translate }}"
      >
        <input
          name="subassets"
          type="checkbox"
          [(ngModel)]="config().features.subassets"
          (change)="updateFeatures()"
        />
        <span></span>
      </label>
    </div>
  </c8y-li>
  <c8y-li data-cy="feature-config--feature-list">
    <c8y-li-icon icon="c8y-smart-rules"></c8y-li-icon>
    <div class="d-flex a-i-center">
      <div>
        <p>{{ 'Smart rules for devices and groups' | translate }}</p>
        <p>
          <small translate>Display the smart rules tab on groups and devices.</small>
        </p>
      </div>
      <label
        class="c8y-switch c8y-switch--inline m-l-auto"
        title="{{ 'Smart rules for devices and groups' | translate }}"
      >
        <input
          name="smartRules"
          type="checkbox"
          [(ngModel)]="config().features.smartRules"
          (change)="updateFeatures()"
        />
        <span></span>
      </label>
    </div>
  </c8y-li>
  @if ('DashboardManagerModule' | c8yPluginLoaded | async) {
    <c8y-li data-cy="feature-config--feature-list">
      <c8y-li-icon icon="management1"></c8y-li-icon>
      <div class="d-flex a-i-center">
        <div>
          <p>{{ 'Dashboard manager' | translate }}</p>
          <p>
            <small translate>
              Display a link to the Dashboard manager under the Configuration navigator menu.
            </small>
          </p>
        </div>
        <label
          class="c8y-switch c8y-switch--inline m-l-auto"
          title="{{ 'Dashboard manager' | translate }}"
        >
          <input
            name="dashboardManager"
            type="checkbox"
            [(ngModel)]="config().features.dashboardManager"
            (change)="updateFeatures()"
          />
          <span></span>
        </label>
      </div>
    </c8y-li>
  }
</c8y-list-group>