<!-- шаблон для директив rieltaDevice, dualchannelRieltaDevice -->
<div class="square" ng-click="zoneDetails.toggle(info.zone_index)">

  <!-- лицевая сторона "плашки" -->
  <div ng-if="!zoneDetails.isChecked(info.zone_index)">
    <div class="repeater" ng-if="!!info.repeater_zone_index"
         ng-class="{offline: !isRepeaterOnline(info.repeater_zone_index)}">
      <translate translate-comment="(первая буква от термина 'ретранслятор')">Р</translate>{{ ::info.repeater_zone_index + 1 }}
    </div>
    <div class="ring" ng-class="ringClass">
      <div class="rielta-zone" ng-class="{warning: alarm}">

        <!-- слот для вставки списка номеров шлейфов (если не перезатирается, содержит номер одного шлейфа) -->
        <div class="zone-number" ng-transclude="zoneNumber">{{ ::info.zone_index + 1 }}</div>

        <!-- для датчиков температуры выводим температуру, для остальных - тип устройства -->
        <div ng-if="!isTempSensor" class="zone-type">{{ ::device }}</div>
        <div ng-if="isTempSensor && !isActuallyOffline" class="temperature">
          <span ng-repeat="tempData in allTempData()">
            <!--
              В строке выводим температуру по всем каналам, через запятую. Если температура неизвестна,
              всё-равно выводим данные (знак вопроса), чтобы было наглядно видно, где какой канал.
            --><span ng-class="{'low-temperature': tempData.state=='low', 'high-temperature': tempData.state=='high'}"><!--
              --><span ng-show="tempData.value==null">?</span><!--
              --><span ng-show="tempData.value!=null">{{ tempData.value }}</span><!--
              -->℃<!--
            --></span><!--
            --><span ng-show="!$last">,</span>
          </span>
        </div>

      </div>
      <div class="flash" ng-show="alarm"></div>
    </div>

    <div ng-if="isActuallyOffline">
      <ul class="under-text">
        <li translate>Нет связи</li>
      </ul>
    </div>
    <div ng-if="!isActuallyOffline">
      <!-- слот для вставки списка ошибок -->
      <div ng-transclude="deviceErrors"></div>
    </div>

  </div>

  <!-- обратная сторона "плашки" -->
  <div class="details" ng-show="zoneDetails.isChecked(info.zone_index)">

    <div class="header">
      <!-- Выводим в одной строке:
          1) слот для вывода номеров шлейфов (по умолчанию содержит номер одного шлейфа);
          2) тип устройства;
          3) номер репитера, если он есть.
          Отбивка комментариями используется чтобы между частями строки не добавлялись лишние пробелы.
      --><span ng-transclude="detailsZoneNumber">{{ ::info.zone_index + 1 }}</span><!--
      -->, {{ ::device }}<!--
      --><span ng-if="!!info.repeater_zone_index">. <!--
      --><translate translate-comment="(первая буква от термина 'ретранслятор')">Р</translate><!--
      -->{{ ::info.repeater_zone_index + 1 }}</span>
    </div>

    <div class="fault" ng-if="isActuallyOffline" translate>
      Нет связи
    </div>
    <!-- если устройство на связи, выведем специфичную для данного типа устройства информацию -->
    <div ng-if="!isActuallyOffline">

      <ng-include
          ng-if="!info.channels"
          src="'augeas/templates/dashboard/rielta_devices/' + type + '.html'">
      </ng-include>
      <ng-include
          ng-if="!!info.channels"
          src="'augeas/templates/dashboard/rielta_devices/multi_' + type + '.html'">
      </ng-include>

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