<table class="table">
  <tr>
    <th translate>Номер шлейфа</th>
    <th></th> <!-- Включение-выключение шлейфа -->
    <th translate>Устройство</th>
    <th translate>Тип / Режим</th>
    <th translate>Задержка на вход</th>
    <th translate>Задержка на выход</th>
    <!-- <th ng-show="$ctrl.isDesktopMode && !$ctrl.readOnly" translate>Через ретранслятор</th> -->
    <th></th> <!-- Удаление -->
  </tr>
  <tbody ng-repeat="devId in $ctrl.deviceIds" ng-init="dev = $ctrl.getDevice(devId)"" class="bordered no-row-border">

    <!-- Отделим блок с вновь добавленными устройствами (они следуют в порядке добавления, а не в порядке номеров зон) -->
    <tr ng-if="dev.newlyBound && $index > 0 && !$ctrl.getDevice($ctrl.deviceIds[$index-1]).newlyBound">
      <td colspan="100%">
        <div style="font-weight: bold; margin-top: 30px;" translate>Добавленные беспроводные устройства</div>
      </td>
    </tr>

    <tr ng-repeat-start="chan in dev.channels">

      <!-- "Номер шлейфа" -->
      <td class="vertical-aligned">{[ chan.zoneIdx !== null ? chan.zoneIdx + 1 : '' ]}</td>

      <!-- Включение-выключение шлейфа -->
      <td style="width:104px" class="vertical-aligned">
        <button
            ng-hide="dev.isRemote || dev.isRepeater"
            ng-disabled="$ctrl.preventChanges"
            type="button" class="btn btn-sm btn-block"
            ng-class="(chan.zone && chan.zone.enabled) ? 'btn-success' : 'btn-danger'"
            ng-click="(chan.zone && chan.zone.enabled) ? $ctrl.disableZone(dev, chan) : $ctrl.enableZone(dev, chan)">
          <span ng-show="chan.zone && chan.zone.enabled" translate>Выключить</span>
          <span ng-show="!(chan.zone && chan.zone.enabled)" translate translate-context="(антоним к 'Выключить')">Включить</span>
        </button>
      </td>

      <!-- "Устройство" -->
      <td class="vertical-aligned">
        {[ ::$ctrl.getChannelName(dev, chan) ]}
      </td>

      <!-- "Тип / Режим" -->
      <!-- фиксируем ширину колонки под самый длинный элемент для устранения сокращений в выпадайках, именно для Хаббла -->
      <td ng-hide="dev.isRemote" style="width: 240px" class="vertical-aligned">
        <select class="form-control"
            ng-model="chan.zone.type"
            ng-options="item.value as item.text for item in zone_types = $ctrl.getZoneTypes(dev)"
            ng-hide="dev.isKeyboard"
            ng-disabled="$ctrl.preventChanges || !chan.zone || !chan.zone.enabled || zone_types.length <= 1 || dev.isRepeater"></select>
      </td>
      <!-- Режим работы брелока CWL -->
      <td ng-show="dev.isRemote" class="vertical-aligned">
        <input type="checkbox" class="vertical-aligned"
            ng-model="dev.remoteSettings.alarm_enabled"
            ng-true-value="1" ng-false-value="0"
            ng-disabled="$ctrl.preventChanges || !chan.zone || !chan.zone.enabled">
        <translate>КТС включена</translate>
      </td>

      <!-- "Задержка на вход" -->
      <td class="vertical-aligned">
        <select class="form-control"
          ng-model="chan.zone.entry_delay"
          ng-options="delay.value as delay.text for delay in $ctrl.delays"
          ng-disabled="$ctrl.preventChanges || !chan.zone || !chan.zone.enabled"
          ng-show="$ctrl.canHaveDelays(dev, chan)"></select>
      </td>

      <!-- "Задержка на выход" -->
      <td class="vertical-aligned">
        <select class="form-control"
          ng-model="chan.zone.exit_delay"
          ng-options="delay.value as delay.text for delay in $ctrl.delays"
          ng-disabled="$ctrl.preventChanges || !chan.zone || !chan.zone.enabled"
          ng-show="$ctrl.canHaveDelays(dev, chan)"></select>
      </td>

      <!-- Ретранслятор -->
      <!-- <td ng-show="$ctrl.isDesktopMode && !$ctrl.readOnly" class="vertical-aligned"></td> -->

      <!-- Удаление -->
      <td class="vertical-aligned">
        <button
            class="pull-right btn btn-default"
            ng-disabled="$ctrl.preventChanges || $ctrl.readOnly"
            ng-click="$ctrl.deleteDevice(dev)"
            ng-show="$ctrl.isDesktopMode && $first">  <!-- $first относится к циклу по каналам -->
          <span class="glyphicon glyphicon-trash"></span>
        </button>
      </td>

    </tr>

    <tr ng-if="$ctrl.hasSensorParams(dev, chan) && chan.zone && chan.zone.enabled">
      <td colspan="2"></td>
      <td colspan="3">
        <div style="display:inline-block; padding: 8px 0px 16px 0px" translate translate-context="(чувствительность сенсора CWL)">
            Чувствительность
        </div>
        <div style="display:inline-block; padding: 0px 0px 0px 16px">
          <select class="form-control"
            ng-model="dev.sensorParams.sensitivity"
            convert-to-number
            defaultable>
            <option d-op value="1" translate translate-context="(значение параметра 'чувствительность')">Низкая</option>
            <option d-op default value="2" translate translate-context="(значение параметра 'чувствительность')">Средняя</option>
            <option d-op value="3" translate translate-context="(значение параметра 'чувствительность')">Высокая</option>
          </select>
        </div>
      </td>
    </tr >

    <tr ng-repeat-end></tr>

  </tbody>
</table>

<button style="margin-bottom: 40px"
    class="btn btn-success"
    ng-disabled="$ctrl.preventChanges || $ctrl.readOnly"
    ng-click="$ctrl.addDevice()"
    ng-show="$ctrl.isDesktopMode" translate>
  Добавить беспроводное устройство
</button>
