<div class="modal-header separator">
  <h3 id="modal-title">{{ 'Select property' | translate }}</h3>
</div>
<div>
  <div class="modal-list-header">
    <div class="form-group m-16">
      <div class="input-group input-group-search">
        <input
          class="form-control"
          type="search"
          ng-model="search"
          data-cy="schema-property-selector--search"
          placeholder="{{ 'Filter properties' | translate }}"
        />
        <span class="input-group-addon">
          <i c8y-icon="search" ng-show="search.length === 0 || !search"></i>
          <i
            c8y-icon="times"
            class="text-muted"
            ng-click="search = ''"
            ng-show="search.length > 0"
          ></i>
        </span>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-2">
          <label>{{ 'Show' | translate }}</label>
        </div>
        <div class="col-xs-5">
          <label>{{ 'Label' | translate }}</label>
        </div>
        <div class="col-xs-5">
          <label>{{ 'Property' | translate }}</label>
        </div>
      </div>
    </div>
  </div>

  <div
    class="modal-inner-scroll container-fluid"
    style="max-height: calc(100vh - 340px)"
    id="modal-body"
  >
    <div class="row">
      <div
        class="d-flex a-i-center property"
        ng-repeat="property in properties | orderBy:'orderKey' | filter:filterByLabelOrProperty"
      >
        <div class="col-xs-2">
          <span ng-switch="selectSingle">
            <label class="c8y-radio" ng-switch-when="true">
              <input
                type="radio"
                aria-label="{{ property.label }}"
                id="radio-{{ property.keyPath.join('.') }}"
                name="property"
                ng-model="properties.selected"
                ng-value="property"
              />
              <span></span>
            </label>
            <label class="c8y-checkbox" ng-switch-default>
              <input
                type="checkbox"
                aria-label="{{ property.label }}"
                id="checkbox-{{ property.keyPath.join('.') }}"
                ng-change="onSelectProperty(property)"
                data-cy="schemaPropertySelector--checkProperty"
                ng-model="property.__active"
              />
              <span></span>
            </label>
          </span>
        </div>
        <div
          class="col-xs-5 text-truncate"
          ng-class="{ strong: isComplexProperty(property) }"
          title="{{ property.label | translate }}"
        >
          <span>
            <button
              class="btn btn-dot"
              type="button"
              uib-tooltip="{{
                'Complex property. Subproperties are listed below.`tooltip`' | translate
              }}"
              tooltip-append-to-body="true"
              tooltip-placement="right"
              tooltip-popup-delay="500"
              aria-label="{{
                'Complex property. Subproperties are listed below.`tooltip`' | translate
              }}"
              ng-if="isComplexProperty(property) && isAtLeastOneSubpropertyListed(property)"
            >
              <i c8y-icon="tags" class="text-info"></i>
            </button>
            <button
              class="btn btn-dot"
              type="button"
              uib-tooltip="{{ 'Complex property.`tooltip`' | translate }}"
              tooltip-append-to-body="true"
              tooltip-placement="right"
              aria-label="{{ 'Complex property.`tooltip`' | translate }}"
              ng-if="isComplexProperty(property) && !isAtLeastOneSubpropertyListed(property)"
            >
              <i c8y-icon="tag" class="text-info"></i>
            </button>
            <button
              class="btn btn-dot"
              type="button"
              uib-tooltip="{{ 'Computed property.`tooltip`' | translate }}"
              tooltip-append-to-body="true"
              tooltip-placement="right"
              tooltip-popup-delay="500"
              aria-label="{{ 'Computed property.`tooltip`' | translate }}"
              ng-show="property.computed"
            >
              <i c8y-icon="bolt" class="text-primary-light"></i>
            </button>
          </span>
          {{ property.label | translate }}
        </div>
        <div class="col-xs-5 text-truncate" title="{{ property.keyPath.join('.') }}">
          {{ property.keyPath.join('.') }}
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal-footer">
  <button
    class="btn btn-default"
    type="button"
    title="{{ 'Cancel' | translate }}"
    ng-click="dismiss()"
  >
    {{ 'Cancel' | translate }}
  </button>
  <button
    class="btn btn-primary"
    type="button"
    title="{{ 'Select' | translate }}"
    ng-click="close()"
    ng-disabled="selectIsDisabled()"
  >
    {{ 'Select' | translate }}
  </button>
</div>
