{% if type == 'new' %}
    {{ form_start(form, {
        'action': path('declinaison_new'),
        'method': 'POST',
        'attr': { 'class': 'm-form m-form--fit m-form--label-align-right' }
    }) }}
{% else %}
    {{ form_start(form, {
        'action': path('declinaison_edit', { 'id': declinaison.id }),
        'method': 'POST',
        'attr': { 'class': 'm-form m-form--fit m-form--label-align-right' }
    }) }}
{% endif %}

<style>
    .decli-modal-header {
        border-bottom: 1px solid #eef1f5;
    }

    .decli-title-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
        color: #2563eb;
        font-size: 1rem;
        flex-shrink: 0;
    }

    .decli-subtitle {
        font-size: .82rem;
        color: #6b7280;
        margin-top: .15rem;
    }

    .decli-fieldset {
        border: 1px solid #e9edf3;
        border-radius: 14px;
        padding: 1rem 1rem .75rem;
        background: #fff;
    }

    .decli-fieldset + .decli-fieldset {
        margin-top: 1rem;
    }

    .decli-legend {
        font-size: .92rem;
        font-weight: 600;
        color: #1f2937;
        padding: 0 .35rem;
        margin-bottom: 0;
    }

    .decli-help-box {
        border: 1px dashed #dbe3ee;
        background: #f8fafc;
        border-radius: 12px;
        padding: .9rem 1rem;
    }

    .decli-help-title {
        font-size: .88rem;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: .25rem;
    }

    .decli-help-text {
        font-size: .8rem;
        color: #6b7280;
        margin: 0;
        line-height: 1.45;
    }

    .decli-values-textarea {
        min-height: 160px;
        resize: vertical;
        font-family: Consolas, "Courier New", monospace;
    }
</style>

<div class="modal-content">
    <div class="modal-header decli-modal-header">
        <div class="d-flex align-items-start gap-3">
            <span class="decli-title-icon">
                <i class="fa fa-layer-group"></i>
            </span>
            <div>
                <h5 class="modal-title mb-0">
                    {{ type == 'new' ? 'Ajouter une declinaison' : 'Modifier la declinaison' }}
                </h5>
                <div class="decli-subtitle">
                    Definissez le niveau, le nom et, si besoin, les valeurs associees a cette declinaison produit.
                </div>
            </div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
    </div>

    <div class="modal-body">
        {{ form_errors(form) }}

        <fieldset class="decli-fieldset">
            <legend class="decli-legend">
                <i class="fa fa-sliders-h me-2"></i>Informations generales
            </legend>

            <div class="row g-3 align-items-start">
                <div class="col-lg-4">
                    {{ form_label(form.position, null, {'label_attr': {'class': 'form-label fw-semibold'}}) }}
                    <div class="input-group">
                        <span class="input-group-text bg-light border-end-0">
                            <i class="fa fa-sort-numeric-down text-muted"></i>
                        </span>
                        {{ form_widget(form.position, {'attr': {'class': 'form-control border-start-0 m-input', 'placeholder': 'Ex. 1'}}) }}
                    </div>
                    <div class="form-text">
                        Niveau hierarchique de la declinaison : Couleur = 1, Taille = 2, etc.
                    </div>
                </div>

                <div class="col-lg-8">
                    {{ form_label(form.name, null, {'label_attr': {'class': 'form-label fw-semibold'}}) }}
                    <div class="input-group">
                        <span class="input-group-text bg-light border-end-0">
                            <i class="fa fa-tag text-muted"></i>
                        </span>
                        {{ form_widget(form.name, {'attr': {'class': 'form-control border-start-0 m-input', 'placeholder': 'Ex. Couleur, Taille, Matiere'}}) }}
                    </div>
                    <div class="form-text">
                        Utilisez un nom clair et court pour faciliter la lecture dans les fiches produit.
                    </div>
                </div>
            </div>
        </fieldset>

        {% if type == 'new' %}
            <fieldset class="decli-fieldset">
                <legend class="decli-legend">
                    <i class="fa fa-list-ul me-2"></i>Valeurs initiales
                </legend>

                <div class="decli-help-box mb-3">
                    <div class="decli-help-title">Saisie rapide</div>
                    <p class="decli-help-text">
                        Saisissez une valeur par ligne ou collez une liste separee par des virgules.
                        Exemple : Rouge, Bleu, Vert.
                    </p>
                </div>

                {{ form_widget(form.valuesText, {'attr': {'class': 'form-control m-input decli-values-textarea', 'placeholder': "Rouge\nBleu\nVert"}}) }}
            </fieldset>
        {% endif %}
    </div>

    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
        {{ form_widget(form.save, { 'attr': { 'class': 'btn btn-primary' }, 'label': 'Enregistrer' }) }}
    </div>
</div>

{{ form_end(form) }}