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

{% block title %}{% block og_title %}Importer un événement{% endblock %}{% endblock %}

{% load static %}

{% block fluid %}{% endblock %}

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


{% block content %}

<article>
    <header>
        <h1>Importer un événement</h1>
        {% url 'event_import_url' as local_url %}
        {% include "agenda_culturel/static_content.html" with name="import" url_path=local_url %}
    </header>
        <div id="container"></div>
        <form method="post" action="">
            {% csrf_token %}
            {{ form.media }}
            {{ form }}
            <input type="submit" value="Lancer l'import" id="import-button">
        </form>
        <p>Si tu as plein d'événements à ajouter, tu peux les <a href="{% url 'add_event_urls' %}" >ajouter par lots</a>.</p>


        <p>Si l'import automatique ne marche pas, ou si l'événement n'est pas en ligne, tu peux 
            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>

<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.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)
        }
    );

</script>
{% endblock %}
