<div ng-controller="htmlWidgetConfigCtrl" class="html-widget-config p-t-8">
  <div class="form-group">
    <label>
      {{ 'HTML code' | translate }}
      <button
        class="btn-help btn-help--sm"
        type="button"
        aria-label="{{ 'Help' | translate }}"
        uib-popover="{{ 'Toggle help text' | translate }}"
        popover-placement="right"
        popover-trigger="'focus'"
        popover-append-to-body="true"
        ng-click="toggleHtmlCodeTooltip()"
      ></button>
    </label>
    <div class="alert alert-info text-left" ng-show="htmlCodeTooltipVisible">
      <p translate>You can use the following variables in your HTML code:</p>
      <ul>
        <li>
          <var ng-non-bindable>{{ device }}</var>
          &ndash;
          <translate>current device or group, you can access its properties e.g.</translate>
          <var ng-non-bindable>{{ device.name }}</var>
          ,
        </li>
        <li>
          <var ng-non-bindable>{{ devices }}</var>
          &ndash;
          <translate>
            children of current device or group, you can access their properties e.g.
          </translate>
          <var ng-non-bindable>{{ devices[14200].name }}</var>
          ,
        </li>
        <li>
          <var ng-non-bindable>{{ devicesCount }}</var>
          &ndash;
          <translate>number of devices</translate>
          ,
        </li>
        <li>
          <var ng-non-bindable>{{ deviceGroupsCount }}</var>
          &ndash;
          <translate>number of groups</translate>
          ,
        </li>
        <li>
          <var ng-non-bindable>{{ usersCount }}</var>
          &ndash;
          <translate>number of users</translate>
          ,
        </li>
        <li>
          <var ng-non-bindable>{{ criticalDevicesCount }}</var>
          &ndash;
          <translate>number of devices with critical alarm status</translate>
          ,
        </li>
        <li>
          <var ng-non-bindable>{{ onlineCount }}</var>
          &ndash;
          <translate>number of online devices</translate>
          .
        </li>
      </ul>
    </div>

    <div class="form-group">
      <label translate>Select code sanitization option</label>
      <div class="c8y-select-wrapper">
        <select
          class="form-control"
          ng-model="config.sanitization"
          ng-init="config.sanitization = config.sanitization || 'strict'"
        >
          <option value="strict" translate>strict`code sanitization`</option>
          <option value="lax" translate>lax`code sanitization`</option>
          <option value="none" translate>none`code sanitization`</option>
        </select>
      </div>
    </div>

    <div class="form-group">
      <textarea class="form-control" ng-model="config.html" rows="10" required></textarea>
      <span ng-if="config.sanitization !== 'none'" id="helpBlock" class="help-block" translate>
        HTML code will be sanitized.
      </span>
    </div>
  </div>
</div>
