{% 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-box-seam me-2"></i>Товары — {{ store.name }}</h1>
    <span class="text-muted small">Всего: {{ products | length }}</span>
</div>

{% if groups %}
<article class="card mb-3">
    <div class="card-body">
        <form method="get" class="d-flex gap-2 align-center flex-wrap">
            <select name="group" style="width:auto; margin:0;" onchange="this.form.submit()">
                <option value="">Все группы</option>
                {% for g in groups %}
                <option value="{{ g.evotor_id }}" {% if group_id == g.evotor_id %}selected{% endif %}>{{ g.name }}</option>
                {% endfor %}
            </select>
            {% if group_id %}
            <a href="/catalog/stores/{{ store.evotor_id }}/products" role="button" class="outline secondary sm">Сбросить</a>
            {% endif %}
        </form>
    </div>
</article>
{% endif %}

<article class="card">
    {% if products %}
    <div class="table-scroll">
        <table class="align-middle">
            <thead>
                <tr>
                    <th>Название</th>
                    <th>Артикул</th>
                    <th>Цена</th>
                    <th>Остаток</th>
                    <th>Ед.</th>
                    <th>Продаётся</th>
                    <th>Обновлено</th>
                </tr>
            </thead>
            <tbody>
                {% for p in products %}
                <tr>
                    <td>{{ p.name }}</td>
                    <td class="text-muted small">{{ p.article_number or '—' }}</td>
                    <td>{% if p.price is not none %}{{ p.price | price }}{% else %}—{% endif %}</td>
                    <td>{% if p.quantity is not none %}{{ p.quantity }}{% else %}—{% endif %}</td>
                    <td class="text-muted small">{{ p.measure_name or '—' }}</td>
                    <td>
                        {% if p.allow_to_sell %}
                            <i class="bi bi-check-circle text-success"></i>
                        {% elif p.allow_to_sell == false %}
                            <i class="bi bi-x-circle text-danger"></i>
                        {% else %}
                            <span class="text-muted">—</span>
                        {% endif %}
                    </td>
                    <td class="text-muted small">{{ p.fetched_at | datefmt }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="text-center py-5 text-muted">
        <i class="bi bi-box-seam" style="font-size:2rem;"></i>
        <p class="mt-2">Товары не найдены.</p>
    </div>
    {% endif %}
</article>
{% endblock %}