{% extends "agenda_culturel/page-admin.html" %}
{% load static %}
{% block title %}
  {% block og_title %}Importation manuelle{% endblock %}
{% endblock %}
{% block content %}
  <div class="grid two-columns">
    <article>
      <header>
        <h1>Importation manuelle</h1>
      </header>
      <p>
        Le formulaire ci-dessous permet d'importer des événements par lot. Deux formats sont actuellement disponibles&nbsp;:
      </p>
      <ul>
        <li>
          <strong>Format json&nbsp;:</strong> format structuré tel qu'attendu par l'importateur. Voir <a href="https://forge.chapril.org/jmtrivial/agenda_culturel/wiki/Import-JSON">la documentation sur le wiki du projet</a>.
        </li>
        <li>
          <strong>Format html&nbsp;:</strong> forme libre, où tous les liens qui sont considérés comme reconnus par l'<a href="{% url 'add_event' %}">outil d'import principal</a> seront importés.
          Cette fonctionnalité peut être utile quand on veut importer plus que les 8 événements détectés par défaut lors d'un import Facebook. Pour cela, se rendre sur la page de la liste
          d'événements, enregistrer le html de la page (clic droit, enregistrer sous), puis copier le contenu de ce fichier html ci-dessous.
        </li>
      </ul>
      <p>
        Les champs catégorie et étiquettes seront utilisés si on utilise le format html, pour catégoriser tous les événements qui seront importés.
      </p>
      <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <input type="submit" value="Envoyer">
      </form>
    </article>
    {% include "agenda_culturel/side-nav.html" with current="manual-import" %}
  </div>
  <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,
            searchResultLimit: 10,
            delimiter: ',',
            removeItemButton: true,
            shouldSort: false,
            callbackOnCreateTemplates: () => (show_firstgroup)
        }
    );

  </script>
{% endblock %}
