{% extends "base.html" %}
{# set на верхнем уровне: он должен выполниться ДО тела base.html,
   где рисуется полоска демо — внутри блока было бы поздно #}
{% set hide_planbar = not devices %}
{% block title %}{{ tr('Сводка') }} — Puntavia{% endblock %}
{% block nav_over %}on{% endblock %}

{% block head %}
<style>
/* Сами карточки дашборда описаны в base.html: их рисуют включаемые куски
   (_card_*.html), и класс, живущий в странице-хозяине, ломается в тот день,
   когда карточку покажут где-то ещё. Здесь остаётся только настройка набора —
   она есть ровно на этом экране.

   Настройка живёт вне живой зоны, иначе обновление снесёт её на полуслове. */
#dashEdit ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
#dashEdit li{display:flex;align-items:center;gap:10px;padding:8px 10px;
  border:1px solid var(--line-soft);border-radius:3px;font-size:13.5px}
#dashEdit li .nt{color:var(--muted);font-size:12px;margin-left:auto;
  font-family:var(--sans);letter-spacing:0}
#dashEdit .ord{display:flex;gap:4px}
#dashEdit li button{background:none;border:1px solid var(--line);border-radius:3px;
  color:var(--fg);font:inherit;font-size:11.5px;padding:3px 8px;cursor:pointer}
#dashEdit li button:hover{border-color:var(--accent);color:var(--accent)}
#dashEdit .off{opacity:.55}
/* иконка настройки экрана — тихая, у имени страницы в крошке */
.crumb-set{width:30px;height:30px;border:0;background:none}
.crumb-set svg{width:15px;height:15px}

/* онбординг пустой компании (см. _overview_body): шаги запуска */
.steps{margin:10px 0 0;padding-left:22px;font-family:var(--sans);letter-spacing:0;
  font-size:14px;color:var(--fg)}
.steps li{margin:8px 0;line-height:1.55}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 2px}
</style>
{% endblock %}

{# «на связи N из M» из крошки убрана: то же число говорит счётчик
   «всего машин» прямо под шапкой (замечание владельца 18.08). Рядом с
   именем экрана — тихая иконка его настройки (набор и порядок карточек). #}
{% block crumb %}<span class="crumb"><span class="sep">/</span><span class="cr-here">{{ tr('Сводка') }}</span><button class="iconbtn crumb-set" type="button" id="dashOpen"
    title="{{ tr('Настроить экран') }}" aria-label="{{ tr('Настроить экран') }}">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><rect x="4" y="5" width="16" height="5.4" rx="1.6"/><rect x="4" y="13.6" width="9.5" height="5.4" rx="1.6"/></svg>
</button></span>{% endblock %}

{% block content %}
{# Выбранный день и лупа оси «по часам» едут и в адрес живого обновления:
   иначе первый же опрос возвращал бы карточку в сегодня и в полный день. #}
{# .stack — единый ритм между модулями: каждый следующий отступает одинаково,
   свои margin-top модулям не положены (замечание владельца: «расстояние
   между блоками везде разное»). #}
<div class="stack" data-live="/partial/overview?tlday={{ axis.day }}{{ '&tlzoom=' ~ axis.zoom if axis.zoom }}">{% include "_overview_body.html" %}</div>

{% if connect_code %}
{# Подключение новой машины — модалкой прямо со сводки: код + ссылка на
   сборки. Живёт вне живой зоны — подмена разметки не закрывает окно. #}
<dialog id="addMachine" class="modal">
  <div class="card-h wsum" style="margin-bottom:10px">{{ tr('Подключить машину') }}
    <button class="btn out sm" type="button"
            onclick="this.closest('dialog').close()">✕</button></div>
  <p class="sub">{{ tr('Скачайте программу и вставьте в неё код подключения — больше ничего не нужно.') }}</p>
  <div style="display:flex;gap:10px;margin-top:14px">
    <input class="inp" style="flex:1;min-width:0" type="password" readonly
           id="ovCode" value="{{ connect_code }}" onfocus="this.select()">
    <button class="btn sm" type="button" id="ovCopy">{{ tr('Скопировать') }}</button>
  </div>
  <p class="sub" style="margin-top:14px">{{ tr('Программы для Windows, macOS и Linux —') }}
    <a class="accent" href="/downloads">{{ tr('на странице загрузок') }}</a>.
    {{ tr('Управление машинами —') }} <a class="accent" href="/devices">{{ tr('в разделе «Машины»') }}</a>.</p>
</dialog>
<script>
(function(){
  var btn = document.getElementById('ovCopy');
  if(!btn) return;
  btn.addEventListener('click', function(){
    var box = document.getElementById('ovCode');
    if(navigator.clipboard && navigator.clipboard.writeText){
      navigator.clipboard.writeText(box.value).then(function(){
        btn.textContent = {{ tr('Скопировано')|tojson }};
      }, function(){});
    } else { box.focus(); box.select(); }
  });
})();
</script>
{% endif %}

{# Настройка набора — модалкой по иконке у крошки «Сводка»: кнопка внизу
   страницы выглядела приблудой (владелец, 18.08). #}
<dialog id="dashEdit" class="modal">
  <div class="card-h wsum" style="margin-bottom:10px">{{ tr('Карточки на этом экране') }}
    <button class="btn out sm" type="button"
            onclick="this.closest('dialog').close()">✕</button></div>
  <ul id="dashList" class="dash-list"></ul>
  <p class="dnote">{{ tr('Набор личный: у другого человека в компании он свой.') }}</p>
</dialog>
{% endblock %}

{% block scripts %}
<script>
/* Вид списка машин. Живёт в браузере и переживает живое обновление: зона
   перерисовывается целиком, поэтому вид применяется заново после каждой
   подмены — иначе таблица молча превращалась бы обратно в карточки. */
/* Счётчики-фильтры: клик по «работают/тихо/недоступны» оставляет только эти
   машины (карточки И строки таблицы), второй клик или «все» снимает.
   Фильтр — сиюминутный взгляд, между заходами не хранится; живую подмену
   переживает, потому что перечитывается по live:swapped. */
(function(){
  let cur = '';
  function apply(){
    document.querySelectorAll('[data-filter]').forEach(b =>
      b.classList.toggle('on', !!cur && b.dataset.filter === cur));
    document.querySelectorAll('[data-mstate]').forEach(el => {
      const st = el.dataset.mstate;
      // пауза — тоже «не собирает»: под фильтром «недоступны» её видно
      const hit = !cur || st === cur || (cur === 'off' && st === 'pause');
      el.classList.toggle('foff', !hit);
    });
  }
  document.addEventListener('click', e => {
    const b = e.target.closest('[data-filter]');
    if(!b) return;
    const want = b.dataset.filter === 'all' ? '' : b.dataset.filter;
    cur = (cur === want) ? '' : want;
    apply();
  });
  document.addEventListener('live:swapped', apply);
})();

/* «Это норма» на карточке рисков (Тир 1.5): пара (вид, кто) уходит в
   настройки компании, строка исчезает сразу; слушатель на документе —
   карточка живёт в живой зоне и перерисовывается целиком. */
(function(){
  document.addEventListener('click', e => {
    const b = e.target.closest('button.norm[data-kind]');
    if(!b) return;
    b.disabled = true;
    fetch('/api/risk/norm', {method:'POST',
      headers:{'Content-Type':'application/json', 'X-CSRF-Token': CSRF},
      body: JSON.stringify({kind: b.dataset.kind, who: b.dataset.who})})
      .then(r => { if(r.ok){ const li = b.closest('li'); li && li.remove(); } else { b.disabled = false; } },
            () => { b.disabled = false; });
  });
})();

/* Тикающие секунды в пилюлях состояния машин: якорь отдал сервер
   (data-clk), секунды идут на клиенте с поправкой на его часы — тот же
   приём, что у часов «Идёт работа» на странице дня. Дольше двух суток
   секунды не показываем: «недоступна» с прошлой недели — не секундомер.
   Заполняется СРАЗУ и после каждой живой подмены, не дожидаясь интервала:
   сервер отдаёт .clk пустым, и секунда пустоты каждые полминуты выглядела
   как дёргание пилюль (пилюля схлопывалась и вырастала обратно). */
(function(){
  const SKEW = Date.now() / 1000 - {{ now_ts }};
  function tick(){
    const now = Date.now() / 1000 - SKEW;
    document.querySelectorAll('[data-clk]').forEach(el => {
      const t = el.querySelector('.clk');
      if(!t) return;
      const s = Math.max(0, Math.floor(now - (+el.dataset.clk)));
      if(s > 48 * 3600){ t.textContent = ''; return; }
      t.textContent = ' ' + Math.floor(s / 3600) + ':'
        + String(Math.floor(s % 3600 / 60)).padStart(2, '0') + ':'
        + String(s % 60).padStart(2, '0');
    });
  }
  tick();
  setInterval(tick, 1000);
  document.addEventListener('live:swapped', tick);
})();

/* Полоса «сейчас» на оси — курсор секвенсера: позиция и время с секундами
   идут на клиенте с поправкой на его часы (та же механика, что у пилюль).
   Сервер отдал пояс машин и окно оси в минутах — клиент каждую секунду
   двигает --p и переписывает чип. У узких окон полоса упирается в правый
   край и ждёт живой опрос: тот пересчитает окно, и оно поедет за «сейчас». */
(function(){
  const SKEW = Date.now() / 1000 - {{ now_ts }};
  function tick(){
    document.querySelectorAll('.tl-play').forEach(el => {
      const off = +el.dataset.off, lo = +el.dataset.lo, hi = +el.dataset.hi;
      const t = new Date((Date.now() / 1000 - SKEW + off * 60) * 1000);
      const sec = t.getUTCHours() * 3600 + t.getUTCMinutes() * 60 + t.getUTCSeconds();
      const p = (sec / 60 - lo) / (hi - lo);
      el.hidden = p < 0 || p > 1.02;
      el.style.setProperty('--p', Math.min(1, Math.max(0, p)).toFixed(6));
      el.querySelector('b').textContent =
        String(t.getUTCHours()).padStart(2, '0') + ':'
        + String(t.getUTCMinutes()).padStart(2, '0') + ':'
        + String(t.getUTCSeconds()).padStart(2, '0');
    });
  }
  tick();
  setInterval(tick, 1000);
  document.addEventListener('live:swapped', tick);
})();

/* Пояс машины прячется, когда совпадает с поясом смотрящего: «UTC+2, 00:30
   у них» на каждой карточке пересказывал зрителю его собственные часы.
   Пояс зрителя знает только браузер, поэтому сравнение здесь; после живой
   подмены — заново. Разъехались — пояс снова виден, и это правильно. */
(function(){
  function apply(){
    const mine = -new Date().getTimezoneOffset();
    document.querySelectorAll('.tznote[data-off]').forEach(el => {
      el.hidden = (+el.dataset.off === mine);
    });
  }
  apply();
  document.addEventListener('live:swapped', apply);
})();

/* Сворачивание блоков в тонкие пилюли: стрелка в правом верхнем углу,
   свёрнутое помнит браузер (как вид списка машин). Кнопки дорисовываются
   заново после каждой живой подмены. */
(function(){
  const KEY = 'tl-fold';
  const T_CLOSE = {{ tr('Свернуть блок')|tojson }};
  const T_OPEN = {{ tr('Развернуть блок')|tojson }};
  const get = () => { try { return JSON.parse(localStorage.getItem(KEY) || '[]'); }
                      catch(e){ return []; } };
  function apply(){
    const folded = new Set(get());
    document.querySelectorAll('[data-fold]').forEach(card => {
      // у счётчиков шапки нет — стрелка вешается на саму обёртку
      const h = card.querySelector(':scope > .card-h') || card;
      let b = h.querySelector(':scope > .fold-btn');
      if(!b){
        b = document.createElement('button');
        b.type = 'button';
        b.className = 'fold-btn';
        b.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9.2 12 15l6-5.8"/></svg>';
        b.addEventListener('click', () => {
          const k = card.dataset.fold;
          let f = get();
          f = f.includes(k) ? f.filter(x => x !== k) : f.concat(k);
          try { localStorage.setItem(KEY, JSON.stringify(f)); } catch(e){}
          apply();
        });
        h.appendChild(b);
      }
      const on = folded.has(card.dataset.fold);
      card.classList.toggle('fold', on);
      b.title = on ? T_OPEN : T_CLOSE;
      b.setAttribute('aria-label', b.title);
      b.setAttribute('aria-expanded', String(!on));
    });
  }
  apply();
  document.addEventListener('live:swapped', apply);
})();

/* Вид ведомости: люди или группы. Подсказку даёт сервер (data-view-hint на
   карточке: «парк» — группы, иначе люди), свой выбор человека сильнее и
   помнится — как у плиток/строк машин. Кнопки живут в живой зоне, поэтому
   слушатель один, на документе. */
(function(){
  const KEY = 'tl-jrn-view';
  const hint = () => (document.querySelector('#jornadaCard[data-view-hint]') || {dataset:{}})
                       .dataset.viewHint || 'people';
  const get = () => { try { return localStorage.getItem(KEY) || hint(); }
                      catch(e){ return hint(); } };
  function apply(view){
    const g = document.getElementById('jrnGroups');
    const p = document.getElementById('jrnPeople');
    if(!g || !p) return;
    g.hidden = view !== 'groups';
    p.hidden = view === 'groups';
    document.querySelectorAll('[data-jv-when]').forEach(el => {
      el.hidden = el.dataset.jvWhen !== view;
    });
  }
  document.addEventListener('click', e => {
    const b = e.target.closest('[data-jview]');
    if(!b) return;
    try { localStorage.setItem(KEY, b.dataset.jview); } catch(e){}
    apply(b.dataset.jview);
  });
  apply(get());
  document.addEventListener('live:swapped', () => apply(get()));
})();

(function(){
  const KEY = 'tl-dev-view';
  /* Свой выбор человека сильнее подсказки сервера: подсказка (data-view-hint)
     говорит только «на таком парке плитки — простыня», и действует, пока
     человек ни разу не переключил вид сам. */
  const hint = () => (document.querySelector('[data-view-hint]') || {dataset:{}})
                       .dataset.viewHint || 'cards';
  const get = () => { try { return localStorage.getItem(KEY) || hint(); }
                      catch(e){ return hint(); } };
  function apply(view){
    const cards = document.getElementById('devCards');
    const table = document.getElementById('devTable');
    const box = document.getElementById('devView');
    if(!cards || !table || !box) return;
    cards.hidden = view === 'table';
    table.hidden = view !== 'table';
    box.querySelectorAll('button').forEach(b =>
      b.classList.toggle('on', b.dataset.view === view));
    box.querySelectorAll('button').forEach(b => {
      b.onclick = () => { try { localStorage.setItem(KEY, b.dataset.view); } catch(e){}
                          apply(b.dataset.view); };
    });
  }
  apply(get());
  document.addEventListener('live:swapped', () => apply(get()));
})();

(function(){
  // Набор карточек живёт на сервере, у человека: он заходит и с телефона тоже.
  var CATALOG = {{ catalog | tojson }};
  var chosen = {{ chosen | tojson }};
  var list = document.getElementById('dashList');
  var box = document.getElementById('dashEdit');

  document.getElementById('dashOpen').addEventListener('click', function(){
    box.showModal();
  });

  function save(){
    // window.jobRunning и живое обновление друг другу не мешают: набор
    // сохраняется отдельной ручкой, а страница перечитывается целиком
    post('/api/dashboard', {cards: chosen}).then(function(){ location.reload(); });
  }

  function draw(){
    list.innerHTML = '';
    chosen.forEach(function(id, i){
      var meta = CATALOG.filter(function(c){ return c.id === id; })[0];
      if(!meta) return;
      var li = document.createElement('li');
      li.innerHTML = '<span class="ord">' +
        '<button data-act="up" ' + (i === 0 ? 'disabled' : '') + '>↑</button>' +
        '<button data-act="down" ' + (i === chosen.length - 1 ? 'disabled' : '') + '>↓</button>' +
        '</span><span>' + meta.title + '</span>' +
        '<span class="nt">' + meta.note + '</span>' +
        '<button data-act="off">' + {{ tr('Убрать')|tojson }} + '</button>';
      li.querySelectorAll('button').forEach(function(b){
        b.addEventListener('click', function(){
          var act = b.dataset.act;
          if(act === 'off'){ chosen.splice(i, 1); }
          else if(act === 'up'){ chosen.splice(i - 1, 0, chosen.splice(i, 1)[0]); }
          else { chosen.splice(i + 1, 0, chosen.splice(i, 1)[0]); }
          save();
        });
      });
      list.appendChild(li);
    });
    CATALOG.filter(function(c){ return chosen.indexOf(c.id) < 0; }).forEach(function(meta){
      var li = document.createElement('li');
      li.className = 'off';
      li.innerHTML = '<span>' + meta.title + '</span>' +
        '<span class="nt">' + meta.note + '</span>' +
        '<button data-act="on">' + {{ tr('Добавить')|tojson }} + '</button>';
      li.querySelector('button').addEventListener('click', function(){
        chosen.push(meta.id);
        save();
      });
      list.appendChild(li);
    });
  }
  draw();
})();
</script>
{% endblock %}