{% extends 'layouts/app.html.twig' %}

{% block title %}Integracje | micey-projects{% endblock %}

{% block app_content %}
    {% include 'partials/_flash_messages.html.twig' %}

    <section class="panel">
        <div class="panel__header panel__header--space-between">
            <div>
                <p class="panel__eyebrow">Integracje</p>
                <h2 class="panel__title">Kanały i usługi zewnętrzne</h2>
                <p class="panel__text">Na tym etapie aktywna jest integracja PrestaShop. Pozostałe kafelki są przygotowane jako kierunek dalszej rozbudowy.</p>
            </div>
        </div>

        <div class="integration-grid">
            <a href="{{ path('app_prestashop_integration') }}" class="integration-card integration-card--active">
                <span class="integration-card__eyebrow">Aktywne</span>
                <strong>PrestaShop</strong>
                <span>Status: {{ prestashop_integration.status }}</span>
                <span>Ostatni ping: {{ prestashop_integration.lastPingAt ? prestashop_integration.lastPingAt|date('d-m-Y H:i') : '—' }}</span>
            </a>

            <a href="{{ path('app_google_drive_integration') }}" class="integration-card integration-card--active">
                <span class="integration-card__eyebrow">Etap 8A/8B</span>
                <strong>Google Drive</strong>
                <span>OAuth, folder Mockups i reguły zdjęć.</span>
            </a>

            {% for name in ['OpenAI', 'Etsy', 'Allegro', 'Amazon', 'eBay', 'Empik', 'Erli'] %}
                <div class="integration-card integration-card--disabled">
                    <span class="integration-card__eyebrow">Wkrótce</span>
                    <strong>{{ name }}</strong>
                    <span>Placeholder pod kolejny etap.</span>
                </div>
            {% endfor %}
        </div>
    </section>
{% endblock %}