{# Машины: карточка на каждую — состояние и рассказ о последнем рабочем дне. #}
{% set o = card.data.o %}
{% if o.cards %}
{# С 08.09 (владелец) карточка — главное на сводке: она рассказывает про день
   машины словами (когда началась работа, сколько идёт, перерывы, чем занят),
   а не только показывает часы за сегодня. Дорожка внутри — в масштабе самого
   дня, ось суток по людям остаётся в «Рабочем периоде». #}
{# Два вида одних и тех же машин: плитками (видно ленту дня и рассказ) и
   таблицей (видно всех разом и удобно сравнивать). Выбор — за человеком, и он
   помнится: одному важнее «что происходит», другому «сколько у кого». #}
{# Машины и их панель — одним блоком-карточкой (просьба владельца 18.08):
   слева «+ Подключить машину» словами (голый плюс не разгадывался), справа
   пара «плитки/строки». Внутренние карточки держатся рамкой, без второй
   тени — тень на тени делала блок мутным. #}
{# Больше шести машин — по умолчанию строки, а не плитки (владелец, 06.09): на
   парке в два десятка плитки превращаются в простыню на два экрана, где каждая
   повторяет одно и то же. Это только ПОДСКАЗКА: свой выбор человека браузер
   помнит и она его не перебивает. #}
<div class="card machwrap" data-fold="machines" data-view-hint="{{ 'table' if o.cards|length > 6 else 'cards' }}">
<div class="card-h wsum">{{ tr('Машины') }}<span class="cnt">{{ o.cards|length }}</span>
  <span class="fold-sum">{{ tr('на связи') }} {{ tr('{a} из {b}').format(a=o.live, b=o.cards|length) }}</span>
  <span class="mach-tools">
  {% if connect_code %}
  <button class="iconbtn" type="button" title="{{ tr('Подключить машину') }}"
          aria-label="{{ tr('Подключить машину') }}"
          onclick="document.getElementById('addMachine').showModal()">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M12 5.2v13.6M5.2 12h13.6"/></svg>
  </button>
  {% endif %}
  <div class="viewtoggle" id="devView">
    <button type="button" data-view="cards" title="{{ tr('Карточки') }}"
            aria-label="{{ tr('Карточки') }}">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"><rect x="4.2" y="4.2" width="6.7" height="6.7" rx="1.5"/><rect x="13.1" y="4.2" width="6.7" height="6.7" rx="1.5"/><rect x="4.2" y="13.1" width="6.7" height="6.7" rx="1.5"/><rect x="13.1" y="13.1" width="6.7" height="6.7" rx="1.5"/></svg>
    </button>
    <button type="button" data-view="table" title="{{ tr('Таблица') }}"
            aria-label="{{ tr('Таблица') }}">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M4.5 6.6h15M4.5 12h15M4.5 17.4h15"/></svg>
    </button>
  </div>
  </span>
</div>

<div class="tbl-wrap" id="devTable" hidden>
  <table class="tbl">
    <thead>
      <tr>
        <th>{{ tr('Машина') }}</th><th>{{ tr('Состояние') }}</th><th class="num">{{ tr('Сегодня') }}</th>
        <th class="num">{{ tr('Начало') }}</th><th class="num">{{ tr('Последняя') }}</th>
        <th class="num">{{ tr('Вчера') }}</th><th class="num">{{ tr('7 дней') }}</th>
      </tr>
    </thead>
    <tbody>
      {% for c in o.cards %}
      <tr data-mstate="{{ c.mstate }}">
        <td><a href="/d/{{ c.id }}">{{ c.name }}</a>
          <div class="hint">{{ c.platform }}<span class="tznote" data-off="{{ c.tz_off }}"> · {{ c.tz_label }}, {{ c.local_time }}</span></div></td>
        <td>
          {% if c.paused %}<span class="state pause"><i class="dot"></i>{{ tr(c.pause_key).format(**c.pause_params) }}</span>
          {% elif c.mstate == 'work' %}<span class="state live" {% if c.clk_anchor %}data-clk="{{ c.clk_anchor }}"{% endif %}><i class="dot"></i>{{ tr('идёт работа') }}<b class="clk"></b></span>
          {% elif c.mstate == 'quiet' %}<span class="state" {% if c.clk_anchor %}data-clk="{{ c.clk_anchor }}"{% endif %}><i class="dot"></i>{{ tr('перерыв') }}<b class="clk"></b></span>
          {% else %}<span class="state off" {% if c.clk_anchor %}data-clk="{{ c.clk_anchor }}"{% endif %}><i class="dot"></i>{{ tr('недоступна') }}<b class="clk"></b></span>{% endif %}
        </td>
        <td class="num">{{ c.today_human }}</td>
        <td class="num">{{ c.first }}</td>
        <td class="num">{{ c.last }}</td>
        <td class="num">{{ c.yesterday_human }}</td>
        <td class="num">{{ c.week_human }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{# Карточка машины — рассказ о её последнем рабочем дне (владелец, 08.09):
   состояние, когда началась работа и сколько идёт (или когда кончилась),
   работа крупно, перерывы числом и суммой, дорожка дня в масштабе дня, чем
   человек занят сейчас и чем занимался. Молчащая машина рассказывает про свой
   последний день с датой — вместо крупного «0 мин», который ни на что не
   отвечал. Числа те же, что в ведомости: работа + перерывы = от начала до
   конца. data-n — сколько машин: одна занимает всю ширину и раскладывается в
   две колонки, две-три не растягиваются шире 640px, от четырёх — сетка. #}
<div class="cards" id="devCards" data-n="{{ o.cards|length if o.cards|length < 4 else 'many' }}">
  {% for c in o.cards %}
  {% set s = c.story %}
  <div class="card mcard" data-mstate="{{ c.mstate }}">
    <div class="top">
      <div style="min-width:0">
        <div class="nm"><a href="/d/{{ c.id }}">{{ c.name }}</a></div>
        {# чья машина, платформа; способ съёмки — только когда он не очевиден
           из платформы. Пояс — в .tznote: браузер прячет его, когда он
           совпадает с поясом смотрящего #}
        <div class="meta">{% if c.person %}{{ c.person }} · {% endif %}{{ c.platform }}{% if c.backend != c.platform and c.backend != '—' %} · {{ c.backend }}{% endif %}<span class="tznote" data-off="{{ c.tz_off }}"> · {{ c.tz_label }},
          {{ tr('{t} у них').format(t=c.local_time) }}</span>{% if not c.enabled %} · {{ tr('отключена') }}{% endif %}{% if c.mstate == 'off' and not c.paused %} · {{ tr('агент: {t}').format(t=tr(c.seen_key).format(**c.seen_params)) }}{% endif %}</div>
      </div>
      {# пилюля говорит языком счётчиков сводки: работа / перерыв / недоступна
         (просьба владельца 18.08); пауза остаётся паузой. «агент: N дн назад» —
         в подписи, только у пропавших: часы пилюли молчат дольше двух суток,
         а машине на связи хвастаться агентом незачем (замечание 19.08) #}
      {% if c.paused %}<span class="state pause"><i class="dot"></i>{{ tr(c.pause_key).format(**c.pause_params) }}</span>
      {% elif c.mstate == 'work' %}<span class="state live" {% if c.clk_anchor %}data-clk="{{ c.clk_anchor }}"{% endif %}><i class="dot"></i>{{ tr('идёт работа') }}<b class="clk"></b></span>
      {% elif c.mstate == 'quiet' %}<span class="state" {% if c.clk_anchor %}data-clk="{{ c.clk_anchor }}"{% endif %}><i class="dot"></i>{{ tr('перерыв') }}<b class="clk"></b></span>
      {% else %}<span class="state off" {% if c.clk_anchor %}data-clk="{{ c.clk_anchor }}"{% endif %}><i class="dot"></i>{{ tr('недоступна') }}<b class="clk"></b></span>{% endif %}
    </div>

    {% if s %}
    <div class="mday">
      {# одна фраза о дне: какой день и его рамки. У идущей работы конца нет —
         «с 13:26, идёт 4 ч 32 мин»; на перерыве — с какого времени #}
      <div class="mday-h">
        <b>{% if s.is_today %}{{ tr('сегодня') }}{% elif s.is_yesterday %}{{ tr('вчера') }}{% else %}{{ s.label }}{% endif %}</b>
        {% if s.live %}· {{ tr('с {t}, идёт {d}').format(t=s.first, d=s.span_human) }}
        {% elif s.quiet %}· {{ tr('с {t}, перерыв с {u}').format(t=s.first, u=s.last) }}
        {% else %}· {{ s.first }}–{{ s.last }} · {{ s.span_human }}{% endif %}
      </div>
      {# работа крупно + ритм недели; перерывы строкой под ними: работа и
         перерывы вместе дают «идёт N» из фразы выше #}
      <div class="bigrow">
        <div class="big">{{ s.work_human }} <small>{{ tr('работа') }}</small></div>
        <div class="spark">
          {% for sp in c.spark %}
          <i class="{{ 'on' if sp.h }} {{ 'today' if sp.today }}"
             style="--h:{{ sp.h }}%" title="{{ sp.tip }}"></i>
          {% endfor %}
        </div>
      </div>
      <div class="mday-n">{% if s.breaks %}{{ tr('перерывы') }} {{ s.breaks }} · {{ s.break_human }}{% else %}{{ tr('без перерывов') }}{% endif %}</div>
    </div>
    {# дорожка дня в масштабе самого дня: работа — перерыв — работа #}
    <span class="mstrip{{ ' live' if s.live }}" aria-hidden="true">
      {% for g in s.segments %}
      <i class="tl-seg {{ 'live' if g.live }}" data-cat="{{ g.cat }}"
         style="left:{{ g.left }}%;width:{{ g.width }}%" title="{{ g.tip }}"></i>
      {% endfor %}
    </span>
    <div class="msum">
      {% if s.live and c.now_title %}
      <p class="sum now"><span class="label">{{ tr('сейчас') }}</span> {{ c.now_title }}</p>
      {% endif %}
      {% if s.text %}<p class="sum">{{ s.text }}</p>{% endif %}
    </div>
    {% else %}
    {# работы ещё не было ни в один день: ни цифры, ни спарклайна (пустое не
       показываем) — только слово о том, что с агентом #}
    <div class="mday">
      <div class="mday-h">{{ tr('работы ещё не было') }}</div>
    </div>
    <div class="msum">
      {% if c.paused %}
      <p class="sum">{{ tr('сбор на паузе') }}{% if c.pause_params %}, {{ tr(c.pause_key).format(**c.pause_params) }}{% endif %}</p>
      {% endif %}
    </div>
    {% endif %}

    {# Дверь внутрь — вся карточка: ссылка имени растянута на карточку
       (см. .mcard .nm a::after). Стрелка в углу появляется на наведении. #}
    <span class="mcard-go" aria-hidden="true">→</span>
  </div>
  {% endfor %}
</div>
</div>
{% else %}
<div class="empty">
  {{ tr('Ни одна машина ещё не подключилась.') }}<br>
  {{ tr('Поставьте агента и укажите ему адрес этого сервера и ключ регистрации —') }}
  <a href="/devices">{{ tr('инструкция на странице «Машины»') }}</a>.
</div>
{% endif %}