{% extends "agenda_culturel/page.html" %}

{% block title %}{% block og_title %}Importer un ensemble d'événements{% endblock %}{% endblock %}

{% load static %}



{% block fluid %}{% endblock %}

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

{% block content %}

<article>
    <header>
        <h1>Importer un ensemble d'événements</h1>
        {% url 'event_import_urls' as local_url %}
        {% include "agenda_culturel/static_content.html" with name="import_set" url_path=local_url %}
    </header>

        <p>Si l'import automatique ne marche pas, ou si l'événement n'est pas en ligne, vous pouvez 
            tout de même ajouter l'événement en le décrivant sur la page <a href="{% url 'add_event_details' %}" >d'ajout d'événement</a>.</p>
    </article>


    <form method="post">

    {{ formset.management_form }}
        {% csrf_token %}
        {% if contactform %}
        <article>
        {{ contactform }}
        </article>
        {% endif %}

        {% for form in formset %}
        <article>
            <header>
                <h2>Nouvel événement #{{ forloop.counter }}</h2>
            </header>
            {{ form.as_p }}
        </article>
        {% endfor %}

        <div class="stick-bottom">
        <input type="submit"value="Lancer l'import" id="import-button">
        </div>
    </form>

    <script src="{% static 'choicejs/choices.min.js' %}"></script>
<script>
    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.querySelectorAll("select[name$='-tags']");
    Array.from(tags).forEach((element,index) => {
        console.log(element);
        const choices_tags = new Choices(element,
            {
                placeholderValue: 'Sélectionner les étiquettes à ajouter',
                allowHTML: true,
                delimiter: ',',
                removeItemButton: true,
                shouldSort: false,
                callbackOnCreateTemplates: () => (show_firstgroup)
            }
        );
    });

</script>
{% endblock %}
