{% extends "base.html" %}
{% import "_ui.html" as ui %}
{% block content %}
<div class="page-head">
  <div>
    <h1>Группы</h1>
    <div class="sub">{{ groups|length }} {{ groups|length|plural("группа", "группы", "групп") }} · {{ total }} {{ total|plural("устройство", "устройства", "устройств") }}</div>
  </div>
  <div class="actions">
    <button type="button" class="btn primary" hx-get="/ui/dialog/group" hx-target="#modal-body">{{ ui.icon("plus") }}Создать группу</button>
  </div>
</div>
{% if error %}<div class="form-err" role="alert" style="margin-bottom:16px">{{ error }}</div>{% endif %}
<div class="card">
  <table class="grid groups">
    <colgroup><col><col style="width:200px"><col style="width:120px"></colgroup>
    <thead><tr><th>Название</th><th>Устройства</th><th><span class="sr-only">Действия</span></th></tr></thead>
    <tbody>
    {% for g in groups %}
      <tr>
        <td style="font-weight:600">{{ g.name }}</td>
        <td><a href="/?f_group={{ g.id }}" style="font-weight:500">{{ g.device_count }} {{ g.device_count|plural("устройство", "устройства", "устройств") }}</a></td>
        <td class="c-menu">
          <details class="menu right">
            <summary class="btn ghost-n icon" aria-label="Действия для группы {{ g.name }}" title="Действия">{{ ui.icon("more") }}</summary>
            <div class="menu-panel w200">
              <button type="button" class="mi" hx-get="/ui/dialog/group/{{ g.id }}" hx-target="#modal-body">Переименовать</button>
              <button type="button" class="mi bad" hx-post="/groups/{{ g.id }}/delete"
                      hx-confirm="Удалить группу «{{ g.name }}»? Устройства останутся и станут «Без группы».">Удалить</button>
            </div>
          </details>
        </td>
      </tr>
    {% else %}
      <tr><td colspan="3" class="empty">Групп пока нет. Создайте первую.</td></tr>
    {% endfor %}
      <tr>
        <td class="muted" style="font-weight:600">Без группы</td>
        <td><a href="/?f_group=none" style="font-weight:500">{{ ungrouped }} {{ ungrouped|plural("устройство", "устройства", "устройств") }}</a></td>
        <td class="c-menu c-small">системная</td>
      </tr>
    </tbody>
  </table>
</div>
{% endblock %}