{% extends "agenda_culturel/page.html" %}
{% load static %}
{% load utils_extra %}
{% load cat_extra %}


{% block title %}{% block og_title %}Modération de l'événement {{ object.title }}{% endblock %}{% endblock %}

{% block ajouter-bouton %}{% block ajouter-menu %}{% endblock %}{% endblock %}


{% block entete_header %}
<script src="{% static 'choicejs/choices.min.js' %}"></script>
    {% css_categories %}

    <script src="/static/admin/js/vendor/jquery/jquery.js"></script>
    <script src="/static/admin/js/jquery.init.js"></script>

    <link href="{% static 'css/django_better_admin_arrayfield.min.css' %}" type="text/css" media="all" rel="stylesheet">
    <script src="{% static 'js/django_better_admin_arrayfield.min.js' %}"></script>
{% endblock %}


{% block sidemenu-bouton %}
<li><a href="#event-preview" aria-label="Voir l'événement">{% picto_from_name "chevron-up" %}</a></li>
<li><a href="#event_form" aria-label="Aller au formulaire">{% picto_from_name "chevron-down" %}</a></li>
{% endblock %}

{% block content %}
{% load static_content_extra %}

<article>
    <header>
        <h1>Modération de l'événement {{ object.title }}</h1>
        <p class="remarque">En utilisant cet outil de modération, l'événement ne sera pas modifié{% if event.pure_import %}
            et restera considéré comme une version importée, peut importe les modifications d'étiquette,
            de catégorie ou de lieu que vous lui appliquerez{% endif %}.
        </p>
    </header>

<form method="post" enctype="multipart/form-data" id="moderate-form">{% csrf_token %}
    
    <div class="grid moderate-preview">
        
        <div id="event-preview">
            {% include "agenda_culturel/single-event/event-single-inc.html" with event=event onlyedit=1 permalink=1 h=2 %}

            {% with event.get_concurrent_events as concurrent_events %}
            {% if concurrent_events %}
                <article>
                    <header>
                        <h2>En même temps</h2>
                        <p class="remarque">{% if concurrent_events|length > 1 %}Plusieurs événements se déroulent en même temps.{% else %}Un autre événement se déroule en même temps.{% endif %}</p>
                    </header>
                        <ul>
                            {% for e in concurrent_events %}
                            <li>
                                {{ e.category|circle_cat }} {% if e.start_time %}{{ e.start_time }}{% else %}<em>toute la journée</em>{% endif %} <a href="{{ e.get_absolute_url }}">{{ e.title }}</a>
                            </li>
                            {% endfor %}
                        </ul>
                </article>
            {% endif %}
            {% endwith %}
    
        </div>
        
        <article id="event_form">
            <header>
            
                <h2>Édition des méta-informations</h2>
                {% if event.moderated_date %}
                <p class="message info">Cet événement a déjà été modéré {% if event.moderation_by_user %}par {<em>{ event.moderation_by_user.username }}</em> {% endif %}le {{ event.moderated_date }}. 
                    Vous pouvez bien sûr modifier de nouveau ces méta-informations en utilisant
                    le formulaire ci-après.
                </p>
                {% endif %}
            </header>
                {{ form.media }}
                {{ form.as_p }}
        </article>
    </div>
<div class="grid buttons">
    {% if pred %}
    <a href="{% url 'moderate_event' pred %}" class="secondary" role="button">&lt; Revenir au précédent</a>
    {% else %}
        <a href="{% if request.META.HTTP_REFERER %}{{ request.META.HTTP_REFERER }}{% else %}{{ object.get_absolute_url }}{% endif %}" role="button" class="secondary">Annuler</a>
    {% endif %}
    <input type="submit" value="Enregistrer" name="save">
    <input type="submit" value="Enregistrer et passer au suivant &gt;" name="save_and_next">
    <a href="{% url 'moderate_event_next' event.pk %}" class="secondary" role="button">Passer au suivant sans enregistrer &gt;</a>
</div>
</form>
</article>

<script>
    const element = document.querySelector('#id_exact_location');
    const choices = new Choices(element, {searchResultLimit: 10});

    show_firstgroup = {
                choice(classes, choice) {
                    const i = Choices.defaults.templates.choice.call(this, classes, choice);
                    i.classList.add("visible");
                    return i;
                },
                choiceGroup(classes, group) {
                    const g = Choices.defaults.templates.choiceGroup.call(this, classes, group);
                    g.classList.add("visible");
                    return g;
                }
    };
    const tags = document.querySelector('#id_tags');
    const choices_tags = new Choices(tags,
        {
            placeholderValue: 'Sélectionner les étiquettes à ajouter',
            allowHTML: true,
            delimiter: ',',
            removeItemButton: true,
            shouldSort: false,
            callbackOnCreateTemplates: () => (show_firstgroup)
        }
    );
    const organisers = document.querySelector('#id_organisers');
    const choices_organisers = new Choices(organisers,
        {
            placeholderValue: 'Sélectionner les organisateurs ',
            allowHTML: true,
            delimiter: ',',
            removeItemButton: true,
            shouldSort: true,
        });



</script>
{% endblock %}