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

{% block title %}Mapowanie SKU | Luminous{% endblock %}

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

    <div class="ops-page provider-page provider-sku-page">
        <section class="ops-hero">
            <div class="ops-hero__content">
                <span class="ops-kicker"><span class="ui-icon" aria-hidden="true">inventory_2</span>Dostawcy</span>
                <h1>Mapowanie SKU</h1>
                <p>Wybierz dostawcę, aby powiązać kompletne warianty produkcyjne z jego rzeczywistymi kodami SKU.</p>
            </div>
            <div class="ops-hero__actions">
                <a class="button button--ghost" href="{{ path('app_providers_index') }}">Lista dostawców</a>
            </div>
        </section>

        <section class="ops-card">
            <div class="ops-card__head">
                <span class="ops-card__eyebrow">Wybór dostawcy</span>
                <h2>Mapowania są przechowywane osobno dla każdego dostawcy</h2>
                <p>Jeden rekord oznacza bezpośrednie powiązanie: wariant produkcyjny → SKU dostawcy.</p>
            </div>

            <div class="provider-sku-provider-grid">
                {% for provider in providers %}
                    <a class="provider-sku-provider-card" href="{{ path('app_provider_sku_mapping', {id: provider.id}) }}">
                        <span class="provider-sku-provider-card__icon ui-icon">{{ provider.type == 'internal' ? 'factory' : 'cloud_sync' }}</span>
                        <span>
                            <strong>{{ provider.name }}</strong>
                            <small><code>{{ provider.code }}</code> · {{ provider.enabled ? 'aktywny' : 'wyłączony' }}</small>
                        </span>
                        <span class="ui-icon" aria-hidden="true">arrow_forward</span>
                    </a>
                {% else %}
                    <div class="ops-note ops-note--warm">Brak dostawców. Uruchom wcześniej komendę inicjalizującą moduł.</div>
                {% endfor %}
            </div>
        </section>
    </div>
{% endblock %}