<c8y-list-group>
  <c8y-li>
    <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
          type="checkbox"
          [(ngModel)]="config.features.search"
          name="search"
          (change)="updateFeatures()"
        />
        <span></span>
      </label>
    </div>
  </c8y-li>
  <c8y-li>
    <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
          type="checkbox"
          [(ngModel)]="config.features.groups"
          name="groups"
          (change)="updateFeatures()"
        />
        <span></span>
      </label>
    </div>
  </c8y-li>
  <c8y-li>
    <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
          type="checkbox"
          [(ngModel)]="config.features.alarms"
          name="alarms"
          (change)="updateFeatures()"
        />
        <span></span>
      </label>
    </div>
  </c8y-li>
  <c8y-li>
    <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
          type="checkbox"
          [(ngModel)]="config.features.dataExplorer"
          name="dataExplorer"
          (change)="updateFeatures()"
        />
        <span></span>
      </label>
    </div>
  </c8y-li>
  <c8y-li>
    <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
          type="checkbox"
          [(ngModel)]="config.features.reports"
          name="reports"
          (change)="updateFeatures()"
        />
        <span></span>
      </label>
    </div>
  </c8y-li>
  <c8y-li>
    <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
          type="checkbox"
          [(ngModel)]="config.features.exports"
          name="exports"
          (change)="updateFeatures()"
        />
        <span></span>
      </label>
    </div>
  </c8y-li>
  <c8y-li>
    <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
          type="checkbox"
          [(ngModel)]="config.features.dataPointLibrary"
          name="dataPointLibrary"
          (change)="updateFeatures()"
        />
        <span></span>
      </label>
    </div>
  </c8y-li>
  <c8y-li>
    <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
          type="checkbox"
          [(ngModel)]="config.features.globalSmartRules"
          name="globalSmartRules"
          (change)="updateFeatures()"
        />
        <span></span>
      </label>
    </div>
  </c8y-li>
  <c8y-li>
    <c8y-li-icon icon="c8y-group-open"></c8y-li-icon>
    <div class="d-flex a-i-center">
      <div>
        <p>{{ 'Sub assets view' | translate }}</p>
        <p><small translate>Display the sub assets tab on groups.</small></p>
      </div>
      <label
        class="c8y-switch c8y-switch--inline m-l-auto"
        title="{{ 'Sub assets view' | translate }}"
      >
        <input
          type="checkbox"
          [(ngModel)]="config.features.subassets"
          name="subassets"
          (change)="updateFeatures()"
        />
        <span></span>
      </label>
    </div>
  </c8y-li>
  <c8y-li>
    <c8y-li-icon icon="c8y-smart-rules"></c8y-li-icon>
    <div class="d-flex a-i-center">
      <div>
        <p>{{ 'Device and group smart rules' | 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="{{ 'Device and group smart rules' | translate }}"
      >
        <input
          type="checkbox"
          [(ngModel)]="config.features.smartRules"
          name="smartRules"
          (change)="updateFeatures()"
        />
        <span></span>
      </label>
    </div>
  </c8y-li>
</c8y-list-group>