<rielta-info only-desktop
             letter="networkOptions().letter"
             number="networkOptions().number"
             mode="networkOptions().mode"
             has-rielta="!rielta.empty()"
             set-network-options="setNetworkOptions()"></rielta-info>
<div class="bottom-10">
  <div only-desktop ng-show="!rieltaSupported" class="text-danger" translate>
    Версия прошивки беспроводного расширителя СН-Радио, подключенного к прибору, устарела.
    Для того, чтобы обеспечить корректную работу СН-Радио, в том числе – с новыми
    беспроводными устройствами, рекомендуется обновить его прошивку до актуальной версии.
  </div>
</div>

<table class="table">
  <tr>
    <th translate>Номер шлейфа</th>
    <th></th>
    <th translate>Устройство</th>
    <th translate>Тип / Режим</th>
    <th translate>Задержка на вход</th>
    <th translate>Задержка на выход</th>
    <th ng-show="desktopMode && !readOnly()" translate>Через ретранслятор</th>
    <th></th>
  </tr>
  <tbody ng-repeat="gr in grouped" class="bordered no-row-border">
    <tr ng-repeat-start="ind in gr">
      <td class="vertical-aligned">{[ getZonesNumbers(ind).join(', ') ]}</td>

      <!-- Включение-выключение шлейфа -->
      <td style="width:104px" class="vertical-aligned">
        <button
            ng-hide="isRemoteDevice(get(ind).device_type) || isRepeater(get(ind).device_type)"
            type="button" class="btn btn-sm btn-block"
            ng-class="get(ind).zone.enabled? 'btn-success':'btn-danger'"
            ng-click="get(ind).zone.enabled? disableDeviceZones(ind) : enableDeviceZones(ind)"
            ng-disabled="get(ind).zone.enabled && usedAsOpenCollector(ind)">
          <span ng-show="get(ind).zone.enabled" translate>Выключить</span>
          <span ng-show="!get(ind).zone.enabled" translate translate-context="(антоним к 'Выключить')">Включить</span>
        </button>
      </td>
      <!-- Название датчика -->
      <td class="vertical-aligned">
        {[getDeviceTypeName(get(ind))]}
      </td>
      <!-- Устройство используется в автоматике -->
      <td colspan="3" ng-show="canOpenCollectors(ind)" class="vertical-aligned">
        <translate ng-show="usedAsOpenCollector(ind)">Устройство используется в автоматике</translate>
      </td>
      <!-- Тип шлейфа -->
      <!-- фиксируем ширину колонки под самый длинный элемент для устранения сокращений в выпадайках, именно для Хаббла -->
      <td ng-hide="canOpenCollectors(ind) || isRemoteDevice(getDeviceType(ind)) || isExit(getDeviceType(ind))"
          style="width: 240px" class="vertical-aligned">
        <select class="form-control"
            ng-model="get(ind).zone.type"
            ng-options="item.value as item.text for item in zone_types = getZoneTypes(get(ind))"
            ng-hide="isTrump(getDeviceType(ind)) || isKeyboard(getDeviceType(ind)) || isSwitch(getDeviceType(ind))"
            ng-disabled="!get(ind).zone.enabled || zone_types.length <= 1 || isRepeater(get(ind).device_type)"></select>
      </td>
      <!-- Режим работы СН-Выход -->
      <td ng-show="isExit(getDeviceType(ind))" class="vertical-aligned">
        <input type="checkbox" class="vertical-aligned"
            ng-model="misc().rielta_fireboard_idle_mode"
            ng-true-value="1" ng-false-value="0">
        <translate translate-context="(энергосберегающий режим СН-Выход)">Эконом</translate>
        <a href="" ng-click="showExitModesHelp(hasFire)">
          <span class="glyphicon"
              ng-class="hasFire ? ['glyphicon-question-sign', 'text-info'] : ['glyphicon-exclamation-sign', 'text-danger']"
              style="font-size:16px;top:3px"></span>
        </a>
      </td>
      <!-- Режим работы брелока -->
      <td ng-show="isRemoteDevice(getDeviceType(ind))" class="vertical-aligned">
        <input type="checkbox"  class="vertical-aligned"
            ng-model="remotes.all()[ind].alarm_enabled"
            ng-true-value="1" ng-false-value="0"
            ng-disabled="readOnly()">
        <translate>КТС включена</translate>
      </td>
      <!-- Задержка на вход -->
      <td ng-hide="canOpenCollectors(ind)" class="vertical-aligned">
        <select class="form-control"
          ng-model="get(ind).zone.entry_delay"
          ng-options="delay.value as delay.text for delay in delays"
          ng-disabled="!get(ind).zone.enabled"
          ng-show="canHaveDelays(ind)"></select>
      </td>
      <!-- Задержка на выход -->
      <td ng-hide="canOpenCollectors(ind)" class="vertical-aligned">
        <select class="form-control"
          ng-model="get(ind).zone.exit_delay"
          ng-options="delay.value as delay.text for delay in delays"
          ng-disabled="!get(ind).zone.enabled"
          ng-show="canHaveDelays(ind)"></select>
      </td>
      <!-- Ретранслятор -->
      <td ng-show="desktopMode && !readOnly()" class="vertical-aligned">
        <select class="form-control"
                ng-model="repeatersMap[ind]"
                ng-options="get(repeater_index).device.channel as get(repeater_index).zone_index + 1 for repeater_index in availableRepeaters(ind)"
                ng-disabled="!get(ind).zone.enabled || readOnly() || availableRepeaters(ind).length === 0"
                ng-show="canBeBoundToRepeater(ind)"
                ng-change="setRepeater(ind)">
          <option value='' translate
                           translate-context="(в значении 'отсутствует')"
                           translate-comment="(номер ретранслятора: 'ретранслятор отсутствует')">
            нет
          </option>
        </select>
      </td>
      <!-- Удаление датчика -->
      <td class="vertical-aligned">
        <button
            class="pull-right btn btn-default"
            ng-disabled="readOnly()"
            ng-click="deleteDevice(ind)"
            ng-show="desktopMode && isFirstChannel(ind)">
          <span class="glyphicon glyphicon-trash"></span>
        </button>
      </td>
    </tr>

    <tr ng-if="isTemperature(get(ind).device_type) && get(ind).zone.enabled">
      <td colspan="2" style="border-top: none"></td>
      <td rowspan="2" colspan="2" style="border-top: none; vertical-align: middle; white-space: nowrap;">
        <div style="padding: 8px 0px 16px 0px" translate>
          Порог низкой температуры, ℃
       </div>
        <div style="padding: 16px 0px 8px 0px" translate>
          Порог высокой температуры, ℃
       </div>
      </td>
      <td rowspan="2" style="border-top: none;">
        <div style="padding: 8px 8px 8px 0px" ng-class="lowThresholdForm.$invalid ? 'has-error':''">
          <ng-form role="form" name="lowThresholdForm" guarded>
            <input
              style="width:67px;" type="text" class="form-control" name="lowThreshold"
              ng-model="getRieltaTempSensor(ind).low_threshold" required ng-pattern="/^-?\d+$/"
              ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"
              ng-trim="false"
              validate-using-function="{ func: partialValidateLowThreshold(getRieltaTempSensor(ind)), key: 'valid-low-threshold'}"
              ng-change="revalidateDependent(highThresholdForm.highThreshold)">
          </ng-form>
        </div>
        <div style="padding: 8px 8px 8px 0px" ng-class="highThresholdForm.$invalid ? 'has-error':''">
          <ng-form role="form" name="highThresholdForm" guarded>
            <input
              style="width:67px;" type="text" class="form-control" name="highThreshold"
              ng-model="getRieltaTempSensor(ind).high_threshold" required ng-pattern="/^-?\d+$/"
              ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"
              ng-trim="false"
              validate-using-function="{ func: partialValidateHighThreshold(getRieltaTempSensor(ind)), key: 'valid-high-threshold'}"
              ng-change="revalidateDependent(lowThresholdForm.lowThreshold)">
          </ng-form>
        </div>
      </td>
      <td style="border-top: none; vertical-align: middle; padding: 0px 0px 24px 0px">
        <a href="" ng-click="showTemperatureSensorHelp(getRieltaTempSensor(ind))">
          <span class="glyphicon glyphicon-question-sign vertical-aligned" style="font-size:1.5em"></span>
        </a>
      </td>
      <td colspan="2" style="border-top: none"></td>
    </tr >

    <tr ng-if="isGlassV6FirstChannel(get(ind)) && get(ind).zone.enabled">
      <td colspan="2"></td>
      <td colspan="3">
        <div style="display:inline-block; padding: 8px 0px 16px 0px" translate
          translate-context="(чувствительность извещателя)">
            Чувствительность
        </div>
        <div style="display:inline-block; padding: 0px 0px 0px 16px">
          <!-- TODO: нужно разобраться с медленной выпадайкой,
                а пока сгладим дребезг с помощью настройки { updateOn: 'blur' } -->
          <select class="form-control"
            ng-model="getSensorParameters(ind).sensitivity"
            ng-model-options="{ updateOn: 'blur' }"
            convert-to-number
            defaultable>
            <option d-op value="0" translate translate-context="(значение параметра 'чувствительность')">Минимальная</option>
            <option d-op value="1" translate translate-context="(значение параметра 'чувствительность')">Средняя</option>
            <option d-op value="2" translate translate-context="(значение параметра 'чувствительность')">Высокая</option>
            <option d-op default value="3" translate translate-context="(значение параметра 'чувствительность')">Максимальная</option>
          </select>
        </div>
      </td>
    </tr >

    <tr ng-repeat-end ng-if="isTemperature(get(ind).device_type) && get(ind).zone.enabled">
      <td colspan="7" style="border-top: none"></td>
    </tr>
  </tbody>
</table>

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