{% extends "base.html" %}

{% block content %}
<code>
{{ __tera_context }}
</code>
<form id="inscription" method="post" action="/add_applicant" style="display: flex; flex-flow: column wrap;">

  <fieldset style="display: flex; flex-flow: column wrap;">
    <legend>État civil</legend>

    <fieldset>
      <legend>Genre</legend>
    <label for="gender_f">Femme</label>
    <input type="radio" id="gender_f" name="gender" value="f" checked>
    <label for="gender_m">Homme</label>
    <input type="radio" id="gender_m" name="gender" value="m">
    <label for="gender_n">Neutre</label>
    <input type="radio" id="gender_n" name="gender" value="n">
    </fieldset>

    <p>
    <label for="firstname">Prénom (seulement le premier)</label>
    <span>
      {% if errors is containing('firstname') %}<span>{{ errors["firstname"][0].message}}</span>{% endif %}
      <input type="text" id="firstname" name="firstname" class="{% if errors is containing('firstname') %}invalid{% endif %}" value="{{ firstname }}"/>
    </span>
    </p>

    <p>
    <label for="lastname">Nom</label>
    <span>
      {% if errors is containing('lastname') %}<span>{{ errors["lastname"][0].message}}</span>{% endif %}
      <input type="text" id="lastname" name="lastname" class="{% if errors is containing('firstname') %}invalid{% endif %}" value="{{ lastname }}"/>
    </span>
    </p>

    <p>
    <label for="birthdate">Date de naissance</label>
    <input type="date" id="birthdate" name="birthdate" value="{{ birthdate }}" aria-discribedby="birthdate-format">
    </p>

    <p>
    <label for="birthplace">Lieu de naissance</label>
    <input type="text" id="birthplace" name="birthplace" value="{{ birthplace }}">
    </p>

    <p>
    <label for="birthplace_dep">Département de naissance</label>
    <select id="birthplace_dep" name="birthplace_dep" value="{{ birthplace_dep }}">  
      <option value="test">test</option>
    </select>
    </p>

    <p>
    <label for="birthplace_country">Pays de naissance</label>
    <select id="birthplace_country" name="birthplace_country" autocomplete="on" value="{{ birthplace_country }}">
      <option value="test">test</option>
    </select>
    </p>

    <p>
    <label for="citizenship">Nationalité</label>
    <select id="citizenship" name="citizenship" value="{{ citizenship }}">
      <option value="test">test</option>
    </select>
    </p>

    <fieldset>
      <legend>Boursier</legend>
      <label for="scholarship_holder_yes">Oui</label>
      <input type="radio" id="scholarship_holder_yes" name="scholarship_holder" value="true">
      <label for="scholarship_holder_no">Non</label>
      <input type="radio" id="scholarship_holder_no" name="scholarship_holder" value="false" checked>
    </fieldset>

    <p>
    <label for="bea_number">Numéro BEA ou INE, il fait exactement 11 caractères et se trouve sur le relevé de notes du baccalauréat OU sur vos relevés de notes post-bac</label>
    <span>
      {% if errors is containing('bea_number') %}<span>{{ errors["bea_number"][0].message}}</span>{% endif %}
      <input type="text" id="bea_number" name="bea_number" class="{% if errors is containing('bea_number') %}invalid{% endif %}" value="{{ bea_number }}"/>
    </span>
    </p>

  </fieldset>

  <fieldset>
    <legend>Coordonnées</legend>

    <p>Ces coordonnées seront utilisées pour toute correspondance concernant le concours</p>

    <p>
    <label for="address">Adresse</label>
    <input type="text" id="address" name="address" value="{{ address }}">
    </p>

    <p>
    <label for="postcode">Code postal</label>
    <input type="text" id="postcode" name="postcode" value="{{ postcode }}">
    </p>

    <p>
    <label for="city">Ville</label>
    <input type="text" id="city" name="city" value="{{ city }}">
    </p>

    <p>
    <label for="country">Pays</label>
    <select id="country" name="country" autocomplete="on" value="{{ country }}">

      <option value="test">test</option>
    </select>
    </p>

    <p>
    <label for="mobile_phone">Téléphone portable</label>
    <span>
      {% if errors is containing('mobile_phone') %}<span>{{ errors["mobile_phone"][0].message}}</span>{% endif %}
      <input type="text" id="mobile_phone" name="mobile_phone" class="{% if errors is containing('mobile_phone') %}invalid{% endif %}" value="{{ mobile_phone }}"/>
    </span>
    </p>

    <p>
    <label for="email">Email</label>
    <span>
      {% if errors is containing('email') %}<span>{{ errors["email"][0].message}}</span>{% endif %}
      <input type="text" id="email" name="email" class="{% if errors is containing('email') %}invalid{% endif %}" value="{{ email }}"/>
    </span>
    </p>
  </fieldset>

  <fieldset>
    <legend>Scolarité</legend>
    {% for year in [1,2,3,4] %}
    <fieldset>
      <legend>Année scolaire {{ now() | date(format="%Y") | int - year }}/{{ now() | date(format="%Y") | int - (year-1) }}</legend>

      <p>
      <label for="diploma-{{ year }}">Diplôme préparé</label>
      <select id="diploma-{{ year }}" name="diploma-{{ year }}" autocomplete="on" value="">
      </select>
      </p>

      <p>
      <label for="school-{{ year }}">Établissement</label>
      <select id="school-{{ year }}" name="school-{{ year }}" autocomplete="on" value="">
        <option value="test">test</option>
      </select>
      </p>

      <p>
      <label for="year-in-diploma-{{ year }}">Année d'études</label>
      <select id="year-in-diploma-{{ year }}" name="year-in-diploma-{{ year }}" >
        {{ year_of_bachelor | safe }}
      </select>
      </p>

    </fieldset>
    {% endfor %}
  </fieldset>

  <fieldset>
    <legend>Niveau de langue</legend>

    {% for language in ["anglais", "allemand", "espagnol", "fle"] %}
    <fieldset>
      <legend>{{ language | capitalize}}</legend>
      <label for="language_level_{{ language }}_0">Aucun</label>
      <input type="radio" id="language_level_{{ language }}_0" name="language_level_{{ language }}" value="Aucun" checked>
      <label for="language_level_{{ language }}_1">Débutant</label>
      <input type="radio" id="language_level_{{ language }}_1" name="language_level_{{ language }}" value="Débutant">
      <label for="language_level_{{ language }}_2">Intermédiaire</label>
      <input type="radio" id="language_level_{{ language }}_2" name="language_level_{{ language }}" value="Intermédiaire">
      <label for="language_level_{{ language }}_3">Confirmé</label>
      <input type="radio" id="language_level_{{ language }}_3" name="language_level_{{ language }}" value="Confirmé">
    </fieldset>
    {% endfor %}

  </fieldset> 

  <fieldset>
    <legend>Vœux des écoles</legend>

    {% for wish_number in [1, 2, 3] %}
    <p>
    <label for="wish_{{ wish_number }}">Vœux {{ wish_number }}</label>
    <label for="wish_{{ wish_number }}_aucune">Aucune</label>
    <input type="radio" id="wish_{{ wish_number }}_aucune" name="wish-{{ wish_number }}" value="aucune">
    <label for="wish_{{ wish_number }}_brest">Brest</label>
    <input type="radio" id="wish_{{ wish_number }}_brest" name="wish-{{ wish_number }}" value="brest">
    <label for="wish_{{ wish_number }}_metz">Metz</label>
    <input type="radio" id="wish_{{ wish_number }}_metz" name="wish-{{ wish_number }}" value="metz">
    <label for="wish_{{ wish_number }}_tarbes">Tarbes</label>
    <input type="radio" id="wish_{{ wish_number }}_tarbes" name="wish-{{ wish_number }}" value="tarbes">
    </p>
    {% endfor %}

  </fieldset>

  <fieldset>
    <legend>Présentation autre concours</legend>
  </fieldset>

  <button form="inscription" aria-label="Valider" type="submit">Valider l'inscription</button>
</form>
{%endblock content %}

{% block css %}
/* * {
border: 1px dashed orange;
} */
.invalid {
background-color: ivory;
border: none;
outline: 1px solid red;
}
#inscription {
width: 1000px;
}
#inscription p {
display: flex;
align-items: center;
flex-direction: row;
}
#inscription p label {
flex: 1;
}
#inscription p > span {
flex: 1;
display: flex;
flex-direction: column;
}
form p:nth-child(odd) { background-color: #eeeeee; }
form p:nth-child(even) { background-color: #ffffff; }

{% endblock css %}

{% block js %}
function handleRadioClick() {
console.log(this.value);
radioValue = document.querySelectorAll( 'input[value="'+this.value+'"]',);
radioValue.forEach(radio => {
if (this !== radio && radio.checked) {
radioName = document.querySelector( 'input[name="'+radio.name+'"][value="aucune"]',);
radioName.checked = true;
}
});
}

const radioButtons = document.querySelectorAll( 'input[name^="wish-"]',);
radioButtons.forEach(radio => {
radio.addEventListener('click', handleRadioClick);
});
{% endblock js %}