{% extends 'base.html.twig' %}

{% block title %}Edit Article{% endblock %}

{% block body %}
    <h1 class="wrap text-light font-h text-center">MODIFIEZ UN ARTICLE</h1>

    <div class="wrap d-grid mh-4">
        <div class="admin-buttons mb-4">
            <div class="d-grid w-auto">
                <a class="button" href="{{ path('app_news_show', {'id': article.id}) }}">
                    <i class="fa-solid fa-rotate-left mr-1"></i> Annuler les modifications
                </a>
            </div>

            <div class="d-grid w-auto">
                <a class="button button-success" href="{{ path('app_news_gallery_image_new', {'id': article.id}) }}">
                    <i class="fa-solid fa-image mr-1"></i> Ajouter une image
                </a>
            </div>

            <div class="d-grid w-auto">
                <a class="button button-success" href="{{ path('app_news_gallery_image_new', {'id': article.id}) }}">
                    <i class="fa-solid fa-film mr-1"></i> Ajouter une vidéo
                </a>
            </div>

            <div class="d-grid w-auto">
                {% include 'news/_delete_form.html.twig' with {'article': {'id': article.id}} %}
            </div>
        </div>


        {{ include('news/_form.html.twig', {'button_label': 'Enregistrer'}) }}


        <div class="bg-white p-4 pt-0">
            <div class="text-center m-0 mb-3 p-0 ph-1">
                Cliquez une image pour la définir comme image principale (indiquée par une bordure verte).<br><br>L'image principale est affichée dans la carte d'aperçu de l'article.
            </div>

            <div class="media-gallery">
                {% for image in article.getListeImages() %}
                    <div>
                        <a href="{{ path('app_news_gallery_image_select', {'id': article.getId(), 'image': image.getIdImage().getId()}) }}">
                            <div class="{{image.getIdImage().getId() == article.getIdImage().getId() ? 'chosen' : 'border-highlight'}}">
                                <img class="media-thumbnail" src="{{ vich_uploader_asset(image.getIdImage()) }}" alt="{{ image.getIdImage().getTexteAlt() }}">
                            </div>
                        </a>
                        <div class="d-grid input-2">
                            <a 
                                class="button button-danger button-max text-center" 
                                href="{{ path('app_news_gallery_image_remove', {'id': article.getId(), 'image': image.getIdImage().getId()}) }}"
                            >
                                <i class="fa-solid fa-trash-can mr-1"></i> Retirer de la galerie
                            </a>
                        </div>
                    </div>
                {% endfor %}

                {% for video in article.getListeVideos() %}
                    <div>
                        <video class="media-thumbnail" src="{{ vich_uploader_asset(image.getIdVideo()) }}" width="320" height="240" controls loop></video> 
                        <div class="d-grid">
                            <a 
                                class="button button-danger button-max text-center" 
                                href="{{ path('app_news_gallery_image_remove', {'id': article.getId(), 'image': image.getIdImage().getId()}) }}"
                            >
                                <i class="fa-solid fa-trash-can mr-1"></i> Retirer de la galerie
                            </a>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}