{#
  Composant de gestion des medias Pimcore

  Parametres:
    media: {
      label: string,              # "Image", "Affiche", "Logo"
      currentUrl: string,         # URL image formatee
      originalUrl: string|null,   # URL image originale (optionnel)
      showOriginal: bool,         # Afficher l'originale?
      pimcoreDeeplink: string,    # Lien edition Pimcore
      formFieldName: string,      # "form[plaImage]"
      deleteRoute: string,        # Nom de la route Symfony
      deleteRouteParams: array    # Parametres pour la route
    }
    modalId: string|null          # ID unique pour la modale (optionnel, genere automatiquement)
#}

{% set modalId = modalId|default('deleteMediaModal_' ~ random()) %}
{% set hasRealImage = media.currentUrl is defined and 'dummyimage.com' not in media.currentUrl %}
{% set inputId = 'input-media-' ~ random() %}

<label for="{{ inputId }}" class="form-label text-muted small">{{ media.label|default('Image') }}</label>

{% if media.error|default(false) %}
    <div class="alert alert-warning py-2 mb-2">
        <i class="fas fa-exclamation-triangle me-1"></i>
        {{ media.errorMessage|default("Image impossible à récupérer") }}
    </div>
{% endif %}

{% if media.currentUrl is defined and media.currentUrl and not media.error|default(false) %}
    <div class="mb-2">
        {# Image formatee #}
        <div class="d-flex align-items-start gap-2 mb-2">
            <div class="position-relative">
                <img src="{{ media.currentUrl }}" alt="{{ media.label|default('Image') }} actuelle" class="img-thumbnail" style="max-height: 150px;">
                {% if hasRealImage %}
                    <span class="badge bg-secondary position-absolute bottom-0 start-0 m-1" style="font-size: 0.65rem;">Formatee</span>
                {% endif %}
            </div>
            {% if hasRealImage %}
                <div class="d-flex flex-column gap-2">
                    {% if media.pimcoreDeeplink is defined and media.pimcoreDeeplink %}
                        <a href="{{ media.pimcoreDeeplink }}" target="_blank" class="btn btn-primary"
                           title="Editer dans Pimcore">
                            <i class="fas fa-external-link-alt me-1"></i> Pimcore
                        </a>
                    {% endif %}
                    <button type="button" class="btn btn-danger"
                            data-bs-toggle="modal" data-bs-target="#{{ modalId }}"
                            title="Supprimer l'image">
                        <i class="fas fa-trash me-1"></i> Supprimer
                    </button>
                </div>
            {% endif %}
        </div>

        {# Image originale (accordeon) #}
        {% if hasRealImage and media.showOriginal|default(false) and media.originalUrl is defined and media.originalUrl %}
            <div class="accordion accordion-flush" id="accordionOriginal{{ modalId }}">
                <div class="accordion-item border-0">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed py-2 px-0 bg-transparent" type="button"
                                data-bs-toggle="collapse" data-bs-target="#collapseOriginal{{ modalId }}"
                                aria-expanded="false" aria-controls="collapseOriginal{{ modalId }}"
                                style="font-size: 0.85rem;">
                            <i class="fas fa-image me-2"></i> Voir l'originale
                        </button>
                    </h2>
                    <div id="collapseOriginal{{ modalId }}" class="accordion-collapse collapse"
                         data-bs-parent="#accordionOriginal{{ modalId }}">
                        <div class="accordion-body px-0 pt-2 pb-0">
                            <div class="position-relative d-inline-block">
                                <img src="{{ media.originalUrl }}" alt="{{ media.label|default('Image') }} originale"
                                     class="img-thumbnail" style="max-height: 200px;">
                                <span class="badge bg-info position-absolute bottom-0 start-0 m-1" style="font-size: 0.65rem;">Originale</span>
                            </div>
                            <div class="mt-2">
                                <a href="{{ media.originalUrl }}" target="_blank" class="btn btn-secondary btn-sm">
                                    <i class="fas fa-expand me-1"></i> Ouvrir en taille reelle
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>
{% endif %}

<input type="file" name="{{ media.formFieldName }}" class="form-control" id="{{ inputId }}"
       accept="image/*"
       onchange="handleFileSelect(event, '{{ inputId }}_preview')">
<div id="{{ inputId }}_preview" class="mt-2"></div>

<script>
    if (typeof window.handleFileSelect !== 'function') {
        window.handleFileSelect = function (event, previewId) {
            const preview = document.getElementById(previewId);
            if (!preview) return;
            preview.innerHTML = '';
            const file = event.target.files && event.target.files[0];
            if (!file) return;
            if (file.type && file.type.startsWith('image/')) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    preview.innerHTML =
                        '<div class="mt-2"><img src="' + e.target.result + '" alt="Aperçu" class="img-thumbnail" style="max-height:150px;">' +
                        '<div class="small text-muted mt-1">Nouvelle image (non enregistrée) — ' +
                        file.name + ' — ' + Math.round(file.size / 1024) + ' Ko</div></div>';
                };
                reader.readAsDataURL(file);
            } else {
                preview.textContent = file.name + ' (' + Math.round(file.size / 1024) + ' Ko)';
            }
        };
    }
</script>

{# Modale de confirmation de suppression #}
{% if hasRealImage %}
<div class="modal fade" id="{{ modalId }}" tabindex="-1" aria-labelledby="{{ modalId }}Label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="{{ modalId }}Label">Confirmer la suppression</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <div class="modal-body">
                <p>Voulez-vous vraiment supprimer cette image ?</p>
                <p class="text-muted small">Cette action est irreversible.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <a href="{{ path(media.deleteRoute, media.deleteRouteParams) }}" class="btn btn-danger">
                    <i class="fas fa-trash me-2"></i>Supprimer
                </a>
            </div>
        </div>
    </div>
</div>
{% endif %}