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

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

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

    <div class="ops-page provider-page">
        <section class="ops-hero">
            <div class="ops-hero__content">
                <span class="ops-kicker"><span class="ui-icon" aria-hidden="true">{{ icon }}</span>Dostawcy</span>
                <h1>{{ title }}</h1>
                <p>{{ description }}</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">Przygotowana sekcja</span>
                <h2>Mapowanie zostanie dodane w kolejnym etapie</h2>
                <p>
                    Ten etap tworzy wspólną warstwę dostawców, ustawień, adapterów i logów. Nie tworzy jeszcze modeli mapowań
                    ani wysyłki zamówień, aby nie narzucać przedwcześnie struktury realizacji.
                </p>
            </div>

            <div class="ops-stack">
                {% for provider in providers %}
                    <article class="ops-subcard">
                        <div class="ops-subcard__head">
                            <strong>{{ provider.name }}</strong>
                            <span>{{ provider.type == 'internal' ? 'dostawca wewnętrzny' : 'dostawca zewnętrzny' }}</span>
                        </div>
                        <div class="ops-meta-line">
                            {% for capability in provider.capabilitiesJson %}
                                <span class="ops-chip">{{ capability }}</span>
                            {% else %}
                                <span class="text-muted">Brak zapisanych możliwości adaptera.</span>
                            {% endfor %}
                        </div>
                    </article>
                {% else %}
                    <div class="ops-note ops-note--warm">Najpierw uruchom komendę inicjalizującą dostawców.</div>
                {% endfor %}
            </div>
        </section>
    </div>
{% endblock %}