<!-- шаблон для директивы cwlDevice -->
<div class="square"
     ng-click="zoneDetails.toggle(info.channels[0].zone_idx)">

  <!-- лицевая сторона "плашки" -->
  <div ng-if="!zoneDetails.isChecked(info.channels[0].zone_idx)">
    <div class="ring" ng-class="ringClass">
      <div class="cwl-zone" ng-class="{warning: alarm}">
        <div class="zone-number">
          <div ng-class="{'dual': zonesNumbers.length === 2,
                           'multi': zonesNumbers.length > 2}">
            {[ ::zonesNumbers.join(', ') ]}
          </div>
        </div>
        <div class="zone-type">{[ ::deviceName ]}</div>
      </div>
      <div class="flash" ng-show="alarm"></div>
    </div>
    <div ng-if="noInfo">
      <ul class="under-text-cwl">
        <li class="undefined" translate>Ожидание</li>
      </ul>
    </div>
    <div ng-if="isActuallyOffline">
      <ul class="under-text-cwl">
        <li translate>Нет связи</li>
      </ul>
    </div>
    <div ng-if="!isActuallyOffline && !noInfo">
      <ul class="under-text-cwl">
        <li ng-if="info.faults.tamper && !isRemote" translate>Тампер</li>
        <li ng-if="info.faults.power && !(isRemote && info.faults.offline)" translate>Батарея</li>
        <!-- выведем тревожные зоны (для одноканального не выводим, так как бомбочка и так однозначно отображает тревогу) -->
        <li ng-if="enabledChannels.length > 1 && alarmZones.length > 0">
          <span ng-if="alarmZones.length == 1"
                translate translate-params-n="alarmZones[0]">Тревога шлейф {[n]}</span>
          <span ng-if="alarmZones.length > 1"
                translate translate-params-list="alarmZones.join(', ')">Тревога шлейфы {[list]}</span>
        </li>
        <!-- выведем выключенные зоны (Спящий режим)-->
        <li ng-if="isSleeping && canSleep" class="undefined" translate>Спящий режим</li>
        <!-- выведем неисправные зоны -->
        <li ng-if="faultZones.length > 0">
          <span ng-if="enabledChannels.length == 1" translate>Шлейф</span>
          <span ng-if="enabledChannels.length > 1 && faultZones.length == 1"
                translate translate-params-n="faultZones[0]">Шлейф {[n]}</span>
          <span ng-if="enabledChannels.length > 1 && faultZones.length > 1"
                translate translate-params-list="faultZones.join(', ')">Шлейфы {[list]}</span>
        </li>
      </ul>
    </div>
  </div>

  <!-- обратная сторона "плашки" -->
  <div class="details" ng-show="zoneDetails.isChecked(info.channels[0].zone_idx)">
    <div class="header">
      {[ ::zonesNumbers.join(', ') ]}, {{ ::deviceName }}
    </div>

    <div class="undefined" ng-if="noInfo" translate>
      Ожидание выхода устройства на связь
    </div>

    <div class="fault" ng-if="isActuallyOffline" translate>
      Нет связи
    </div>

    <div ng-if="!isActuallyOffline && !noInfo">
      <ng-include src="'augeas/templates/dashboard/cwl_signal.html'"></ng-include>
      <ng-include ng-if="!isRemote" src="'augeas/templates/dashboard/common/tamper.html'"></ng-include>

      <!-- Батарея показывается для всех CWL устройств, включая брелки, но не для offline брелков -->
      <div ng-if="!(isRemote && info.faults.offline)">
        <div class="normal" ng-if="!info.faults.power" translate>
          Батарея в норме
        </div>
        <div class="fault" ng-if="info.faults.power" translate>
          Батарея разряжена
        </div>
      </div>

      <div ng-repeat="ch in enabledChannels" ng-init="zone_num = ch.zone_idx + 1">
        <div class="fault" ng-if="ch.zone_state == 2" translate translate-params-n="zone_num">
          Тревога в шлейфе {[n]}
        </div>
        <div class="fault" ng-if="ch.zone_state == 3" translate translate-params-n="zone_num">
          Неисправность шлейфа {[n]}
        </div>
      </div>
      <div ng-if="isSleeping && canSleep">
        <div class="undefined" translate>
          Спящий режим
        </div>
      </div>

    </div>

  </div>
</div>
