{% extends "base.html" %}
{% block title %}{{ tr('Машины') }} — Puntavia{% endblock %}
{% block nav_team %}on{% endblock %}

{% block head %}
<style>
/* Две раскладки одного списка машин — как на дашборде: карточки (плитки) и
   список (строки). Плитки, переключатель и «+» — из общего слоя (.machwrap,
   .devgrid/.devcard, .mach-tools, .iconbtn, .viewtoggle, dialog.modal). */
.list .dev{grid-template-columns:1.4fr .8fr .8fr .7fr .9fr auto;align-items:start}
.list .dep{grid-template-columns:1fr auto auto;align-items:center;gap:14px}
.list .dev .nm{display:flex;align-items:center;gap:9px}
.list .dev .nm a:hover{color:var(--accent)}
.list .dev>.acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.list .dev .acts form{margin:0}
.list .dev>details{grid-column:1 / -1;justify-self:start}
.list .dev .edit-body{max-width:620px}
@media (max-width:640px){.list .dev>.acts{justify-content:flex-start}}

/* Модалка подключения: код одной строкой, шаги, реквизиты. */
.connect-body ol{margin:12px 0 0;padding-left:20px;font-size:13.5px;
  color:var(--muted);font-family:var(--sans);letter-spacing:0}
.connect-body li{margin:6px 0}
.connect-body code{background:var(--soft);padding:2px 7px;border-radius:3px;
  font-size:12px;color:var(--fg)}
.list .kv{grid-template-columns:170px 1fr}
.ccode-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0}
.ccode-row input{flex:1 1 240px;min-width:0}
</style>
{% endblock %}

{% block crumb %}<span class="crumb"><span class="sep">/</span><span class="cr-here">{{ tr('Машины') }}</span><span class="cr-note">{{ tr('машин') }} {{ rows|length }}</span></span>{% endblock %}

{% block content %}
{% from "_ava.html" import ava, avapick with context %}
{# Без .foldable: сворачивать на странице нечего, шеврон в шапке только
   путал (владелец, 26.08). #}
<div class="pagetabs">{% with tab = 'devices' %}{% include "_tabs_team.html" %}{% endwith %}</div>
<div class="pagewrap">

<div class="card machwrap">
  <div class="card-h wsum">{{ tr('Машины') }}<span class="cnt">{{ rows|length }}</span>
    <span class="mach-tools">
      {% if can_manage %}
      <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 %}
      {% if rows %}
      <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="list" 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>
      {% endif %}
    </span>
  </div>
  {# два селекта легко спутать — одна строка, кто из них про что (владелец, 26.08) #}
  <p class="sub" style="margin-bottom:6px">{{ tr('Сотрудник склеивает машины одного человека в одну строку отчёта. Группа решает, кому машина видна: наблюдателю выдаётся группа на вкладке «Доступ».') }}</p>

  {% if not rows %}
  <div class="empty in-card">
    <b>{{ tr('Пока ни одна машина не подключилась') }}</b>
    {{ tr('Нажмите «+» вверху: поставьте агента на машину сотрудника и дайте ему код подключения.') }}
  </div>
  {% endif %}

  {# СПИСОК — строки; компактнее, когда парк большой. Спрятан до выбора. #}
  <ul class="list" id="devList" hidden>
    {% for r in rows %}
    <li class="dev">
      <div>
        <div class="nm">
          {% if r.pause[0] %}<span class="state pause"><i class="dot"></i>{{ tr(r.pause[1]).format(**r.pause[2]) }}</span>
          {% elif r.alive %}<span class="state live"><i class="dot"></i>{{ tr('на связи') }}</span>
          {% else %}<span class="state off"><i class="dot"></i>{{ tr('молчит') }}</span>{% endif %}
          {{ ava(r.row.name, r.row.avatar, 22) }}
          <a href="/d/{{ r.row.id }}">{{ r.row.name }}</a>
        </div>
        <div class="v muted">{{ r.row.platform or '—' }} · {{ r.row.backend or '—' }}</div>
      </div>
      <div>
        <div class="k">{{ tr('сотрудник') }}</div>
        {% if can_manage %}
        <form method="post" action="/devices/{{ r.row.id }}/assign" style="margin-top:4px">
          <input type="hidden" name="_csrf" value="{{ csrf_token() }}">
          <select class="sel sm" name="person" onchange="this.form.submit()"
                  aria-label="{{ tr('Сотрудник машины {name}').format(name=r.row.name) }}">
            <option value="">{{ tr('— не назначена —') }}</option>
            {% for p in people %}
            <option value="{{ p.id }}" {{ 'selected' if r.person and p.id == r.person.id }}>{{ p.name }}</option>
            {% endfor %}
          </select>
        </form>
        {% else %}
        <div class="v">{{ r.person.name if r.person else '—' }}</div>
        {% endif %}
      </div>
      <div>
        <div class="k">{{ tr('группа') }}</div>
        {% if can_manage %}
        <form method="post" action="/devices/{{ r.row.id }}/group" style="margin-top:4px">
          <input type="hidden" name="_csrf" value="{{ csrf_token() }}">
          <select class="sel sm" name="department" onchange="this.form.submit()"
                  aria-label="{{ tr('Группа машины {name}').format(name=r.row.name) }}">
            <option value="">{{ tr('— вне групп —') }}</option>
            {% for d in departments %}
            <option value="{{ d.id }}" {{ 'selected' if r.row.department_id == d.id }}>{{ d.name }}</option>
            {% endfor %}
          </select>
        </form>
        {% else %}
        <div class="v">{{ r.department or '—' }}</div>
        {% endif %}
      </div>
      <div>
        <div class="k">{{ tr('пояс') }}</div>
        <div class="v">{{ r.tz_label }} · {{ r.local_time }}</div>
      </div>
      <div>
        <div class="k">{{ tr('прислано') }}</div>
        <div class="v">{{ tr('замеров {a} · скриншотов {b}').format(a=r.samples, b=r.shots) }}</div>
      </div>
      <div class="acts">
        <form method="post" action="/devices/{{ r.row.id }}/pause">
          <input type="hidden" name="_csrf" value="{{ csrf_token() }}">
          <button class="btn out sm" type="submit">{{ tr('Продолжить') if r.row.paused else tr('Пауза') }}</button>
        </form>
        <form method="post" action="/devices/{{ r.row.id }}/enable">
          <input type="hidden" name="_csrf" value="{{ csrf_token() }}">
          <button class="btn out sm" type="submit">{{ tr('Включить') if not r.row.enabled else tr('Отключить') }}</button>
        </form>
      </div>
      {% include "_dev_edit.html" %}
    </li>
    {% endfor %}
  </ul>

  {# КАРТОЧКИ — плитки; вид по умолчанию, поэтому видимы с сервера. #}
  <div class="devgrid" id="devCards"{% if not rows %} hidden{% endif %}>
    {% for r in rows %}
    <div class="devcard">
      <div>
        <div class="devcard-h">
          {% if r.pause[0] %}<span class="state pause"><i class="dot"></i>{{ tr(r.pause[1]).format(**r.pause[2]) }}</span>
          {% elif r.alive %}<span class="state live"><i class="dot"></i>{{ tr('на связи') }}</span>
          {% else %}<span class="state off"><i class="dot"></i>{{ tr('молчит') }}</span>{% endif %}
          {{ ava(r.row.name, r.row.avatar, 22) }}
          <a class="nm-a" href="/d/{{ r.row.id }}">{{ r.row.name }}</a>
        </div>
        <div class="plat">{{ r.row.platform or '—' }} · {{ r.row.backend or '—' }}</div>
      </div>
      <div class="devfields">
        <div class="devfield">
          <div class="k">{{ tr('сотрудник') }}</div>
          {% if can_manage %}
          <form method="post" action="/devices/{{ r.row.id }}/assign">
            <input type="hidden" name="_csrf" value="{{ csrf_token() }}">
            <select class="sel sm" name="person" onchange="this.form.submit()"
                    aria-label="{{ tr('Сотрудник машины {name}').format(name=r.row.name) }}">
              <option value="">{{ tr('— не назначена —') }}</option>
              {% for p in people %}
              <option value="{{ p.id }}" {{ 'selected' if r.person and p.id == r.person.id }}>{{ p.name }}</option>
              {% endfor %}
            </select>
          </form>
          {% else %}
          <div class="v">{{ r.person.name if r.person else '—' }}</div>
          {% endif %}
        </div>
        <div class="devfield">
          <div class="k">{{ tr('группа') }}</div>
          {% if can_manage %}
          <form method="post" action="/devices/{{ r.row.id }}/group">
            <input type="hidden" name="_csrf" value="{{ csrf_token() }}">
            <select class="sel sm" name="department" onchange="this.form.submit()"
                    aria-label="{{ tr('Группа машины {name}').format(name=r.row.name) }}">
              <option value="">{{ tr('— вне групп —') }}</option>
              {% for d in departments %}
              <option value="{{ d.id }}" {{ 'selected' if r.row.department_id == d.id }}>{{ d.name }}</option>
              {% endfor %}
            </select>
          </form>
          {% else %}
          <div class="v">{{ r.department or '—' }}</div>
          {% endif %}
        </div>
        <div class="devfield">
          <div class="k">{{ tr('пояс') }}</div>
          <div class="v">{{ r.tz_label }} · {{ r.local_time }}</div>
        </div>
        <div class="devfield">
          <div class="k">{{ tr('прислано') }}</div>
          <div class="v">{{ tr('замеров {a} · скриншотов {b}').format(a=r.samples, b=r.shots) }}</div>
        </div>
      </div>
      <div class="acts">
        <form method="post" action="/devices/{{ r.row.id }}/pause">
          <input type="hidden" name="_csrf" value="{{ csrf_token() }}">
          <button class="btn out sm" type="submit">{{ tr('Продолжить') if r.row.paused else tr('Пауза') }}</button>
        </form>
        <form method="post" action="/devices/{{ r.row.id }}/enable">
          <input type="hidden" name="_csrf" value="{{ csrf_token() }}">
          <button class="btn out sm" type="submit">{{ tr('Включить') if not r.row.enabled else tr('Отключить') }}</button>
        </form>
      </div>
      {% include "_dev_edit.html" %}
    </div>
    {% endfor %}
  </div>
</div>

{# Группы машин — единица доступа: создать группу, положить в неё машины,
   выдать группу наблюдателю на «Доступе». Каталог правит только полный охват. #}
{% if can_groups or departments %}
<div class="card machwrap" style="margin-top:18px">
  <div class="card-h wsum">{{ tr('Группы') }}<span class="cnt">{{ departments|length }}</span>
    {% if can_groups %}
    <span class="mach-tools">
      <button class="iconbtn" type="button" title="{{ tr('Добавить группу') }}"
              aria-label="{{ tr('Добавить группу') }}"
              onclick="document.getElementById('addGroup').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>
    </span>
    {% endif %}
  </div>
  <p class="sub" style="margin-bottom:6px">{{ tr('Единица доступа: наблюдателю выдаётся группа, и он видит машины из неё.') }}
    {{ tr('Кому какая группа выдана —') }} <a class="accent" href="/users">{{ tr('на вкладке «Доступ»') }}</a>.</p>
  {% if departments %}
  <ul class="list">
    {% for d in departments %}
    <li class="dep">
      <div class="nm">{{ d.name }}</div>
      <div class="v muted" data-depcount="{{ d.id }}" data-tpl="{{ tr('машин {n}') }}">{{ tr('машин {n}').format(n=machines_in_dep.get(d.id, 0)) }}</div>
      {% if can_groups %}
      <form method="post" action="/devices/groups" style="margin:0"
            onsubmit='return confirm({{ tr("Удалить группу «{name}»? Машины останутся, но окажутся вне групп.").format(name=d.name)|tojson }})'>
        <input type="hidden" name="_csrf" value="{{ csrf_token() }}">
        <input type="hidden" name="action" value="delete">
        <input type="hidden" name="id" value="{{ d.id }}">
        <button class="btn out sm" type="submit">{{ tr('Удалить') }}</button>
      </form>
      {% endif %}
    </li>
    {% endfor %}
  </ul>
  {% else %}
  <div class="empty in-card">
    <b>{{ tr('Групп нет') }}</b>
    {{ tr('Пока их нет, доступ выдаётся сразу на всю компанию. Группа нужна, чтобы показать наблюдателю только часть машин — в ней может быть и одна машина, и много.') }}
  </div>
  {% endif %}
</div>
{% endif %}

{% if can_groups %}
<dialog id="addGroup" 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>
  <form class="formrow" method="post" action="/devices/groups">
    <input type="hidden" name="_csrf" value="{{ csrf_token() }}">
    <input type="hidden" name="action" value="add">
    <div class="field" style="flex:1 1 auto"><label for="gn">{{ tr('Название') }}</label>
      <input class="inp sm" id="gn" type="text" name="name" required maxlength="80"></div>
    <button class="btn sm" type="submit">{{ tr('Добавить') }}</button>
  </form>
</dialog>
{% endif %}

<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>
  <div class="connect-body">
    <p class="sub">{{ tr('Программы для Windows, macOS и Linux —') }}
      <a class="accent" href="/downloads">{{ tr('на странице загрузок') }}</a>.</p>
    {% if can('manage_settings') %}
    <div class="ccode-row">
      <input class="inp" id="ccode" type="password" readonly
             value="{{ connect_code }}" onfocus="this.select()"
             aria-label="{{ tr('код подключения') }}">
      <button class="btn sm" type="button" id="ccopy">{{ tr('Скопировать') }}</button>
    </div>
    <p class="sub">{{ tr('Отдайте этот код тому, кто ставит агента: в нём и адрес сервера, и ключ регистрации — программа спросит одну строку.') }}
      {{ tr('После первой связи агент получает личный токен, а ключ со своей машины стирает.') }}</p>
    {% else %}
    <p class="sub">{{ tr('Код подключения спросите у владельца или руководителя.') }}</p>
    {% endif %}
    <ol>
      <li><b>Windows:</b> {{ tr('распакуйте архив и запустите') }} <code>Setup.bat</code>.
        {{ tr('Для всего парка сразу — установщик') }} <code>Puntavia.msi</code> (msiexec).</li>
      <li><b>{{ tr('Несколько учётных записей на одном компьютере:') }}</b> {{ tr('из админской —') }}
        <code>install-for-user.bat</code>, {{ tr('он подготовит все учётки сразу.') }}</li>
      <li><b>Linux:</b> <code>./install.sh</code> {{ tr('от обычного пользователя.') }}</li>
      <li><b>macOS:</b> {{ tr('перетащить Puntavia в «Программы» и разрешить запись экрана.') }}</li>
      <li>{{ tr('Проверить связь на машине:') }} <code>python -m timelog status</code>.</li>
    </ol>
    <ul class="list" style="margin-top:6px">
      <li class="kv"><div class="k">{{ tr('адрес сервера') }}</div><div class="v">{{ server_url }}</div></li>
      <li class="kv"><div class="k">{{ tr('компания') }}</div><div class="v">{{ org.name }}</div></li>
      <li class="kv"><div class="k">{{ tr('ключ регистрации') }}</div>
        <div class="v">{{ tr('на странице «Настройки»') if can('manage_settings') else tr('спросите у владельца') }}</div></li>
    </ul>
  </div>
</dialog>

<script>
(function () {
  // Карточки / список — тот же приём, что у машин на дашборде, но свой ключ:
  // это страница управления, а не обзор. По умолчанию карточки — владелец
  // просил машины отдельными карточками, а не слитным списком (26.08).
  // Ключ с ".2": старый мог запомнить "list" до смены умолчания.
  var KEY = 'tl-devmanage-view.2';
  function get(){ try { return localStorage.getItem(KEY) || 'cards'; } catch(e){ return 'cards'; } }
  var listEl = document.getElementById('devList');
  var cardsEl = document.getElementById('devCards');
  var box = document.getElementById('devView');
  function apply(view){
    if(!listEl || !cardsEl || !box) return;
    listEl.hidden = view !== 'list';
    cardsEl.hidden = view !== 'cards';
    box.querySelectorAll('button').forEach(function(b){
      b.classList.toggle('on', b.dataset.view === view); });
  }
  if(box){
    box.querySelectorAll('button').forEach(function(b){
      b.onclick = function(){ try { localStorage.setItem(KEY, b.dataset.view); } catch(e){}
                              apply(b.dataset.view); };
    });
    apply(get());
  }
})();
(function () {
  // Выбор сотрудника или группы сохраняется без перезагрузки: submit на
  // каждый onchange заставлял страницу моргать (владелец, 26.08). Разметка
  // оставляет onchange=submit как запасной путь без JS, здесь он снимается.
  // На отказ сервера — честная перезагрузка, чтобы показать настоящее
  // состояние, а не притвориться, что сохранилось.
  function refreshGroupCounts() {
    var counts = {};
    // считаем по плиточному виду: в DOM каждый селект есть дважды
    // (список и карточки), одна машина не должна считаться за две
    document.querySelectorAll('#devCards form[action$="/group"] select')
      .forEach(function (s) { if (s.value) counts[s.value] = (counts[s.value] || 0) + 1; });
    document.querySelectorAll('[data-depcount]').forEach(function (el) {
      el.textContent = el.getAttribute('data-tpl')
        .replace('{n}', counts[el.getAttribute('data-depcount')] || 0);
    });
  }
  document.querySelectorAll('form[action$="/assign"] select, form[action$="/group"] select')
    .forEach(function (sel) {
      var form = sel.form;
      sel.onchange = null;
      sel.addEventListener('change', function () {
        fetch(form.action, {method: 'POST', body: new FormData(form)})
          .then(function (r) {
            if (!r.ok) { location.reload(); return; }
            // зеркалим выбор во второй вид (список/карточки) той же машины
            document.querySelectorAll('form[action="' + form.getAttribute('action') + '"] select')
              .forEach(function (s) { s.value = sel.value; });
            if (sel.name === 'department') refreshGroupCounts();
          })
          .catch(function () { location.reload(); });
      });
    });
})();
{% if can('manage_settings') %}
(function () {
  var btn = document.getElementById('ccopy');
  if (!btn) return;
  btn.addEventListener('click', function () {
    var b = document.getElementById('ccode');
    var done = function () { btn.textContent = {{ tr('Скопировано')|tojson }}; };
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(b.value).then(done, function () {});
    } else { b.focus(); b.select(); }
  });
})();
{% endif %}
</script>
</div>
{% endblock %}