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

{% block title %}Profile wariantów{% 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">Słowniki / Mapowania</p>
                <h2 class="panel__title">{{ editing_profile ? 'Edytuj profil wariantów' : 'Profile wariantów' }}</h2>
                <p class="panel__text">
                    Klasyczny profil wariantów wskazuje gotowy zestaw wartości atrybutów PrestaShop używany do generowania kombinacji.
                    W trybie JSON-expansion rozmiary i dopłaty ustawiasz w regułach model + kolor → rozmiary/ceny, więc ten widok jest opcjonalny.
                </p>
            </div>
            <div class="button-row">
                <a class="button button--ghost" href="{{ path('app_dictionaries_index') }}">Wróć do słowników</a>
            </div>
        </div>

        {{ form_start(form, { attr: { class: 'stack-form' } }) }}
            <div class="form-grid form-grid--two">
                {{ form_row(form.code) }}
                {{ form_row(form.name) }}
                {{ form_row(form.productType) }}
                {{ form_row(form.active) }}
            </div>

            {{ form_row(form.description) }}

            <div class="variant-values-box">
                <label class="form-label">{{ form.attributeValues.vars.label }}</label>
                {{ form_errors(form.attributeValues) }}

                <div class="variant-profile-values-grid">
                    {% for value in form.attributeValues %}
                        <label class="variant-attribute-pill">
                            {{ form_widget(value) }}
                            <span>{{ value.vars.label }}</span>
                        </label>
                    {% endfor %}
                </div>
            </div>

            <div class="form-actions">
                <button type="submit" class="button button--primary">
                    {{ editing_profile ? 'Zapisz zmiany' : 'Dodaj profil' }}
                </button>

                {% if editing_profile %}
                    <a class="button button--ghost" href="{{ path('app_variant_profiles') }}">Anuluj edycję</a>
                {% endif %}
            </div>
        {{ form_end(form) }}
    </section>

    <section class="panel">
        <h3 class="panel__section-title">Lista profili wariantów</h3>

        <div class="table-responsive">
            <table class="data-table">
                <thead>
                <tr>
                    <th>Kod</th>
                    <th>Nazwa</th>
                    <th>Typ produktu</th>
                    <th>Liczba wartości</th>
                    <th>Aktywny</th>
                    <th>Akcje</th>
                </tr>
                </thead>
                <tbody>
                {% for item in items %}
                    <tr>
                        <td><span class="mono-badge">{{ item.code }}</span></td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.productType ? item.productType.name : '—' }}</td>
                        <td>{{ item.items|length }}</td>
                        <td>
                            {% if item.active %}
                                <span class="text-badge">tak</span>
                            {% else %}
                                <span class="text-badge text-badge--muted">nie</span>
                            {% endif %}
                        </td>
                        <td>
                            <a class="button button--tiny" href="{{ path('app_variant_profile_edit', { id: item.id }) }}">Edytuj</a>
                        </td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="6">Brak profili wariantów.</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
{% endblock %}