<table class="table">
  <tr>
    <th style=" width: 1%;" translate translate-comment="(заголовок столбца 'номер шлейфа')">Номер</th>
    <th></th>
    <th translate>Тип</th>
    <th translate translate-comment="(заголовок столбца 'норма шлейфа')">Норма</th>
  </tr>
  <tbody ng-repeat="(ind, _) in zones.wired()" >
  <tr ng-class="zones.is_enabled(ind)? '':'active'" ng-form="ZoneForm">
      <td ng-show="canCustomZones()" style="vertical-align: middle"
          ng-class="ZoneForm.customNumber.$invalid?'has-error':''">
          <input type="text" class="form-control" name="customNumber"
                 style="width: 52px"
                 ng-model="customZoneNumbers[ind]" required
                 ng-pattern="/^[1-9]\d{0,2}$/"
                 ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"
                 ng-maxlength="3"
                 ng-disabled="!zones.is_enabled(ind)"
                 validate-using-function="{ func: checkDuplicates(ind), key: 'duplicates'}"
                 ng-change="formGuard(ZoneForm); handleCustomZone()">

      </td>
      <td ng-show="!canCustomZones()" style="vertical-align: middle">{[ $index + 1 ]}</td>
      <td style="width:104px">
          <button type="button" class="btn btn-sm btn-block"
                  ng-disabled="!zones.is_available(ind)"
                  ng-class="zones.is_enabled(ind)? 'btn-success':'btn-danger'"
                  ng-click="zones.is_enabled(ind)?disableZone(ind):enableZone(ind)">
              <span ng-show="zones.is_enabled(ind)" translate>Выключить</span>
              <span ng-show="!zones.is_enabled(ind)" translate translate-context="(антоним к 'Выключить')">Включить</span>
          </button>
      </td>
      <td>
          <select class="form-control"
                  ng-model="zones.get(ind).common.type"
                  ng-options="zt['value'] as zt['text'] for zt in zoneTypes"
                  ng-disabled="!zones.is_enabled(ind)"></select>
      </td>
      <td>
          <select class="form-control"
                  ng-model="zones.get(ind).wired.normal_state"
                  ng-options="id as name for (id, name) in normalStates"
                  ng-disabled="!zones.is_enabled(ind)"></select>
      </td>
  </tr>
  <tr ng-show="ZoneForm.customNumber.$error.pattern || ZoneForm.customNumber.$error.required" class="text-danger" ng-class="zones.is_enabled(ind)? '':'active'" style="border-top: none;">
      <td colspan="4" style="border-top: none;" translate>Номер зоны должен быть числом от 1 до 999</td>
  </tr>
  <tr ng-show="ZoneForm.customNumber.$error.duplicates" class="text-danger"  ng-class="zones.is_enabled(ind)? '':'active'" style="border-top: none;">
      <td colspan="4" style="border-top: none;" translate>Введенный номер уже используется для другой зоны</td>
  </tr>
  <tr ng-show="ZoneForm.$valid && ind == 2 && canReuseInterfacesAsZones" ng-class="zones.is_enabled(ind)? '':'active'" style="border-top: none;">
      <td colspan="4" style="border-top: none;" translate>Клеммы «RS-TTL»</td>
  </tr>
  <tr ng-show="ZoneForm.$valid && ind == 3 && canReuseInterfacesAsZones" ng-class="zones.is_enabled(ind)? '':'active'" style="border-top: none;">
      <td colspan="4" style="border-top: none;" translate>Клеммы «TEL IN»</td>
  </tr>
  </tbody>
</table>
