{% if not form.vars.valid %}
    <div class="alert alert-danger alert-dismissible" role="alert">
        <h5>Les erreurs a corriger !</h5>
        {% if not form.vars.valid %}
            <ul class="list-error">
                {% for error in form.vars.errors %}
                    <span class="title-error">{{ (error.origin.config.name)|trans([]) }}</span>
                    <li>{{ error.message }}</li>
                {% endfor %}
            </ul>
        {% endif %}
        {% for children in form.children %}
            {% if not children.vars.valid %}
                <span class="title-error"> {{ (children.vars.name)|trans([]) }}</span>
                <ul>
                    {% for error in children.vars.errors.form.getErrors(true) %}
                        <li>{{ error.message }}</li>
                    {% endfor %}
                </ul>
            {% endif %}
        {% endfor %}
    </div>
{% endif %}

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-info">
            <div class="panel-heading">
                Google Analytics / Google Ads
            </div>
            <div class="panel-body">
                <p class="text-muted">
                    Balises Google côté navigateur. Ces réglages pilotent GTM, GA4, Google Ads et les événements fixes envoyés par le thème.
                </p>
                {{ form_row(form.googleTagManagerId) }}
                {{ form_row(form.googleAnalyticsIds) }}
                {{ form_row(form.googleAdsConversionLabels) }}
                <hr>
                <p class="text-muted">
                    Les noms d’événements ci-dessous sont fixes dans le projet. L’admin permet uniquement de les activer ou de les désactiver.
                </p>
                {{ form_row(form.enableCheckoutEventTracking) }}
                {{ form_row(form.enablePaymentSuccessEventTracking) }}
                {{ form_row(form.enablePaymentErrorEventTracking) }}
                {{ form_row(form.enablePaymentCanceledEventTracking) }}
                {{ form_row(form.enableContactPageEventTracking) }}
                {{ form_row(form.enableContactSuccessEventTracking) }}
            </div>
        </div>
    </div>

    <div class="col-md-12">
        <div class="panel panel-info">
            <div class="panel-heading">
                Meta Instagram / Facebook
            </div>
            <div class="panel-body">
                <div class="alert alert-info">
                    <strong>Deux flux séparés :</strong>
                    le Pixel Meta navigateur sert à PageView et aux cookies _fbp/_fbc ;
                    Conversions API envoie les événements e-commerce côté serveur via Messenger async.
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <h4>Pixel navigateur</h4>
                        {{ form_row(form.enableMetaBrowserEventTracking) }}
                        {{ form_row(form.facebookPixelIds) }}
                    </div>
                    <div class="col-md-6">
                        <h4>Conversions API serveur</h4>
                        {{ form_row(form.enableMetaConversionsApiTracking) }}
                        {{ form_row(form.metaConversionsPixelConfigs) }}
                        {{ form_row(form.metaTestEventCode) }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-12">
        <div class="panel panel-info">
            <div class="panel-heading">
                Matomo
            </div>
            <div class="panel-body">
                <div class="alert alert-info">
                    <strong>Matomo est indépendant de Meta :</strong>
                    l’URL publique charge matomo.js côté navigateur, l’URL serveur sert aux événements e-commerce envoyés en async.
                </div>
                <p class="text-muted">
                    Le visitor ID Matomo est conservé dans l’attribution checkout quand il est disponible afin de rattacher achat, abandon et réactivation au parcours visiteur.
                </p>
                {{ form_row(form.matomoUrl) }}
                {{ form_row(form.matomoServerUrl) }}
                {{ form_row(form.matomoSiteId) }}
                {{ form_row(form.enableMatomoEcommerceTracking) }}
            </div>
        </div>
    </div>

    <div class="col-md-12">
        <div class="panel panel-info">
            <div class="panel-heading">
                Scripts personnalisés
            </div>
            <div class="panel-body">
                <p class="text-muted">
                    {{ 'admin.tracking.custom_scripts_help'|trans }}
                </p>
                {{ form_row(form.trackingHeadScripts) }}
                {{ form_row(form.trackingBodyScripts) }}
            </div>
        </div>
    </div>
</div>
{{ form_rest(form) }}
