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

{% block title %}Rodzaje produktów | micey-projects{% endblock %}

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

    <section class="dictionary-layout">
        <article class="panel">
            <p class="panel__eyebrow">Słowniki / Mapowania</p>
            <h2 class="panel__title">Rodzaje produktów</h2>
            <p class="panel__text">
                Słownik typów produktów używany w projektach i przyszłych profilach wariantów.
            </p>

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

                <div class="form-actions">
                    <button type="submit" class="button button--primary">Dodaj rodzaj</button>
                </div>
            {{ form_end(form) }}
        </article>

        <article class="panel">
            <h3 class="panel__section-title">Lista rodzajów</h3>

            <div class="dictionary-list">
                {% if items is empty %}
                    <div class="empty-state empty-state--compact">
                        <strong>Brak zdefiniowanych rodzajów.</strong>
                        <span>Uruchom seed albo dodaj pierwszy wpis po lewej stronie.</span>
                    </div>
                {% else %}
                    {% for item in items %}
                        <div class="dictionary-item">
                            <span class="dictionary-item__id">#{{ item.id }}</span>
                            <strong>{{ item.name }}</strong>
                            <span class="mono-badge">{{ item.code ?: 'brak kodu' }}</span>
                            <span class="text-muted">{{ item.active ? 'aktywny' : 'nieaktywny' }}</span>
                        </div>
                    {% endfor %}
                {% endif %}
            </div>
        </article>
    </section>
{% endblock %}