{% extends "base.html" %}
{% block title %}Синхронизация — EvoSync{% endblock %}

{% block content %}
<h1 class="h4 mb-4">Синхронизация</h1>

{% if not evotor %}
<div class="alert alert-warning d-flex align-items-center gap-2">
    <i class="bi bi-exclamation-triangle-fill"></i>
    <span>Эвотор не подключён. <a href="/evotor">Подключить Эвотор</a></span>
</div>
{% endif %}

{% if not vk %}
<div class="alert alert-warning d-flex align-items-center gap-2">
    <i class="bi bi-exclamation-triangle-fill"></i>
    <span>ВКонтакте не подключён. <a href="/vk">Подключить ВКонтакте</a></span>
</div>
{% endif %}

<div class="row g-3">

    {# ── Status card ── #}
    <div class="col-12 col-md-6">
        <div class="card shadow-sm h-100">
            <div class="card-body">
                <h5 class="card-title mb-3">Статус</h5>

                <div class="mb-3">
                    {% if status == "active" %}
                        <span class="badge bg-success fs-6"><i class="bi bi-play-fill me-1"></i>Активна</span>
                    {% elif status == "paused" %}
                        <span class="badge bg-secondary fs-6"><i class="bi bi-pause-fill me-1"></i>Приостановлена</span>
                    {% elif status == "pending" %}
                        <span class="badge bg-warning text-dark fs-6"><i class="bi bi-clock me-1"></i>Ожидает подтверждения</span>
                    {% else %}
                        <span class="badge bg-light text-dark border fs-6"><i class="bi bi-gear me-1"></i>Не настроено</span>
                    {% endif %}
                </div>

                {% if config.confirmed_at %}
                <p class="text-muted small mb-3">
                    Запущена: {{ config.confirmed_at.strftime("%d.%m.%Y %H:%M") }}
                </p>
                {% endif %}

                <div class="d-flex gap-2 flex-wrap">
                    {# Toggle enable/disable #}
                    <form method="post" action="/sync/toggle">
                        {% if config.is_enabled %}
                            <button type="submit" class="btn btn-outline-secondary btn-sm">
                                <i class="bi bi-pause-fill me-1"></i>Приостановить
                            </button>
                        {% else %}
                            <button type="submit" class="btn btn-outline-primary btn-sm" {% if not evotor or not vk %}disabled{% endif %}>
                                <i class="bi bi-play-fill me-1"></i>Включить
                            </button>
                        {% endif %}
                    </form>

                    {# Confirm button #}
                    {% if config.is_enabled and summary.total > 0 %}
                    <form method="post" action="/sync/confirm">
                        <button type="submit" class="btn btn-success btn-sm">
                            <i class="bi bi-check-lg me-1"></i>Подтвердить и запустить
                        </button>
                    </form>
                    {% endif %}
                </div>

                {% if config.is_enabled and summary.total == 0 %}
                <p class="text-muted small mt-2 mb-0">
                    <i class="bi bi-info-circle me-1"></i>Настройте фильтры, чтобы подтвердить запуск.
                </p>
                {% endif %}
            </div>
        </div>
    </div>

    {# ── Filters card ── #}
    <div class="col-12 col-md-6">
        <div class="card shadow-sm h-100">
            <div class="card-body">
                <h5 class="card-title mb-3">Фильтры</h5>

                {% if summary.total > 0 %}
                <ul class="list-unstyled mb-3">
                    {% if summary.stores > 0 %}
                    <li class="text-muted small"><i class="bi bi-shop me-1"></i>Магазины: {{ summary.stores }} правил</li>
                    {% endif %}
                    {% if summary.groups > 0 %}
                    <li class="text-muted small"><i class="bi bi-folder me-1"></i>Группы: {{ summary.groups }} правил</li>
                    {% endif %}
                    {% if summary.products > 0 %}
                    <li class="text-muted small"><i class="bi bi-box me-1"></i>Товары: {{ summary.products }} правил</li>
                    {% endif %}
                </ul>
                {% else %}
                <p class="text-muted small mb-3">Фильтры не настроены — будут синхронизированы все товары.</p>
                {% endif %}

                <a href="/catalog" class="btn btn-outline-primary btn-sm" {% if not evotor %}disabled{% endif %}>
                    <i class="bi bi-sliders me-1"></i>Настроить фильтры
                </a>
            </div>
        </div>
    </div>

</div>
{% endblock %}