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

{% block title %}{% block og_title %}
{% if object %}{% if form.is_clone_from_url %}
Création d'une copie locale de {% else %}
Édition de l'événement {{ object.title }} ({{ object.start_day }})
{% endif %}
{% if form.is_simple_clone_from_url %}
Duplication de {% else %}
Édition de l'événement {{ object.title }} ({{ object.start_day }})
{% endif %}
{% else %}
    {% if from_import %}
    Ajuster l'événement importé
    {% else %}
    Ajouter un événement
    {% endif %}
{% endif %}
{% 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="{% url 'jsi18n' %}"></script>
<script src="/static/admin/js/vendor/jquery/jquery.js"></script>
<script src="/static/admin/js/jquery.init.js"></script>
<script src="/static/admin/js/admin/DateTimeShortcuts.js"></script>
<script src="{% static 'recurrence/js/recurrence.js' %}"></script>
<script src="{% static 'recurrence/js/recurrence.js' %}"></script>
<script src="/static/admin/js/admin/RelatedObjectLookups.js"></script>


<script>window.CKEDITOR_BASEPATH = '/static/ckeditor/ckeditor/';</script>
<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>
<script src="{% static 'js/adjust_datetimes.js' %}"></script>
{% endblock %}

{% block fluid %}{% if object %}-fluid{% endif %}{% 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 %}

{% if object %}

<article>
    <header>
<h1>{% if form.is_clone_from_url %}
    Création d'une copie locale de {% else %}
    {% if form.is_simple_clone_from_url %}
    Duplication de {% else %}
Édition de l'événement{% endif %}{% endif %} {{ object.title }} ({{ object.start_day }})</h1>
    {% if form.is_simple_clone_from_url %}
    <p>Vous allez créer une copie de l'événement original qui n'aura plus aucun lien avec ce dernier. Cette possibilité
        est généralement utilisée pour créer un événement semblable à une date différente, par exemple.
    </p>
    {% endif %}
    </header>

<div class="grid moderate-preview">
        
    <div id="event-preview">
        {% include "agenda_culturel/single-event/event-single-inc.html" with event=event nobuttons=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 %}


        <article>
            {% include "agenda_culturel/event-info-inc.html" %}
        </article>
    </div>
{% endif %}

<article id="event_form">
    <header>
        {% if object %}
            <h2>Édition des informations</h2>
        {% else %}
            {% if from_import %}
            <h1>Ajuster l'événement importé</h1>
            {% else %}
            <h1>Ajouter un événement</h1>
            <p>Si l'événement est déjà décrit en ligne (par exemple sur Facebook), vous pouvez tenter un <a href="{% url 'add_event_url' %}">import automatique</a>.</p>
            {% endif %}
        {% endif %}
    </header>


{% if form.is_clone_from_url or form.is_simple_clone_from_url %}
    {% url "add_event_details" as urlparam %}
{% endif %}
<form method="post" action="{{ urlparam }}" enctype="multipart/form-data">{% csrf_token %}
    {{ form.media }}
    {{ form }}
    <div class="grid buttons stick-bottom">
        <a href="{% if request.META.HTTP_REFERER %}{{ request.META.HTTP_REFERER }}{% else %}{{ object.get_absolute_url }}{% endif %}" role="button" class="secondary">Annuler</a>
        {% if form.is_simple_clone_from_url %}
        <input type="submit" value="Dupliquer et modérer">
        {% else %}
        <input type="submit" value="Enregistrer{% if form.is_clone_from_url %} et modérer{% endif %}">
        {% endif %}
    </div>
</form>

</article>
{% if object %}
</article>
</div>
{% endif %}

<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);
                    if (this.first_group !== null && choice.groupId == this.first_group)
                        i.classList.add("visible");
                    return i;
                },
                choiceGroup(classes, group) {
                    const g = Choices.defaults.templates.choiceGroup.call(this, classes, group);
                    if (this.first_group === undefined && group.value == "Suggestions")
                        this.first_group = group.id;
                    if (this.first_group !== null && group.id == this.first_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 %}