<div class="modal-header separator">
  <h3 id="modal-title">{{ getConfigTitle(config) | translate }}</h3>
</div>
<div class="modal-inner-scroll" id="modal-body">
  <div class="modal-body">
    <div class="legend form-block">
      <span class="dot bg-primary-light">1</span>
      <translate>Select device</translate>
    </div>
    <div class="form">
      <c8y-device-selector-combo
        parent="rootId"
        selected-child-device="data.device"
        read-only="config.allowOnlyContextMo"
      ></c8y-device-selector-combo>
    </div>
  </div>

  <div class="bg-level-1 separator">
    <div class="modal-body">
      <div class="legend form-block">
        <span class="dot bg-primary-light">2</span>
        <translate>Select data point</translate>
      </div>
      <div ng-show="data.loadingDataPoints" class="text-center">
        <c8y-rectangle-spinner
          class="spinner-inline"
          message="'Loading data points…' | translate"
        ></c8y-rectangle-spinner>
      </div>
      <p class="text-center" ng-show="noContext && datapoints.length">
        {{ 'Here are a few data points to get you started' | translate }}
      </p>

      <div class="alert alert-warning" ng-show="datapoints.length == 0" translate>
        No data points found.
      </div>
    </div>
    <div class="list-group" ng-show="datapointsSelected.length || datapoints.length">
      <div
        class="c8y-data-point list-group-item d-flex collapsible"
        ng-repeat="dp in datapointsSelected"
        ng-class="{ expanded: isCollapsed }"
      >
        <div class="list-item-actions">
          <button
            type="button"
            title="{{ 'Expand' | translate }}"
            class="collapse-btn"
            ng-click="isCollapsed = !isCollapsed"
          >
            <i c8y-icon="chevron-down"></i>
          </button>
        </div>
        <div class="list-item-checkbox">
          <label class="c8y-checkbox input-sm">
            <input
              type="checkbox"
              ng-model="dp.__active"
              ng-disabled="shouldDisableSelection(dp)"
            />
            <span></span>
          </label>
        </div>

        <div class="list-item-icon">
          <i c8y-icon="circle" ng-style="{ color: dp.color }"></i>
        </div>

        <div class="list-item-body" ng-click="isCollapsed = !isCollapsed">
          <span class="text-truncate small">{{ dp.label }}</span>
        </div>

        <div uib-collapse="!isCollapsed" class="p-l-32">
          <div class="data-point-details small">
            <div class="data-point-target">
              <label class="text-muted" translate>Measurement:</label>
              <span>{{ dp.fragment }} &gt; {{ dp.series }}</span>
            </div>
            <div class="tight-grid">
              <div class="col-xs-6 col-sm-4" ng-show="dp.unit">
                <label class="text-muted" translate>Unit:</label>
                {{ dp.unit }}
              </div>
              <div class="col-xs-6 col-sm-4" ng-if="!isBasicList" ng-show="dp.min">
                <label class="text-muted" translate>Min:</label>
                {{ dp.min }}
              </div>
              <div class="col-xs-6 col-sm-4" ng-if="!isBasicList" ng-show="dp.max">
                <label class="text-muted" translate>Max:</label>
                {{ dp.max }}
              </div>
            </div>
          </div>
        </div>
        <!-- /collapse -->
      </div>

      <div
        class="c8y-data-point list-group-item d-flex collapsible"
        ng-repeat="dp in datapoints"
        ng-class="{ expanded: isCollapsed }"
      >
        <div class="list-item-actions">
          <button
            type="button"
            title="{{ 'Expand' | translate }}"
            class="collapse-btn"
            ng-click="isCollapsed = !isCollapsed"
          >
            <i c8y-icon="chevron-down"></i>
          </button>
        </div>
        <div class="list-item-checkbox">
          <label class="c8y-checkbox input-sm">
            <input
              type="checkbox"
              ng-model="dp.__active"
              ng-disabled="shouldDisableSelection(dp)"
            />
            <span></span>
          </label>
        </div>

        <div class="list-item-icon">
          <i c8y-icon="circle" ng-style="{ color: dp.color }"></i>
        </div>

        <div
          class="list-item-body text-truncate"
          title="{{ dp.label }}"
          ng-click="isCollapsed = !isCollapsed"
        >
          <span class="small">{{ dp.label }}</span>
        </div>

        <div uib-collapse="!isCollapsed" class="p-l-32">
          <div class="data-point-details small m-t-8">
            <div class="data-point-target">
              <label class="text-muted" translate>Measurement:</label>
              <span>{{ dp.fragment }} &gt; {{ dp.series }}</span>
            </div>
            <div class="tight-grid">
              <div class="col-xs-6 col-sm-4" ng-show="dp.unit">
                <label class="text-muted" translate>Unit:</label>
                {{ dp.unit }}
              </div>
              <div class="col-xs-6 col-sm-4" ng-if="!isBasicList" ng-show="dp.min">
                <label class="text-muted" translate>Min:</label>
                {{ dp.min }}
              </div>
              <div class="col-xs-6 col-sm-4" ng-if="!isBasicList" ng-show="dp.max">
                <label class="text-muted" translate>Max:</label>
                {{ dp.max }}
              </div>
            </div>
          </div>
        </div>
        <!-- /collapse -->
      </div>
    </div>
  </div>
</div>

<div class="modal-footer">
  <button
    title="{{ 'Cancel' | translate }}"
    type="button"
    class="btn btn-default"
    ng-click="cancel()"
  >
    {{ 'Cancel' | translate }}
  </button>
  <button
    title="{{ getConfigBtnLabel(config) | translate }}"
    type="button"
    class="btn btn-primary"
    ng-click="add()"
    ng-disabled="!getSelected().length"
  >
    {{ getConfigBtnLabel(config) | translate }}
  </button>
</div>
