<fieldset class="c8y-fieldset svg-mappings">
  <legend>{{ 'Mappings' | translate }}</legend>
  <ul class="c8y-list__group c8y-list__group--strip">
    <li class="c8y-list__item" ng-repeat="mapping in mappings | orderBy:'placeholder'">
      <div class="c8y-list__item__block d-block">
        <div class="c8y-list__item__body">
          <div class="row">
            <div class="col-md-4">
              <label class="text-label-small d-block" translate>Placeholder</label>
              <div class="text-medium">
                <i
                  c8y-icon="exclamation-circle"
                  class="m-r-4 text-danger"
                  ng-show="hasError[mapping.placeholder]"
                ></i>
                <span title="{{ mapping.placeholder }}">
                  {{ mapping.placeholder }}
                </span>
              </div>
            </div>
            <div class="col-md-8">
              <label class="text-label-small d-block" translate>Target</label>
              <div class="form-group-sm form-group">
                <span ng-show="!devices.length">---</span>
                <span
                  class="text-truncate"
                  title="{{ devices[0].name }}"
                  ng-show="devices.length == 1"
                >
                  {{ devices[0].name }}
                </span>
                <div class="c8y-select-wrapper" ng-show="devices.length > 1">
                  <select
                    class="form-control"
                    ng-change="onDeviceIdsChange()"
                    ng-model="deviceIds[mapping.placeholder]"
                    ng-options="device.id as device.name for device in devices"
                    required
                  ></select>
                </div>
              </div>
            </div>
            <div class="col-md-4" ng-switch="!!mapping.config.configSchema">
              <label class="text-label-small d-block" translate>Mapped to</label>
              <button
                class="btn btn-sm btn-default text-truncate"
                type="button"
                title=" {{ humanizeValue(mapping) }}"
                ng-click="editComputedProperty(mapping)"
                ng-switch-when="true"
              >
                <i c8y-icon="bolt"></i>
                <span>
                  {{ humanizeValue(mapping) }}
                </span>
              </button>
              <div class="form-control-static">
                <span class="text-truncate" title="{{ humanizeValue(mapping) }}" ng-switch-default>
                  {{ humanizeValue(mapping) }}
                </span>
              </div>
            </div>
            <div class="col-md-8">
              <label class="text-label-small d-block" translate>Current value</label>
              <div class="form-control-static" title="{{ propertyValueFor(mapping) }}">
                <span class="text-truncate text-monospace">
                  {{ propertyValueFor(mapping) }}
                </span>
              </div>
            </div>
            <div class="col-xs-12">
              <label class="text-label-small d-block" translate>Actions</label>
              <div class="btn-group">
                <button
                  class="btn btn-default btn-sm"
                  type="button"
                  uib-tooltip="{{ 'Clear mapping' | translate }}"
                  tooltip-append-to-body="true"
                  tooltip-popup-delay="500"
                  aria-label="{{ 'Clear mapping' | translate }}"
                  ng-click="clearMapping(mapping)"
                  ng-disabled="!mapping.config"
                >
                  <i c8y-icon="delete-document"></i>
                </button>
                <button
                  class="btn btn-default btn-sm"
                  type="button"
                  uib-tooltip="{{ 'Assign fieldbus property' | translate }}"
                  tooltip-append-to-body="true"
                  tooltip-popup-delay="500"
                  aria-label="{{ 'Assign fieldbus property' | translate }}"
                  ng-click="setFieldbusMapping(mapping)"
                >
                  <i c8y-icon="tasks"></i>
                </button>
                <button
                  class="btn btn-default btn-sm"
                  type="button"
                  uib-tooltip="{{ 'Assign device property' | translate }}"
                  tooltip-append-to-body="true"
                  tooltip-popup-delay="500"
                  aria-label="{{ 'Assign device property' | translate }}"
                  ng-click="setMapping(mapping)"
                >
                  <i c8y-icon="edit"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</fieldset>
