<tbody class="zones-section-head">
  <tr>

    <td style="vertical-align: middle;"></td>

    <td>
      <button type="button" class="btn btn-sm btn-block"
              ng-class="dev.enabled ? 'btn-success': 'btn-danger'"
              ng-disabled="preventNordbusSlavesChanges"
              ng-click="toggleSlaveEnabled(dev)">
        <span translate
              ng-show="dev.enabled">Выключить</span>
        <span translate translate-context="(антоним к 'Выключить')"
              ng-show="!dev.enabled">Включить</span>
      </button>
    </td>

    <td colspan="12">

      <!--
      Цифры nn в стилях col-xx-nn подобраны так, чтобы для каждого размера экрана (lg/md/sm/xs)
      и для каждого языка интерфейса всё умещалось на экране. Свёрстаны блоки, внутри которых свои подблоки и т.п.
      На больших размерах экранов, подблоки в сумме укладываются в 12 единиц родительского блока, и располагаются в ряд.
      На малых размерах экрана, подблоки начинают перетекать друг под друга, так как сумма их nn превышает 12.
      -->

      <span class="col-lg-7 col-md-7 col-sm-5 col-xs-5" style="padding-left: 0;">
        <span class="col-lg-7 col-md-7 col-sm-12 col-xs-12" style="padding-left: 0;">
          <span style="white-space: nowrap; font-weight: bold;">
              <translate ng-if="getSlaveSoftwareVer(dev) !== null"
                  translate-context="(название клавиатуры в списке устройств, когда версия клавиатуры известна)"
                  translate-params-name="getNordbusKeyboardName(dev)"
                  translate-params-ver="getSlaveSoftwareVer(dev)">
                {[name]}, версия {[ver]}
              </translate>
              <translate ng-if="getSlaveSoftwareVer(dev) === null"
                  translate-context="(название клавиатуры в списке устройств, когда версия клавиатуры неизвестна)"
                  translate-params-name="getNordbusKeyboardName(dev)">
                {[name]}
              </translate>
          </span>
          <br/>
          <span style="white-space: nowrap;">
            <span ng-switch="isSlaveConnected(dev)">
              <span ng-switch-when="true" translate>есть связь</span>
              <span ng-switch-when="false" class="text-danger" translate>нет связи</span>
            </span>
          </span>
        </span>
        <span class="col-lg-5 col-md-5 col-sm-12 col-xs-12" style="padding-left: 0;">
          <span style="font-weight: bold;">
            {[ dev.info.serialNumber ]}
          </span>
          <br/>
          <span style="white-space: nowrap;">
            <span style="color: #777777;" translate>номер устройства</span>
            <span style="margin-left: 5px; font-weight: bold;">{[ dev.deviceIndex + 1 ]}</span>
          </span>
        </span>
      </span>

      <span class="col-lg-4 col-md-4 col-sm-5 col-xs5">
        <div ng-if="hasNordbusKeyboardPartsFeature">
          <span style="white-space: nowrap;">
            <span style="color: #777777;" translate>Управление разделами:</span>
          </span>
          <span ng-show="nordbusKeyboardParts(dev).length == 0" style="white-space: nowrap;">
            <translate translate-context="(часть фразы 'Управление разделами: все')">
              все
            </translate>
          </span>
          <div ng-repeat="part_index in nordbusKeyboardParts(dev) | orderBy">
            <button type="button" class="close" style="float:none"
                    ng-click="nordbusKeyboardRemovePart(dev, part_index)"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <translate>Раздел {[ part_index + 1 ]}</translate>
          </div>
          <div class="btn-group">
            <button type="button" class="btn btn-xs dropdown-toggle" data-toggle="dropdown">
              <translate>Выбрать раздел</translate> <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li ng-repeat="part_index in nordbusKeyboardUnclaimedParts(dev) | orderBy">
                <a href="#" ng-click="nordbusKeyboardAddPart(dev, part_index, $event)"><translate>Раздел {[ part_index + 1 ]}</translate></a>
              </li>
            </ul>
          </div>
        </div>
      </span>

      <span class="col-lg-1 col-md-1 col-sm-2 col-xs-2 pull-right">
        <span class="pull-right">
          <span style="white-space: nowrap;" only-desktop>
            <span ng-show="preventNordbusSlavesChanges || isSlaveConnected(dev) !== false">
              <a href="" disabled>
                <img ng-src="{['/images/glyph-delete-disabled.svg' | augeasStatic ]}"/>
              </a>
            </span>
            <span ng-hide="preventNordbusSlavesChanges || isSlaveConnected(dev) !== false">
              <a href="">
                <img ng-src="{[ '/images/glyph-delete.svg' | augeasStatic ]}"
                     ng-click="deleteSlave(dev)"/>
              </a>
            </span>
          </span>
        </span>
      </span>

    </td>

  </tr>
</tbody>
