{% extends "base.html" %}

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

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


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

    <p>
    <label for="lastname">Nom</label>
    <input type="text" id="lastname" name="lastname" value="{{ lastname }}">
    </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 }}">
    </select>
    </p>

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

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

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

    <p>
    <label for="bea-number">Numéro BEA ou INE</label>
    <input type="text" id="bea-number" name="bea-number" value="{{ birthplace }}">
    </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 }}"></select>
    </p>

    <p>
    <label for="mobile_phone">Téléphone portable</label>
    <input type="text" id="mobile_phone" name="mobile_phone" value="{{ mobile_phone }}">
    </p>

    <p>
    <label for="email">Email</label>
    <input type="text" id="email" name="email" value="{{ email }}">
    </p>
  </fieldset>

  <fieldset>
    <legend>Scolarité</legend>
    {% for year in ["2023/2024", "2022/2023", "2021/2022", "2020/2021"] %}
    <fieldset>
      <legend>Année scolaire {{ year }}</legend>

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

      <p>
      <label for="school">Établissement</label>
      <select id="school" name="school" autocomplete="on" value=""></select>
      </p>

      <p>
      <label for="school">Année d'études</label>
      <select id="school" name="school" autocomplete="on" value=""></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 }}_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 %}
.invalid {
background-color: ivory;
border: none;
outline: 2px solid red;
border-radius: 5px;
}
#inscription {
width: 1000px;
}
#inscription p {
display: flex;
justify-content: flex-end;
}
#inscription p label {
flex: 1;
}
#inscription p input {
flex: 1;
}
{% endblock css %}