{% extends "base.html" %}
{% block title %}Группы — {{ store.name }} — ЭВОСИНК{% endblock %}

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

<div class="d-flex justify-between align-center mb-3">
    <h1 style="font-size:1.3rem; margin:0;"><i class="bi bi-folder me-2"></i>Группы товаров — {{ store.name }}</h1>
    <span class="text-muted small">Всего: {{ groups | length }}</span>
</div>

<article class="card">
    {% if groups %}
    <div class="table-scroll">
        <table class="align-middle">
            <thead>
                <tr>
                    <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 class="{% if not is_enabled %}text-muted{% endif %}">
                    <td>
                        <form method="post" action="/catalog/stores/{{ store.evotor_id }}/groups/{{ g.evotor_id }}/toggle" style="margin:0;">
                            <button type="submit"
                                class="outline sm {% if is_enabled %}success{% else %}secondary{% endif %}"
                                title="{% if is_enabled %}Отключить синхронизацию{% else %}Включить синхронизацию{% endif %}"
                                style="padding:0.2rem 0.6rem;">
                                {% if is_enabled %}
                                    <i class="bi bi-toggle-on"></i>
                                {% else %}
                                    <i class="bi bi-toggle-off"></i>
                                {% endif %}
                            </button>
                        </form>
                    </td>
                    <td><i class="bi bi-folder2 me-1 text-muted"></i> <strong>{{ g.name }}</strong></td>
                    <td class="text-muted small">{{ g.evotor_id }}</td>
                    <td class="text-muted small">{{ g.fetched_at | datefmt }}</td>
                    <td>
                        <a href="/catalog/stores/{{ store.evotor_id }}/products?group={{ g.evotor_id }}" role="button" class="outline sm">
                            <i class="bi bi-box-seam"></i> Товары
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="text-center py-5 text-muted">
        <i class="bi bi-folder" style="font-size:2rem;"></i>
        <p class="mt-2">Группы для этого магазина ещё не загружены.</p>
    </div>
    {% endif %}
</article>
{% endblock %}