{% extends "base.html" %}
{% block title %}Группы — {{ store.name }} — Мои Товары{% endblock %}
{% block page_title %}Каталог Эвотор{% endblock %}

{% block content %}
<ol class="breadcrumb">
  <li><a href="/catalog/stores">Магазины</a></li>
  <li>{{ store.name }}</li>
  <li>Группы</li>
</ol>

<div class="pg-title">Группы товаров — {{ store.name }}</div>
<div class="pg-sub">Управление категориями · Всего: {{ groups | length }}</div>

<div class="card" style="padding:0;">
  {% if groups %}
  <div class="table-wrap">
    <table class="tbl">
      <thead>
        <tr>
          <th>Синхронизация</th>
          <th>Группа</th>
          <th>Товаров</th>
          <th>ID</th>
          <th>Обновлено</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for g in groups %}
        {% set is_enabled = (enabled_ids is none) or (g.evotor_id in enabled_ids) %}
        <tr>
          <td>
            <form method="post" action="/catalog/stores/{{ store.evotor_id }}/groups/{{ g.evotor_id }}/toggle" style="margin:0;">
              <button type="submit" class="tog {% if is_enabled %}on{% endif %}"
                      title="{% if is_enabled %}Отключить синхронизацию{% else %}Включить синхронизацию{% endif %}"
                      style="border:none;background:none;padding:0;cursor:pointer;"></button>
            </form>
          </td>
          <td>
            <div class="tbl-name"><i class="bi bi-folder2" style="color:#9EA8BE;margin-right:6px;"></i>{{ g.name }}</div>
          </td>
          <td><span class="mono" style="font-size:12px;">{{ product_counts.get(g.evotor_id, 0) }}</span></td>
          <td><span class="mono" style="font-size:11px;color:#9EA8BE;">{{ g.evotor_id }}</span></td>
          <td><span class="mono" style="font-size:11px;color:#9EA8BE;">{{ g.fetched_at | datefmt }}</span></td>
          <td>
            <a href="/catalog/stores/{{ store.evotor_id }}/products?group={{ g.evotor_id }}" class="btn btn-outline btn-xs">
              <i class="bi bi-box-seam"></i> Товары
            </a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div class="empty-state">
    <i class="bi bi-folder"></i>
    <p>Группы для этого магазина ещё не загружены.</p>
  </div>
  {% endif %}
</div>
{% endblock %}