{% set selected_project = item_form.project.vars.data %}
{% set selected_variant = item_form.projectProductionVariant.vars.data %}
{% set item_id = item_form.id.vars.value|default(null) %}
{% set existing_mockup = item_id and manual_item_mockups[item_id] is defined ? manual_item_mockups[item_id] : null %}

<div class="manual-order-item__header">
    <div class="manual-order-item__identity">
        <span class="ops-card__eyebrow">Dodany projekt</span>
        <h3 data-manual-order-project-title>{{ selected_project ? selected_project.name : 'Projekt do uzupełnienia' }}</h3>
        <p data-manual-order-project-meta>
            {% if selected_project %}
                {{ selected_project.symbol }}{% if selected_project.productType %} · {{ selected_project.productType.name }}{% endif %}
            {% else %}
                Wybierz projekt z wyszukiwarki powyżej.
            {% endif %}
        </p>
    </div>
    <button type="button" class="button button--small button--danger" data-manual-remove-item data-action="manual-order#removeItem">
        <span class="ui-icon">delete</span>Usuń
    </button>
</div>

{{ form_errors(item_form) }}
{{ form_widget(item_form.id) }}
{{ form_widget(item_form.externalId) }}
<div class="manual-order-item__project-control-wrap" aria-hidden="true">
    {{ form_widget(item_form.project) }}
    {{ form_errors(item_form.project) }}
</div>

<div class="manual-order-item__content">
    <section class="manual-order-item__section manual-order-item__section--mapping">
        <div class="manual-order-section-heading">
            <div>
                <span class="ops-card__eyebrow">Konfiguracja</span>
                <h4>Wariant i dane pozycji</h4>
            </div>
            <span class="manual-order-variant-status" data-manual-order-variant-status aria-live="polite">
                {{ selected_variant ? 'Wariant wybrany' : 'Wybierz wariant' }}
            </span>
        </div>

        <div class="ops-form-grid ops-form-grid--2 manual-order-item__mapping">
            {{ form_row(item_form.projectProductionVariant) }}
            {{ form_row(item_form.name) }}
        </div>

        <div class="ops-form-grid ops-form-grid--3 manual-order-item__details">
            {{ form_row(item_form.quantity) }}
            {{ form_row(item_form.unitPrice) }}
            {{ form_row(item_form.taxRate) }}
        </div>

        {{ form_row(item_form.productionNote) }}
    </section>

    <section class="manual-order-item__section manual-order-item__section--mockup">
        <div class="manual-order-section-heading">
            <div>
                <span class="ops-card__eyebrow">Mockup</span>
                <h4>Plik przypisany do pozycji</h4>
                <p>Mockup jest wymagany do poprawnej realizacji ręcznego zamówienia.</p>
            </div>
            <span class="ops-badge {{ existing_mockup and existing_mockup.ready ? 'ops-badge--success' : 'ops-badge--warning' }}" data-manual-order-mockup-status>
                {{ existing_mockup ? existing_mockup.statusLabel : 'Brak wgranego mockupu' }}
            </span>
        </div>

        <div class="manual-order-mockup-editor">
            <div class="manual-order-mockup-preview {{ existing_mockup and existing_mockup.url ? 'is-ready' : 'is-empty' }}" data-manual-order-mockup-preview-wrap>
                <img
                    src="{{ existing_mockup and existing_mockup.url ? existing_mockup.url : '' }}"
                    alt="Podgląd mockupu"
                    data-manual-order-mockup-preview
                    {{ existing_mockup and existing_mockup.url ? '' : 'hidden' }}
                >
                <div class="manual-order-mockup-placeholder" data-manual-order-mockup-placeholder {{ existing_mockup and existing_mockup.url ? 'hidden' : '' }}>
                    <span class="ui-icon">add_photo_alternate</span>
                    <strong>Wgraj mockup</strong>
                    <small>JPG, PNG lub WEBP</small>
                </div>
            </div>
            <div class="manual-order-mockup-fields">
                {{ form_row(item_form.mockupFile) }}
                {{ form_row(item_form.mockupNote) }}
                {% if existing_mockup %}
                    <p class="manual-order-existing-mockup-note">
                        Aktualny plik: <strong>{{ existing_mockup.sourceLabel }}</strong>. Wybranie nowego pliku zastąpi aktywny mockup po zapisaniu formularza.
                    </p>
                {% else %}
                    <p class="manual-order-existing-mockup-note">Podgląd projektu z wyszukiwarki jest tylko pomocą. Do realizacji wgraj finalny mockup tej pozycji.</p>
                {% endif %}
            </div>
        </div>
    </section>

    {% set personalization_prototype %}
        <div class="manual-order-personalization" data-manual-personalization-row>
            {{ form_row(item_form.personalizations.vars.prototype.label) }}
            {{ form_row(item_form.personalizations.vars.prototype.key) }}
            {{ form_row(item_form.personalizations.vars.prototype.type) }}
            {{ form_row(item_form.personalizations.vars.prototype.value) }}
            <button type="button" class="button button--small button--ghost" data-manual-remove-personalization data-action="manual-order#removePersonalization">Usuń pole</button>
        </div>
    {% endset %}

    <section class="manual-order-item__section manual-order-personalizations-section">
        <div class="manual-order-personalizations-section__head">
            <div>
                <span class="ops-card__eyebrow">Personalizacja</span>
                <h4>Pola personalizacji</h4>
            </div>
            <button type="button" class="button button--small button--ghost" data-manual-add-personalization data-action="manual-order#addPersonalization">
                <span class="ui-icon">add</span>Dodaj pole
            </button>
        </div>

        {{ form_errors(item_form.personalizations) }}
        <div
            class="manual-order-personalizations"
            data-manual-personalizations
            data-index="{{ item_form.personalizations|length }}"
            data-prototype="{{ personalization_prototype|e('html_attr') }}"
        >
            {% for personalization_form in item_form.personalizations %}
                <div class="manual-order-personalization" data-manual-personalization-row>
                    {{ form_row(personalization_form.label) }}
                    {{ form_row(personalization_form.key) }}
                    {{ form_row(personalization_form.type) }}
                    {{ form_row(personalization_form.value) }}
                    <button type="button" class="button button--small button--ghost" data-manual-remove-personalization data-action="manual-order#removePersonalization">Usuń pole</button>
                </div>
            {% endfor %}
        </div>
    </section>
</div>