{# Рабочий период по ЛЮДЯМ — ведомость: точка состояния и имя · ход дня ·
   начало · конец · работа · перерывы.

   Это «registro de jornada» одной строкой на человека — то, что просит закон и
   что руководитель хочет видеть, не открывая машину (владелец, 04.09). Две
   машины одного человека — одна строка: начало по самой ранней, конец по самой
   поздней, дорожки слиты.

   С 06.09 карточка забрала ось суток себе, а вечером того же дня стала
   ведомостью (направление «Один вопрос» + журнал): линия 2px над шапкой
   колонок и над «итого», линейка часов прямо в шапке над колонкой хода дня,
   цифры моноширинные по разрядам. Итог дня — в строке «Итого» внизу; крупно
   его же говорит заголовок над ведомостью, третьего места не нужно.

   Режимы по размеру (пороги 2 / 15 / 16 машин): у одиночки под ведомостью три
   числа недели и машина с точкой состояния (блока «Машины» у такой компании
   нет); у парка строки свёрнуты в группы с плотностью по часам, разворот
   группы — её люди. Вид «люди / группы» подсказывает сервер (data-view-hint),
   свой выбор человека сильнее и помнится (overview.html).

   Геометрия — общая с дорожками: строка это сетка [имя | дорожка | числа],
   ширины держат --tl-lab и --tl-sum, поэтому линейка часов и полоса «сейчас»
   встают на свои места тем же расчётом. #}
{% set j = card.data %}
{% set zs = '&tlzoom=' ~ j.zoom if j.zoom %}
{% set dayq = '' if j.is_today else j.day %}
<div class="card plain jrn2" id="jornadaCard" data-fold="jornada"{% if j.groups %} data-view-hint="{{ j.view_hint }}"{% endif %}>
  <div class="card-h wsum">{{ tr(card.title) }}
    <span class="daynav">
      <a href="/?tlday={{ j.prev }}{{ zs }}" aria-label="{{ tr('днём раньше') }}">←</a>
      {% if j.next %}<a href="/?tlday={{ j.next if j.next != j.max_day else '' }}{{ zs }}" aria-label="{{ tr('днём позже') }}">→</a>
      {% else %}<span class="stub">→</span>{% endif %}
      <input class="hours-date" type="date" value="{{ j.day }}" max="{{ j.max_day }}"
             aria-label="{{ tr('Перейти к дате') }}"
             onchange="location='/?tlday='+this.value+'{{ zs }}'">
      {# Окна оси кнопками (владелец, 19.08): «день» — сброс, дальше окна,
         прижатые к «сейчас»/концу активности. Лупа отдельно — «по размеру
         активности», у неё нет своей ширины. #}
      <span class="seg zoomseg" role="group" aria-label="{{ tr('Окно оси') }}">
        <a class="{{ 'on' if not j.zoom }}" href="/?tlday={{ dayq }}">{{ tr('день') }}</a>
        <a class="{{ 'on' if j.zoom == '6h' }}" href="/?tlday={{ dayq }}&tlzoom=6h">{{ tr('6 ч') }}</a>
        <a class="{{ 'on' if j.zoom == '1h' }}" href="/?tlday={{ dayq }}&tlzoom=1h">{{ tr('1 ч') }}</a>
        <a class="{{ 'on' if j.zoom == '15m' }}" href="/?tlday={{ dayq }}&tlzoom=15m">{{ tr('15 мин') }}</a>
      </span>
      <a class="iconbtn zoombtn {{ 'on' if j.zoom == 'fit' }}"
         href="/?tlday={{ dayq }}{{ '' if j.zoom == 'fit' else '&tlzoom=fit' }}"
         title="{{ tr('Весь день') if j.zoom == 'fit' else tr('Приблизить к активности') }}"
         aria-label="{{ tr('Весь день') if j.zoom == 'fit' else tr('Приблизить к активности') }}">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><circle cx="11" cy="11" r="6.4"/><path d="M20 20l-4.5-4.5"/>{% if j.zoom == 'fit' %}<path d="M8.4 11h5.2"/>{% else %}<path d="M11 8.4v5.2M8.4 11h5.2"/>{% endif %}</svg>
      </a>
    </span>
    {% if j.work_human %}<span class="fold-sum">{{ j.work_human }}</span>{% endif %}
  </div>
  {# день без единого блока — не таблица прочерков, а одна строка (правило
     «пустое не показывать»); сегодняшний такой день целиком берёт на себя
     заголовок, сюда доходит только прошлое #}
  {% if j.rows and j.active %}
  {% if j.groups %}
  {# ----- вид «группы»: дорожка группы — сколько человек работало в каждый час,
     пять ступеней одного тона; разворот — строки людей. Линейка полного дня:
     плотность считается по часам суток и окна оси не знает. ----- #}
  <div class="jrn-groups" id="jrnGroups" hidden>
    <div class="jrn-h tl-row tl-wide">
      <span>{{ tr('Группа') }}</span>
      <span class="ax" aria-hidden="true">{% for t in j.groups.ticks %}<i style="left:{{ t.pos }}%"></i><span style="left:{{ t.pos }}%">{{ t.label }}</span>{% endfor %}</span>
      <span class="jrn-nums">
        <span></span>
        <span>{{ tr('Сейчас') }}</span>
        <span>{{ tr('Работа') }}</span>
        <span class="brk">{{ tr('Перерывы') }}</span>
      </span>
    </div>
    {% for grp in j.groups.groups %}
    <details class="grp">
      <summary class="tl-row tl-wide">
        <span class="tl-lab">{{ grp.name or tr('Без группы') }} <em>· {{ grp.n }}</em></span>
        <span class="dens" aria-hidden="true">{% for cell in grp.cells %}<i data-l="{{ cell.l }}" title="{{ '%02d:00'|format(loop.index0) }} · {{ cell.n }}"></i>{% endfor %}</span>
        <span class="jrn-nums">
          <span></span>
          <span class="num">{% if grp.work_n %}<b>{{ grp.work_n }}</b>{% else %}—{% endif %}</span>
          <span class="num"><b>{{ grp.work_human }}</b></span>
          <span class="num muted brk">{{ grp.break_human }}</span>
        </span>
      </summary>
      <div class="tl-rows grp-rows">
        {% for r in grp.rows %}{% include "_jrn_row.html" %}{% endfor %}
      </div>
    </details>
    {% endfor %}
    <div class="jrn-f tl-row tl-wide">
      <span class="tl-lab">{{ tr('Итого') }} <em>· {{ tr('{n} чел.').format(n=j.people) }}</em></span>
      <span class="dens-key"><span>{{ tr('реже') }}</span><span class="dens" aria-hidden="true"><i data-l="0"></i><i data-l="1"></i><i data-l="2"></i><i data-l="3"></i><i data-l="4"></i></span><span>{{ tr('чаще · сколько человек группы работало в этот час') }}</span></span>
      <span class="jrn-nums">
        <span></span>
        <span class="num"><b>{{ j.groups.groups | sum(attribute='work_n') or '—' }}</b></span>
        <span class="num"><b>{{ j.work_human }}</b></span>
        <span class="num muted brk">{{ j.break_human }}</span>
      </span>
    </div>
  </div>
  {% endif %}
  {# ----- вид «люди»: строка на человека ----- #}
  <div class="jrn-people" id="jrnPeople">
    {# Подписи колонок — капсом: это ровно тот случай, где разрядка отличает
       шапку от значений (правило 3 чистки). Над дорожкой — линейка часов. #}
    <div class="jrn-h tl-row tl-wide">
      <span>{{ tr('Сотрудник') }}</span>
      <span class="ax" aria-hidden="true">{% for t in j.ticks %}<i style="left:{{ t.pos }}%"></i><span style="left:{{ t.pos }}%">{{ t.label }}</span>{% endfor %}</span>
      <span class="jrn-nums">
        <span>{{ tr('Начало') }}</span>
        <span>{{ tr('Конец') }}</span>
        <span>{{ tr('Работа') }}</span>
        <span class="brk">{{ tr('Перерывы') }}</span>
      </span>
    </div>
    <div class="tl-rows">
      {% for r in j.rows %}{% include "_jrn_row.html" %}{% endfor %}
      {# Полоса «сейчас» через все дорожки с бегущими секундами (владелец, 19.08).
         Позицию и часы ведёт клиент, сервер даёт стартовую точку. #}
      {% if j.play %}
      <div class="tl-play tl-wide" style="--p:{{ (j.play.pos / 100)|round(5) }}"
           data-off="{{ j.play.off }}" data-lo="{{ j.play.lo }}"
           data-hi="{{ j.play.hi }}" aria-hidden="true"><b></b></div>
      {% endif %}
    </div>
    <div class="jrn-f tl-row tl-wide">
      <span class="tl-lab">{{ tr('Итого') }} <em>· {{ tr('{n} чел.').format(n=j.people) }}</em></span>
      {% with legend_note = (tr('штриховка — работа идёт прямо сейчас') if j.is_today) %}
        {% include "_legend.html" %}
      {% endwith %}
      <span class="jrn-nums">
        <span></span><span></span>
        <span class="num"><b>{{ j.work_human }}</b></span>
        <span class="num muted brk">{{ j.break_human }}</span>
      </span>
    </div>
  </div>
  {# Подписи под ведомостью — одной тихой строкой, а не столбиком абзацев
     (владелец, 08.09): переключение вида и напоминание о незакреплённых. #}
  <div class="jrn-notes">
  {% if j.groups %}
  {# Переключение вида — с фразой, почему так (владелец, 06.09): «по группам,
     потому что машин 47». Свой выбор человека помнит браузер. #}
  <p class="dnote jrn-view">
    <span data-jv-when="groups" hidden>{% if j.mode == 'park' %}{{ tr('По группам, потому что машин {n}.').format(n=dev_n) }} {% endif %}<button type="button" class="linkbtn" data-jview="people">{{ tr('Показать всех →') }}</button></span>
    <span data-jv-when="people" hidden><button type="button" class="linkbtn" data-jview="groups">{{ tr('Свернуть по группам →') }}</button></span>
  </p>
  {% endif %}
  {% if j.unassigned %}
  <p class="dnote">{{ tr('Строки без сотрудника — это машины, которые ещё никому не закреплены.') }}
    <a href="/team">{{ tr('Закрепить →') }}</a></p>
  {% endif %}
  </div>
  {% else %}
  <p class="dnote">{{ tr('Сегодня ещё никто не начал.') if j.is_today else tr('В этот день активности не было.') }}</p>
  {% endif %}
  {% if j.facts %}
  {# Одиночка: три числа недели вместо блоков «Машины» и «Неделя» — машина и
     есть человек, её состояние стоит рядом с именем. #}
  <div class="jrn-facts">
    <div><div class="k">{{ tr('Эта неделя') }}</div><div class="v">{{ j.facts.week_human }}</div></div>
    <div><div class="k">{{ tr('В среднем в день') }}</div><div class="v">{{ j.facts.avg_human }}</div></div>
    <div><div class="k">{{ tr('Машина') if j.facts.machines|length == 1 else tr('Машины') }}</div>
      <div class="v m">{% for m in j.facts.machines %}<a href="/d/{{ m.id }}"><i class="jst" data-st="{{ m.mstate }}" aria-hidden="true"></i>{{ m.name }}</a>{% endfor %}</div></div>
  </div>
  {% endif %}
</div>