<div class="rielta-wired-devices">
  <div class="swap-devices-buttons">
    <div class="button-up" ng-show="$ctrl.showUpDownButtons" ng-click="$ctrl.onClickUpButton()"></div>
    <div class="button-down" ng-show="$ctrl.showUpDownButtons" ng-click="$ctrl.onClickDownButton()"></div>
  </div>

  <div class="row row-no-gutters">
    <div class="col-md-11">
      <label translate>ID:</label> {[ $ctrl.serialNumber ]}
      <label translate>Модель:</label> {[ $ctrl.modelName ]}
    </div>
  </div>

  <div class="row">
    <div class="col-md-11">

      <div ng-if="!$ctrl.additionalParams">
        <!-- раз нет доп.параметров, все каналы выведем компактно в одной строке -->
        <div class="row">
          <div ng-repeat="chan in $ctrl.channels">
            <div class="col-md-3 bottom-10">
              <enable-zone-button index="chan.zone" disabled="false">
                <on-button><strong>{[ chan.zone + 1 ]}</strong> {[  chan.name ]}</on-button>
                <off-button><strong>{[ chan.zone + 1 ]}</strong> {[  chan.name ]}</off-button>
              </enable-zone-button>
            </div>
          </div>
        </div>
      </div>

      <div ng-if="!!$ctrl.additionalParams">
        <!-- раз имеются доп.параметры, каждый канал выводим в новой строке -->
        <div class="row" ng-repeat="chan in $ctrl.channels">

          <div class="col-md-3 bottom-10">
            <enable-zone-button index="chan.zone" disabled="false">
              <on-button><strong>{[ chan.zone + 1 ]}</strong> {[  chan.name ]}</on-button>
              <off-button><strong>{[ chan.zone + 1 ]}</strong> {[  chan.name ]}</off-button>
            </enable-zone-button>
          </div>

          <div ng-if="$ctrl.additionalParams.canConfigureDelays">
            <div class="col-md-2" style="padding: 0; text-align: right; white-space: nowrap;" translate>
              Задержка на вход
            </div>
            <div class="col-md-2">
              <select class="form-control"
                ng-model="$ctrl.additionalParams.commonZonesParams[chan.zone].entry_delay"
                ng-options="delay.value as delay.text for delay in $ctrl.additionalParams.availableDelays"
                ng-disabled="!$ctrl.additionalParams.commonZonesParams[chan.zone].enabled">
              </select>
            </div>
            <div class="col-md-2" style="padding: 0; text-align: right; white-space: nowrap;" translate>
              Задержка на выход
            </div>
            <div class="col-md-2">
              <select class="form-control"
                ng-model="$ctrl.additionalParams.commonZonesParams[chan.zone].exit_delay"
                ng-options="delay.value as delay.text for delay in $ctrl.additionalParams.availableDelays"
                ng-disabled="!$ctrl.additionalParams.commonZonesParams[chan.zone].enabled">
              </select>
            </div>
          </div>

          <div ng-if="$ctrl.additionalParams.canConfigureZoneType">
            <div class="col-md-1" style="padding: 0; text-align: right; white-space: nowrap;" translate>
              Тип
            </div>
            <div class="col-md-4">
              <select class="form-control"
                  ng-model="$ctrl.additionalParams.commonZonesParams[chan.zone].type"
                  ng-options="delay.value as delay.text for delay in $ctrl.additionalParams.availableZoneTypes"
                  ng-disabled="!$ctrl.additionalParams.commonZonesParams[chan.zone].enabled">
              </select>
            </div>
          </div>

          <div ng-if="$ctrl.additionalParams.canConfigureGlassSensitivity">
            <div class="col-md-2" style="padding: 0; text-align: right; white-space: nowrap;" translate>
              Чувствительность
            </div>
            <div class="col-md-3">
              <select class="form-control"
                  ng-model-options="{ getterSetter: true }"
                  ng-model="$ctrl.additionalParams.glassSensitivityGetterSetter"
                  ng-disabled="!$ctrl.additionalParams.ableToApplyNewGlassSensitivity()"
                  ng-options="s.value as s.text for s in $ctrl.additionalParams.availableSensitivityValues"
              >
              </select>
            </div>
          </div>

        </div>
      </div>
    </div>

    <div class="col-md-1" style="position: relative; display: inline-block; float: none">
      <a href="" ng-show="$ctrl.showDeleteButton" ng-click="$ctrl.onClickDeleteButton()">
        <img ng-src="{[ '/images/glyph-delete.svg' | augeasStatic ]}"
             style="top: 50%; position: absolute; transform: translateY(-50%)"/>
      </a>
    </div>
  </div>
</div>
