{# Тело страницы дня. Живое обновление подменяет только его, поэтому кнопки
   разбора и просмотрщик скриншотов живут снаружи — их обработчики настраиваются
   один раз. #}
{# Живая пара «Идёт работа / Перерыв»: секунды тикают на клиенте (day.html),
   сервер даёт только якоря. Пока человек за делом, идут часы работы с начала
   отрезка; замолчал дольше порога простоя — работа застывает на длительности
   отрезка, и начинает идти перерыв от последней активности. #}
{% if d.live_now %}
{# Серверного «сейчас» здесь нарочно нет: оно менялось бы каждым опросом, и
   живая подмена дёргала бы DOM даже без новых данных. Сдвиг часов зрителя
   считается один раз при загрузке страницы (day.html). #}
<div class="nowpair" id="nowPair"
     data-now-block="{{ d.live_now.block_start }}"
     data-now-act="{{ d.live_now.last_act }}"
     data-now-idle="{{ d.live_now.idle_after }}"
     data-now-alive="{{ 1 if alive else 0 }}">
  <div class="card now-card" id="nowWork">
    <div class="now-lab">{{ tr('Идёт работа') }}</div>
    <div class="now-clk">—</div>
    <div class="now-sub">{{ tr('отрезок с {t}').format(t=d.live_now.since_work) }}</div>
  </div>
  <div class="card now-card" id="nowBreak">
    <div class="now-lab">{{ tr('Перерыв') }}</div>
    <div class="now-clk">—</div>
    <div class="now-sub">{{ tr('тишина с {t}').format(t=d.live_now.since_break) }}{% if not alive %} · {{ tr('машина не на связи') }}{% endif %}</div>
  </div>
</div>
{% endif %}

{# Пять цифр читаются как одна фраза: пришёл — ушёл — из них работал столько,
   отдыхал столько, и вот с какой плотностью. «Активность» меньше «работы» на
   мелкие отвлечения внутри рабочих отрезков — это и есть плотность. #}
<div class="card stats">
  <div class="s"><div class="k">{{ d.first }}</div><div class="n">{{ tr('Начало') }}</div></div>
  <div class="s"><div class="k">{{ d.last }}</div><div class="n">{{ tr('Конец') }}</div></div>
  <div class="s"><div class="k">{{ d.work_human }}</div><div class="n">{{ tr('Работа') }}</div></div>
  <div class="s"><div class="k">{{ d.break_human }}</div><div class="n">{{ tr('Перерывы') }}</div></div>
  <div class="s"><div class="k">{{ d.total_human }}</div><div class="n">{{ tr('Активность') }}</div></div>
  <div class="s"><div class="k">{{ d.focus }}%</div><div class="n">{{ tr('Плотность') }}</div></div>
</div>

{% if d.blocks %}
<div class="card" style="margin-top:14px">
  {# Дорожка — общая (.tl-ruler + .tl-track из base.html), только во всю ширину:
     здесь одна машина за один день, подписи слева не нужны. Линейка стоит НАД
     дорожкой, как в динамике и в карточке «Машины», и делит сутки теми же
     двумя часами, что и сетка внутри дорожки. #}
  <div class="tl-ruler full">
    <div class="ax">
      {% for h in range(0, 25, 2) %}
      <i style="left:{{ (h/24*100)|round(3) }}%"></i>
      <span style="left:{{ (h/24*100)|round(3) }}%">{{ '%02d'|format(h if h < 24 else 0) }}</span>
      {% endfor %}
    </div>
  </div>
  {# Строится из самих замеров, а не из блоков: блок склеивает паузы до
     session_gap_min, и десятиминутный перерыв выглядел бы работой. #}
  <div class="tl-track" style="--tl-h:34px">
    {% for s in d.segments %}
    <i class="tl-seg {{ 'live' if s.live }}" data-cat="{{ s.cat }}"
       {% if s.wait %}data-wait="1"{% endif %}
       style="left:{{ s.left }}%;width:{{ s.width }}%" title="{{ s.tip }}"></i>
    {% endfor %}
  </div>
  {# Плотность по часам: высота — доля часа, занятая работой, а не доля от
     самого удачного часа этого дня. Иначе час с двадцатью минутами выглядит
     полным, и дни между собой не сравнить. #}
  <div class="hours" aria-hidden="true">
    {% for pct in d.hours_pct %}
    <i style="height:{{ pct }}%"
       title="{{ '%02d'|format(loop.index0) }}:00 — {{ tr('{t} из часа').format(t=d.hours_human[loop.index0] or tr('ничего')) }}"></i>
    {% endfor %}
  </div>
  <div class="hours-x">
    {% for i in range(24) %}<span>{{ i if i % 3 == 0 else '' }}</span>{% endfor %}
  </div>
  <p class="hint" style="margin:10px 0 0">{{ tr('Столбик — доля часа, занятая работой: полная высота значит «весь час за делом».') }}</p>
</div>

{% if d.spans %}
<h2>{{ tr('Работа и перерывы') }}</h2>
<div class="card">
  <div class="card-h wsum">{{ tr('Отрезки дня') }}
    <span class="cnt">{{ tr('работа') }} {{ d.work_human }} · {{ tr('перерывы') }} {{ d.break_human }}</span>
  </div>
  <div class="bars plus"
       style="--b-lab:118px;--b-sum:86px;--b-note:124px;--b-gap:12px;--b-pad:7px 8px;--b-h:10px">
    {% for s in d.spans %}
    <div class="b {{ 'brk' if s.kind == 'break' }}">
      <span class="b-lab">{{ s.from }} – {{ s.to }}</span>
      <span class="b-track"><i style="width:{{ s.share }}%"></i></span>
      <span class="b-sum">{{ s.human }}</span>
      {# «активно» пишем, только когда оно меньше самого отрезка: повторять ту
         же цифру дважды в строке — значит заставлять сравнивать их взглядом. #}
      <span class="b-note">
        {%- if s.kind == 'break' %}{{ tr('перерыв') }}
        {%- else %}
          {%- if s.active_human != s.human %}{{ tr('активно {t}').format(t=s.active_human) }}{% endif %}
          {%- if s.waiting_human %} · {{ tr('ждал машину {t}').format(t=s.waiting_human) }}{% endif %}
        {%- endif -%}
      </span>
    </div>
    {% endfor %}
  </div>
  {# Итог отдельной строкой: она отвечает на вопрос, ради которого таблицу и
     открыли. Работа и перерывы в сумме дают время за компьютером — это ровно
     от первой отметки до последней. #}
  <div class="totals">
    <span><em>{{ tr('итого') }}</em> {{ tr('работа') }} <b>{{ d.work_human }}</b></span>
    <span>{{ tr('перерывы') }} <b>{{ d.break_human }}</b>{% if d.breaks %} · {{ tr('{n} шт.').format(n=d.breaks) }}{% endif %}</span>
    <span>{{ tr('за компьютером') }} <b>{{ d.span_human }}</b></span>
    {% if d.waiting_sec %}<span>{{ tr('ожидание машины') }} <b>{{ d.waiting_human }}</b></span>{% endif %}
    <span>{{ tr('активность') }} <b>{{ d.total_human }}</b> · {{ tr('плотность') }} <b>{{ d.focus }}%</b></span>
  </div>
</div>
{% endif %}

{# Почему вместо рассказа модели сухой список приложений — говорим ЗДЕСЬ, а не
   только полосой наверху: человек смотрит день, прокрученный вниз, и молчаливая
   подмена читается как поломка продукта (живой случай, 28.08). #}
{% if plan[0] in ('expired', 'blocked') %}
<h2>{{ tr('Как идёт день') if d.is_today else tr('Итог дня') }}</h2>
<div class="ai-off">
  <span>{{ tr('Разбор ИИ выключен: демо кончилось. Ниже — не рассказ модели, а список приложений и заголовков окон.') }}</span>
  <a href="#" onclick="var m=document.getElementById('payWall'); if(m){m.showModal();} return false">{{ tr('Оплатить →') }}</a>
</div>
{% if d.summary %}
<div class="card"><p class="sub" style="max-width:820px">{{ d.summary }}</p></div>
{% endif %}
{% elif d.summary %}
<h2>{{ tr('Как идёт день') if d.is_today else tr('Итог дня') }}</h2>
<div class="card"><p class="sub" style="max-width:820px">{{ d.summary }}</p></div>
{% endif %}

<h2>{{ tr('Приложения') }}</h2>
<div class="card">
  <div class="bars">
    {% for a in d.apps %}
    <div class="b">
      <span class="b-lab" title="{{ a.process }}">{{ a.label }}</span>
      <span class="b-track"><i style="width:{{ a.share }}%"></i></span>
      <span class="b-sum">{{ a.human }}</span>
    </div>
    {% endfor %}
  </div>
</div>

<h2>{{ tr('Блоки активности') }}</h2>
{% if d.hour_marks %}
{# Оглавление по часам: сколько наработано в каждом и прыжок к первому блоку.
   Час здесь — указатель, а не отдельная сводка: резать по часам сами блоки
   значило бы рвать сессию пополам. #}
<div class="hourbar">
  {% for h in d.hour_marks %}
  <a href="#b{{ h.anchor }}"><b>{{ h.label }}</b><span>{{ h.human }}</span></a>
  {% endfor %}
</div>
{% endif %}
{% for b in d.blocks %}
{% if loop.first or b.hour != loop.previtem.hour %}
<div class="hourhead" id="h{{ '%02d'|format(b.hour) }}">{{ '%02d'|format(b.hour) }}:00</div>
{% endif %}
<div class="card blk" id="b{{ b.start_ts }}">
  <div class="blk-h">
    <span class="blk-time">{{ b.start }} — {{ b.end }}</span>
    <span class="blk-dur">{{ b.human }}{% if b.waiting_human %} <i class="wait-note">+ {{ tr('ждал машину {t}').format(t=b.waiting_human) }}</i>{% endif %}</span>
    {% if b.analyzed %}<span class="tag {{ b.category }}">{{ tr(b.category_label) }}</span>{% endif %}
    {% if not b.closed %}<span class="state live"><i class="dot"></i>{{ tr('идёт сейчас') }}</span>{% endif %}
  </div>
  {% if b.analyzed %}
    <p class="blk-title">{{ b.title }}</p>
    <p class="sum">{{ b.summary }}</p>
    {% if b.details %}<ul>{% for x in b.details %}<li>{{ x }}</li>{% endfor %}</ul>{% endif %}
  {% else %}
    <p class="unan">{{ tr('Ещё не разобрано — нажмите «Проанализировать день».')
      if b.closed else tr('Блок ещё не закрыт, разбор будет после паузы в работе.') }}</p>
  {% endif %}
  <div class="chips">
    {% for a in b.apps %}<span class="tag">{{ a.label }} · {{ a.human }}</span>{% endfor %}
  </div>
  {% if b.shots %}
  <div class="thumbs">
    {% for s in b.shots %}
    {# в сетке — миниатюра, в просмотрщике (href) — оригинал #}
    <a class="thumb" href="/shot/{{ s.id }}" data-shot="{{ s.id }}" data-time="{{ s.time }}"
       data-title="{{ b.title or '' }}" title="{{ s.time }}">
      <img loading="lazy" src="/thumb/{{ s.id }}" alt="{{ s.time }}"
           onload="this.parentNode.classList.add('ok')">
      <span class="tm">{{ s.time }}</span>
    </a>
    {% endfor %}
  </div>
  {% endif %}
</div>
{% endfor %}
{% else %}
<div class="empty">
  <b>{{ tr('За этот день данных нет') }}</b>
  {% if paused %}{{ tr('Машина стоит на паузе — сбор выключен, пока её не продолжат.') }}
  {% elif not alive %}{{ tr('Агент на этой машине давно не выходил на связь: проверьте, запущен ли он и есть ли у машины доступ к серверу.') }}
  {% else %}{{ tr('Либо за компьютером в этот день не работали, либо агент был выключен. Соседние дни листаются стрелками в шапке.') }}{% endif %}
</div>
{% endif %}