{% set form_action = form_action|default('') %}
{% set submit_name = submit_name|default('add_save') %}
{% set button_label = button_label|default('Enregistrer') %}
{% set modal_title = modal_title|default(slider.id ? 'Modifier ce slider' : 'Créer un nouveau slider') %}
<div class="slider-form-card bg-white rounded-3 shadow-sm border h-100">
    <div class="slider-form-card__header bg-gradient p-4 text-white rounded-3 d-flex justify-content-between align-items-start flex-wrap gap-3">
        <div>
            <p class="text-uppercase text-white-50 small mb-2">Slider principal</p>
            <h3 class="mb-1">{{ modal_title }}</h3>
            <p class="mb-0 small text-white-75">Une seule image, un message clair et un CTA orienté action. Les informations saisies seront visibles dans la vitrine.</p>
        </div>
        <span class="badge bg-light text-dark fs-6 align-self-center">
            {{ slider.id ? 'ID ' ~ slider.id : 'Nouveau' }}
        </span>
    </div>
    <form class="slider-form p-4" action="{{ form_action }}" method="post" enctype="multipart/form-data">
        <div class="row g-4">
            <div class="col-lg-5">
            <div class="border rounded-3 p-3 bg-light slider-form-image-wrapper">
                {% set currentMode = slider.displayMode ?: 'full' %}
                <div class="slider-form-image__media ratio-{{ currentMode == 'asset' ? '4-5' : '46-9' }}"
                     data-current-mode="{{ currentMode }}"
                     data-ratio-full="46-9"
                     data-ratio-asset="4-5">
                    <img id="sliderPreview"
                         src="{{ slider.image ? asset(slider.image) : asset('images/no-image.jpg') }}"
                         data-placeholder="{{ asset('images/no-image.jpg') }}"
                         alt="Aperçu slider"
                         class="slider-form-image">
                    <div class="slider-form-image__actions position-absolute top-0 end-0 d-flex gap-1 p-2">
                        <button type="button" class="btn btn-sm btn-light shadow slider-form-action" data-slider-action="reset" title="Annuler le chargement">
                            <i class="fa fa-undo"></i>
                        </button>
                        <button type="button" class="btn btn-sm btn-light shadow slider-form-action" data-slider-action="delete" title="Supprimer l'image">
                            <i class="fa fa-trash-alt text-danger"></i>
                        </button>
                    </div>
                </div>
                <label class="btn btn-primary w-100 text-center slider-form-image-label mt-2">
                    <i class="fa fa-upload me-2"></i>
                    <span>Changer l'image</span>
                    <input type="file" name="logo" accept="image/*" class="slider-image-input d-none">
                </label>
                <small class="text-muted mt-2">PNG/JPG, WebP (< 5 Mo). L'image sera redimensionnée automatiquement.</small>
                <input type="hidden" name="image_action" class="slider-image-action" value="">
                <input type="hidden" name="existing_image" value="{{ slider.image }}">
            </div>
            </div>
            <div class="col-lg-7">
                <div class="mb-3">
                    <label class="form-label fw-semibold">Titre</label>
                    <input type="text" name="title" class="form-control form-control-lg" placeholder="Titre court (≤ 6 mots)" value="{{ slider.title }}">
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Description</label>
                    <textarea name="description" id="slider_description" rows="4" class="form-control" placeholder="Sous-titre orienté bénéfice">{{ slider.description }}</textarea>
                </div>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Texte du bouton</label>
                        <input type="text" name="cta_label" class="form-control" placeholder="J'en profite" value="{{ slider.ctaLabel }}">
                        <small class="text-muted">CTA unique, orienté action.</small>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Lien</label>
                        <input type="url" name="url" class="form-control" placeholder="https://..." value="{{ slider.url }}">
                        <small class="text-muted">URL cible ou laissez vide pour pas de bouton.</small>
                    </div>
                </div>
                <div class="mt-4">
                    <p class="form-label fw-semibold mb-2">Mode d’affichage</p>
                    <div class="btn-group btn-group-toggle w-100" data-bs-toggle="buttons">
                    <label class="btn btn-primary {% if currentMode != 'asset' %}active{% endif %}">
                        <input type="radio" name="displayMode" value="full" autocomplete="off" {{ currentMode != 'asset' ? 'checked' : '' }}> Slider complet
                    </label>
                    <label class="btn btn-primary {% if currentMode == 'asset' %}active{% endif %}">
                        <input type="radio" name="displayMode" value="asset" autocomplete="off" {{ currentMode == 'asset' ? 'checked' : '' }}> Image seule (asset)
                    </label>
                    </div>
                    <small class="text-muted d-block mt-1">Choisissez si la vignette reste seule ou si elle doit s’intégrer dans un slider existant.</small>
                </div>
                <div class="form-check form-switch form-switch-lg mt-3">
                    <input class="form-check-input" type="checkbox" name="is_active" id="sliderActiveSwitch" value="1" {{ slider.isActive ? 'checked' : '' }}>
                    <label class="form-check-label" for="sliderActiveSwitch">Activer le slider</label>
                </div>
            </div>
        </div>
        <div class="d-flex justify-content-end gap-2 mt-4">
            <button type="button" class="btn btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
            <button type="submit" name="{{ submit_name|default('add_save') }}" class="btn btn-success px-4">
                {{ button_label ?: 'Enregistrer' }}
            </button>
        </div>
    </form>
</div>
<script>
    (function () {
        var container = document.currentScript?.closest('.slider-form-card');
        if (!container) return;
        var media = container.querySelector('.slider-form-image__media');
        var modeInputs = container.querySelectorAll('input[name="displayMode"]');
        if (!media || modeInputs.length === 0) return;

        var ratioFor = {
            full: media.dataset.ratioFull || '46-9',
            asset: media.dataset.ratioAsset || '4-5'
        };

        var toggleRatio = (mode) => {
            var ratioClass = `ratio-${ratioFor[mode] || '46-9'}`;
            media.classList.remove('ratio-46-9', 'ratio-4-5');
            media.classList.add(ratioClass);
            media.dataset.currentMode = mode;
        };

        modeInputs.forEach((input) => {
            input.addEventListener('change', () => {
                if (input.checked) {
                    toggleRatio(input.value);
                }
            });
        });
    })();
</script>