<c8y-list-group>
  <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>
  <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>
  <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>
  <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>
  <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>
  <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>
  <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>