{% extends "base.html" %}
{% block title %}Магазины — Мои Товары{% endblock %}
{% block page_title %}Каталог Эвотор{% endblock %}

{% block content %}
<div class="pg-title">Магазины Эвотор</div>
<div class="pg-sub">Выберите магазины для синхронизации · Всего: {{ stores | length }}</div>

<div class="card" style="padding:0;">
  {% if stores %}
  <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 s in stores %}
        {% set is_enabled = (enabled_ids is none) or (s.evotor_id in enabled_ids) %}
        <tr>
          <td>
            <form method="post" action="/catalog/stores/{{ s.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">{{ s.name }}</div>
          </td>
          <td style="color:#9EA8BE;font-size:12px;">{{ s.address or '—' }}</td>
          <td><span class="mono" style="font-size:11px;color:#9EA8BE;">{{ s.evotor_id }}</span></td>
          <td><span class="mono" style="font-size:11px;color:#9EA8BE;">{{ s.fetched_at | datefmt }}</span></td>
          <td>
            <div style="display:flex;gap:6px;">
              <a href="/catalog/stores/{{ s.evotor_id }}/products" class="btn btn-outline btn-xs">
                <i class="bi bi-box-seam"></i> Товары
              </a>
              <a href="/catalog/stores/{{ s.evotor_id }}/groups" class="btn btn-outline btn-xs">
                <i class="bi bi-folder"></i> Группы
              </a>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div class="empty-state">
    <i class="bi bi-shop"></i>
    <p>Магазины ещё не загружены.<br>Синхронизация выполняется каждые {{ refresh_interval }} сек. автоматически.</p>
  </div>
  {% endif %}
</div>
{% endblock %}