<fieldset class="c8y-fieldset">
  <legend translate>States mapping</legend>
  <div class="alert alert-warning" ng-show="!vm.deviceId || vm.hasInvalidMapping" translate>
    Select a device and complete the mapping for all light states.
  </div>

  <div class="table-responsive">
    <table class="table table-condensed bg-inherit" style="table-layout: fixed">
      <colgroup>
        <col style="width: 25%" />
        <col style="width: 50%" />
        <col style="width: 25%" />
      <thead>
        <tr>
          <th translate>State</th>
          <th>
            <span translate>Property</span>
            <button
              class="btn-help btn-help--sm"
              type="button"
              aria-label="{{ 'Help' | translate }}"
              uib-popover="{{
                'The value of the selected data point or property must be one of the following to have the respective light on: true, 1, any non-empty string or any non-null number.'
                  | translate
              }}"
              popover-trigger="'focus'"
              popover-placement="right"
              popover-append-to-body="true"
            ></button>
          </th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr
          ng-repeat="(state, stateText) in vm.states"
          ng-class="{ danger: vm.isMappingInvalidForState(state) }"
        >
          <td>{{ stateText | translate }}</td>
          <td ng-switch="vm.mapping[state].computed">
            <button
              class="btn btn-xs btn-default"
              type="button"
              ng-switch-when="true"
              ng-click="vm.editComputedProperty(vm.mapping[state])"
            >
              <i c8y-icon="bolt"></i>
              {{ vm.humanizeProperty(vm.mapping[state]) }}
            </button>
            <span ng-switch-default>{{ vm.humanizeProperty(vm.mapping[state]) }}</span>
          </td>
          <td class="">
            <div class="d-flex j-c-end">
              <button
                class="btn btn-dot"
                type="button"
                aria-label="{{ 'Select device property' | translate }}"
                uib-tooltip="{{ 'Select device property' | translate }}"
                tooltip-append-to-body="true"
                tooltip-popup-delay="500"
                ng-click="vm.selectDevicePropertyForState(state)"
              >
                <i c8y-icon="edit"></i>
              </button>
              <button
                class="btn btn-dot"
                type="button"
                uib-tooltip="{{ 'Assign fieldbus property' | translate }}"
                tooltip-append-to-body="true"
                tooltip-popup-delay="500"
                aria-label="{{ 'Select fieldbus property' | translate }}"
                ng-click="vm.selectFieldbusPropertyForState(state)"
              >
                <i c8y-icon="tasks"></i>
              </button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</fieldset>
