<fieldset class="c8y-fieldset">
  <legend>{{ 'Properties' | translate }}</legend>
  <table class="table table-vertical-middle table-condensed" style="table-layout: fixed;">
    <colgroup>
      <col style="width: 5%" />
      <col style="width: 7%" />
      <col style="width: 28%" />
      <col style="width: 28%" />
      <col
        ng-if="showRenderType()"
        style="width: 28%"
      />
      <col style="width: 5%" />
    </colgroup>
    <thead>
      <th></th>
      <th>
        <span>{{ 'Show' | translate }}</span>
      </th>
      <th>
        <span>{{ 'Label' | translate }}</span>
      </th>
      <th>
        <span>{{ 'Property' | translate }}</span>
      </th>
      <th
        ng-if="showRenderType()"
      >
        <span>{{ 'Render type' | translate }}</span>
      </th>
      <th></th>
    </thead>

    <tbody
      ui-sortable="{handle: '.handle', stop: onPropertiesOrderChanged}"
      ng-model="properties"
    >
      <tr
        class="property"
        ng-repeat="property in properties"
      >
        <td
          class="handle"
        >
          <i
            c8y-icon="bars"
            style="cursor: move"
          ></i>
        </td>
        <td>
          <label
            class="c8y-checkbox"
            title="{{ 'Show' | translate }}"
          >
            <input
              type="checkbox"
              ng-change="updateOptions()"
              ng-model="property.__active"
            />
            <span></span>
          </label>
        </td>
        <td>
          <input
            class="form-control property-label input-sm"
            data-ng-model="property.label"
          />
        </td>
        <td>
          <button
            class="btn btn-xs btn-default"
            aria-label="{{ 'Configure computed property' | translate }}"
            uib-tooltip="{{ 'Configure computed property' | translate }}"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
            type="button"
            ng-show="!!property.configSchema"
            ng-click="configComputeProperty(property)"
          >
            <i c8y-icon="bolt"></i>
            {{ displayKeyPath(property.keyPath) }}
          </button>
          <span
            class="text-truncate"
            title="{{ displayKeyPath(property.keyPath) }}"
            ng-hide="!!property.configSchema"
          >
            {{ displayKeyPath(property.keyPath) }}
          </span>
        </td>
        <td
          ng-if="showRenderType()"
        >
          <div class="input-group d-flex">
            <div class="c8y-select-wrapper">
              <select
                class="form-control input-sm"
                name="renderType"
                ng-disabled="property.isAction"
                ng-model="property.renderType"
                ng-options="render.name as render.humanName | translate for render in renderTypes"
              ></select>
            </div>
            <span class="m-l-4">
              <button
                class="btn btn-xs pull-right"
                ng-class="{
                  'btn-danger': !property.renderConfig,
                  'btn-default': property.renderConfig
                }"
                title="{{ 'Config renderer' | translate }}"
                type="button"
                ng-click="configRenderer(property)"
                ng-show="rendererHasConfig(property.renderType)"
              >
                <i c8y-icon="sliders"></i>
              </button>
            </span>
          </div>
        </td>
        <td>
          <button
            class="btn btn-dot btn-dot--danger showOnHover pull-right"
            title="{{ 'Delete property' | translate }}"
            type="button"
            ng-click="removeProperty(property)"
          >
            <i c8y-icon="minus-circle"></i>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="m-t-16 m-b-16 d-flex gap-8 a-i-center">
    <a
      class="btn btn-default btn-sm"
      title="{{ 'Add property' | translate }}"
      data-ng-click="addProperty()"
    >
      <i c8y-icon="plus-circle"></i>
      {{ 'Add property' | translate }}
    </a>
    <div
      class="dropdown"
      ng-hide="hideActions"
      uib-dropdown
    >
      <button
        class="btn btn-default btn-sm dropdown-toggle c8y-dropdown"
        title="{{ 'Add action' | translate }}"
        aria-haspopup="true"
        type="button"
        data-cy="property-selector--add-action"
        uib-dropdown-toggle
      >
        {{ 'Add action' | translate }}
        <span class="caret"></span>
      </button>
      <ul
        class="dropdown-menu dropdown-menu-right m-t-8"
        uib-dropdown-menu
      >
        <li ng-repeat="action in actions">
          <button
            title="{{ action.config.label | translate }}"
            type="button"
            data-cy="property-selector--{{ action.config.label }}"
            ng-click="addAction(action)"
          >
            {{ action.config.label | translate }}
          </button>
        </li>
      </ul>
    </div>
  </div>
</fieldset>

<ng-form name="propertiesHiddenForm"></ng-form>
