{% extends "base.html" %}
{% block title %}{{ dev.name }} — Puntavia{% endblock %}

{% block head %}
<style>
/* Обзор машины: две колонки — слева сегодняшний день, справа период. Одна
   страница отвечает на «что сейчас» и «что вообще», не заставляя переключаться. */
/* Карточки одной ширины: разные размеры читаются как «эта важнее», хотя
   важность решает человек, а не вёрстка. У каждой в шапке стрелка — она ведёт
   на полноразмерный вид того же самого. */
.dev-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:start}
.dev-col{display:flex;flex-direction:column;gap:16px}
.big-num{font-size:34px;letter-spacing:-.03em;line-height:1.1}
.meta-line{color:var(--muted);font-size:12px;margin-top:4px}
.blk-mini{padding:10px 0;border-bottom:1px solid var(--line-soft)}
.blk-mini:last-child{border-bottom:0}
.blk-mini .t{font-size:12.5px;color:var(--muted)}
.blk-mini .n{font-size:14px;margin-top:2px}
.blk-mini .s{font-family:var(--sans);letter-spacing:0;font-size:13px;
  color:var(--muted);margin-top:4px}
/* Переключатель масштаба в шапке «Сводки». Радиокнопки спрятаны, видны только
   подписи-пилюли; панель выбирается соседним селектором, без единой строки JS —
   иначе карточка молчала бы у того, у кого скрипты отключены. */
.sumcard .scales{display:inline-flex;gap:2px;margin-left:auto;padding:2px;
  border-radius:var(--r-pill);background:var(--hover)}
.sumcard .scales input{position:absolute;opacity:0;pointer-events:none}
.sumcard .scales label{padding:4px 11px;border-radius:var(--r-pill);
  font-size:12px;color:var(--muted);cursor:pointer;user-select:none}
.sumcard .scales label:hover{color:var(--fg)}
.sumcard .scales input:checked + label{background:var(--accent);color:var(--on-accent)}
.sumcard .scales input:focus-visible + label{outline:2px solid var(--accent)}
.sumcard .pane{display:none}
.sumcard:has(#sc-day:checked) .pane-day,
.sumcard:has(#sc-week:checked) .pane-week,
.sumcard:has(#sc-month:checked) .pane-month{display:block}

/* Живая строка «чем занят сейчас». Точка слева цветом отвечает на вопрос
   раньше текста: зелёная — работает, жёлтая — ждёт машину, серая — тихо. */
.livenow{margin-top:12px;padding:10px 12px;border-radius:var(--r-card);
  background:var(--hover);font-size:13px;line-height:1.5;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.livenow .dot{width:7px;height:7px;border-radius:50%;background:var(--muted);
  flex:none;align-self:center}
.livenow.s-active .dot{background:var(--ok)}
.livenow.s-waiting .dot{background:var(--warn)}
.livenow .what{min-width:0;overflow-wrap:anywhere}
.livenow .prev{color:var(--muted);font-size:12px}
@media (max-width:1000px){.dev-grid{grid-template-columns:1fr}}
</style>
{% endblock %}

{% block crumb %}{% with tab = 'overview' %}{% include "_device_head.html" %}{% endwith %}{% endblock %}

{% block content %}

<div class="dev-grid">
  <div class="dev-col">
    {# Сегодня — самое частое, ради чего открывают машину. #}
    <div class="card">
      <div class="card-h wsum">{{ tr('Сегодня') }}
        <span class="cnt">{{ o.day.day_human }}</span>
        <a class="zoom" href="/d/{{ dev.id }}/day/{{ o.day.day }}"
           title="{{ tr('Раскрыть: весь день с блоками и скриншотами') }}">⤢</a>
      </div>
      <div class="big-num">{{ o.day.total_human }}</div>
      <div class="meta-line">{{ o.tz_label }}, {{ tr('{t} у них').format(t=o.local_time) }} ·
        {{ tr('{n} блоков активности').format(n=o.day.blocks|length) }}</div>

      {# Чем занят прямо сейчас — словами. Собирается из замеров, а не из
         разбора: блок закрывается с опозданием, и «сейчас» из него врёт. #}
      <div class="livenow s-{{ o.now.state }}">
        <span class="dot"></span>
        {%- if o.now.state == 'paused' %}
        <span class="what">{{ tr('Пауза — сбор остановлен.') }}</span>
        {%- elif o.now.state == 'off' %}
        <span class="what">{{ tr('Машина не на связи.') }}</span>
        {%- elif o.now.state == 'idle' %}
        <span class="what">{{ tr('За компьютером сейчас никого.') }}</span>
        {%- else %}
        <span class="what">
          {%- if o.now.state == 'waiting' %}{{ tr('Ждут машину:') }}
          {%- else %}{{ tr('Сейчас:') }}{% endif %}
          <b>{{ o.now.process }}</b>
          {%- if o.now.title %} — {{ o.now.title }}{% endif %},
          {{ tr('уже {t}').format(t=o.now.human) }}
          {{ tr('(с {t})').format(t=o.now.since) }}
        </span>
        {%- if o.now.prev %}
        <span class="what prev">{{ tr('до этого') }} {{ o.now.prev.process }},
          {{ o.now.prev.human }}</span>
        {%- endif %}
        {%- endif %}
      </div>

      {% if o.day.spans %}
      <div class="tl-ruler full" style="margin-top:16px">
        <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>
      <div class="tl-track" style="--tl-h:26px">
        {% for s in o.day.segments %}
        <i class="tl-seg {{ 'live' if s.live }}" data-cat="{{ s.cat }}"
           style="left:{{ s.left }}%;width:{{ s.width }}%" title="{{ s.tip }}"></i>
        {% endfor %}
      </div>
      <div class="totals">
        <span><em>{{ tr('итого') }}</em> {{ tr('работа') }} <b>{{ o.day.work_human }}</b></span>
        <span>{{ tr('перерывы') }} <b>{{ o.day.break_human }}</b></span>
        <span>{{ tr('плотность') }} <b>{{ o.day.focus }}%</b></span>
        <span><a class="accent" href="/d/{{ dev.id }}/day/{{ o.day.day }}">{{ tr('весь день →') }}</a></span>
      </div>
      {% else %}
      <div class="empty in-card">
        <b>{{ tr('Сегодня данных ещё нет') }}</b>
        {% if o.paused %}{{ tr('Сбор на паузе.') }}
        {% elif not o.alive %}{{ tr('Агент давно не выходил на связь.') }}
        {% else %}{{ tr('Появятся, как только человек начнёт работать.') }}{% endif %}
      </div>
      {% endif %}
    </div>

    {# Одна карточка на три масштаба вместо трёх карточек подряд: переключатель
       меняет только текст, ⤢ ведёт в тот же масштаб целиком. Вкладки без JS —
       :checked у скрытых радиокнопок, поэтому работает и с выключенным. #}
    <div class="card sumcard">
      <div class="card-h wsum">{{ tr('Сводка') }}
        <span class="scales">
          {% for sc in o.scales %}
          <input type="radio" name="scale" id="sc-{{ sc.id }}"
                 {{ 'checked' if loop.first }}>
          <label for="sc-{{ sc.id }}">{{ sc.label }}</label>
          {% endfor %}
        </span>
      </div>
      {% for sc in o.scales %}
      <div class="pane pane-{{ sc.id }}">
        <div class="meta-line">{{ sc.title }}
          · <a class="accent" href="{{ sc.href }}">{{ tr('раскрыть →') }}</a></div>
        {% if sc.text %}
        <p class="prose">{{ sc.text }}</p>
        {% else %}
        <div class="empty in-card">{{ tr('Сводка появится, когда разбор дойдёт до этих дней.') }}</div>
        {% endif %}
      </div>
      {% endfor %}
    </div>

    {% include "_calendar.html" %}

    {% if o.last_blocks %}
    <div class="card">
      <div class="card-h wsum">{{ tr('Чем занимались') }}
        <span class="cnt">{{ tr('последние блоки') }}</span>
        <a class="zoom" href="/d/{{ dev.id }}/day/{{ o.day.day }}"
           title="{{ tr('Раскрыть: все блоки дня') }}">⤢</a>
      </div>
      {% for b in o.last_blocks %}
      <div class="blk-mini">
        <div class="t">{{ b.start }} — {{ b.end }} · {{ b.human }}
          {% if b.category %}<span class="tag {{ b.category }}">{{ tr(b.category_label) }}</span>{% endif %}
        </div>
        <div class="n">{{ b.title }}</div>
        <div class="s">{{ b.summary }}</div>
      </div>
      {% endfor %}
    </div>
    {% endif %}
  </div>

  <div class="dev-col">
    <div class="card stats">
      <div class="s"><div class="k">{{ o.period.total_human }}</div>
        <div class="n">{{ tr('за {n} дней').format(n=o.days_back) }}</div></div>
      <div class="s"><div class="k">{{ o.period.avg_human }}</div>
        <div class="n">{{ tr('в среднем в день') }}</div></div>
      <div class="s"><div class="k">{{ o.period.break_human }}</div>
        <div class="n">{{ tr('перерывы') }}</div></div>
      <div class="s"><div class="k">{{ o.period.focus }}%</div>
        <div class="n">{{ tr('плотность') }}</div></div>
    </div>

    <div class="card">
      <div class="card-h wsum">{{ tr('По дням') }}
        <span class="cnt">{{ tr('{n} дней').format(n=o.days_back) }}</span>
        <a class="zoom" href="/d/{{ dev.id }}/week" title="{{ tr('Раскрыть: динамика за период') }}">⤢</a>
      </div>
      <div class="bars plus"
           style="--b-lab:82px;--b-sum:76px;--b-note:60px;--b-gap:10px;--b-pad:5px 6px;--b-h:8px">
        {% for row in o.period.rows_packed %}
        {% if row.gap %}
        <div class="gap-days">{{ tr('{n} дн. без активности').format(n=row.n) }}
          <span>{{ row.d1 }}{% if row.n > 1 %} – {{ row.d2 }}{% endif %}</span></div>
        {% else %}
        <a class="b {{ 'today' if row.is_today }}" href="/d/{{ dev.id }}/day/{{ row.day }}">
          <span class="b-lab">{{ row.short }} <em>{{ row.weekday }}</em></span>
          <span class="b-track"><i style="width:{{ row.bar }}%"></i></span>
          <span class="b-sum">{{ row.human }}</span>
          <span class="b-note">{{ row.break_human if row.total else '' }}</span>
        </a>
        {% endif %}
        {% endfor %}
      </div>
    </div>

    {% if o.apps %}
    <div class="card">
      <div class="card-h wsum">{{ tr('На чём уходит время') }}
        <span class="cnt">{{ tr('{n} дней').format(n=o.days_back) }}</span>
        <a class="zoom" href="/d/{{ dev.id }}/apps" title="{{ tr('Раскрыть: все приложения и заголовки') }}">⤢</a>
      </div>
      <div class="bars" style="--b-lab:minmax(100px,150px);--b-sum:70px">
        {% for a in o.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>
    {% endif %}

    <div class="card">
      <div class="card-h wsum">{{ tr('Машина') }}
        {% if can('manage_data') %}
        <a class="zoom" href="/devices" title="{{ tr('Раскрыть: управление машинами') }}">⤢</a>
        {% endif %}
      </div>
      <ul class="list">
        <li class="kv"><div class="k">{{ tr('агент') }}</div>
          <div class="v" style="display:flex;align-items:center;gap:10px;flex-wrap:wrap">
            {% if o.paused %}{% set pp = pause_parts(dev) %}
            <span class="state pause"><i class="dot"></i>{{ tr(pp[1]).format(**pp[2]) }}</span>
            {% elif o.alive %}<span class="state live"><i class="dot"></i>{{ tr('сбор идёт') }}</span>
            {% else %}<span class="state off"><i class="dot"></i>{{ tr('агент молчит') }}</span>{% endif %}
            {% if can('manage_data') %}
            <button class="btn out sm" onclick="togglePause({{ dev.id }})">
              {{ tr('Продолжить') if dev.paused else tr('Пауза') }}</button>
            {% endif %}
          </div></li>
        <li class="kv"><div class="k">{{ tr('система') }}</div>
          <div class="v">{{ dev.platform or '—' }} · {{ dev.backend or '—' }}</div></li>
        <li class="kv"><div class="k">{{ tr('часовой пояс') }}</div>
          <div class="v">{{ o.tz_label }} · {{ o.local_time }}</div></li>
        <li class="kv"><div class="k">{{ tr('сотрудник') }}</div>
          <div class="v">{{ person.name if person else tr('— не закреплена —') }}</div></li>
        <li class="kv"><div class="k">{{ tr('версия агента') }}</div>
          <div class="v">{{ dev.version or '—' }}</div></li>
      </ul>
      {% if can('manage_data') %}
      <p style="margin:14px 0 0"><a class="btn out sm" href="/devices">{{ tr('Настроить машины') }}</a></p>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}

{% block head_extra %}{% endblock %}