{% extends "base.html" %}
{% load static %}

{% block nav_inscription %}current{% endblock %}

{% block "content" %}
	<form id="main_form" method="post" action="{% url 'inscription' %}">
	{% csrf_token %}

	<h2>Inscription à l'événement</h2>
        L'inscription à l'événement,
        et aux repas se fait sur cette page.
	
		<h3>École</h3>
		<p>{{ form.school.label_tag }} {{ form.school }}</p>
		<p>Vous êtes considéré⋅e commme extérieur si vous n'êtes pas actuellement scolarisé⋅e ou inscrit⋅e à l'ENS Paris-Saclay. Nous avons besoin de cette information pour transmettre la liste des extérieurs à l'administration de l'ENS.</p>

		<h3>Repas</h3>
		<p>Vous pouvez vous insrire aux repas ci-dessous :</p>
		<ul>
		<li>Vendredi soir {{ form.meal_friday_evening }}</li>
		<li>Petit dej' du samedi {{ form.meal_saturday_morning }}</li>
		<li>Samedi midi {{ form.meal_saturday_midday }}</li>
		<li>Samedi soir {{ form.meal_saturday_evening }}</li>
		<li>Petit dej' du dimanche {{ form.meal_sunday_morning }}</li>
		<li>Dimanche midi {{ form.meal_sunday_midday }}</li>
		</ul>

	<h2>Inscription aux activités</h2>
	Vous pourrez
        vous inscrire à certaines activités sur cette page. La plupart des
        activités ne demandent pas d'inscription et seront en libre accès
        durant tout l'événement, mais certaines demandent une inscription à
        l'avance.




		<h3>Choix d'activités</h3>

		<p>Saissisez les activités auquelles vous voulez vous inscrire, par ordre de préférence.
			Vous trouverez une description des activités sur <a href="{% url 'activites' %}">cette page</a>.
		</p>
		<p>
			Vous pouvez revenir modifier votre choix jusqu'à la fermeture des
			inscriptions{% if settings.inscriptions_end %} (le {{ settings.inscriptions_end|date:"l d F Y à H:i" }}){% endif %}.
		</p>
		<p>Si vous vous inscrivez à une activité qui nécessite préparation, nous communiquerons
			votre email aux orgas pour qu'iels puissent vous contacter.
		</p>


		{% if formset.non_form_errors %}
		{{ formset.non_form_errors }}
		{% endif %}

		{{ formset.management_data }}
		{{ formset.management_form }}
		{% for form in formset %}
		<div class="activity-form flex">
			{{ form.as_p }}
			<button class="button delete-activity" style="align-self: center; flex-grow: 0;">Supprimer</button>
		</div>
		{% endfor %}
		<button class="button" id="add-activity">Ajouter une activité</button>
		<div class="flex">
			<input type="submit" value="Valider">

			<a class="button" href="{% url 'profile' %}">Annuler</a>
		</div>
	</form>

	<script>
const button_add_activity = document.querySelector("#add-activity");
const button_submit_form = document.querySelector('[type="submit"]');
const activity_form = document.getElementsByClassName("activity-form");
const main_form = document.querySelector("#main_form");
const total_forms = document.querySelector("#id_form-TOTAL_FORMS");

const form_regex = /form-(\d*)-/g;

var form_count = activity_form.length - 1;

function add_new_form(event) {
	// adds a new activity form when clicking on the + button
	event.preventDefault();
	// clone the first form and replaces it's id
	const new_form = activity_form[0].cloneNode(true);
	form_count++;
	new_form.innerHTML = new_form.innerHTML.replace(form_regex, `form-${form_count}-`);
	// add it and increment form total
	main_form.insertBefore(new_form, button_add_activity);
	new_form.querySelector("select").value = "";
	total_forms.setAttribute("value", `${form_count+1}`);
}

button_add_activity.addEventListener("click", add_new_form);

function delete_form(event) {
	if (!event.target.classList.contains("delete-activity")) return;
	event.preventDefault();
	if (form_count == 0) {
		// don't delete the first element
		activity_form[0].querySelector("select").value = "";
		return;
	}
	event.target.parentElement.remove();
	form_count--;
	total_forms.setAttribute("value", `${form_count+1}`);
	// update form numbers
	let count = 0;
	for (const form of activity_form) {
		// the replace changes the field value
		// so we save and restore it
		const select = form.querySelector("select");
		const value = select.value;
		form.innerHTML = form.innerHTML.replace(form_regex, `form-${count++}-`);
		form.querySelector("select").value = value;
	}
}

main_form.addEventListener("click", delete_form);
	</script>
{% endblock %}