{% load countries %} {% get_countries as countries %}
<div class="d-flex flex-column justify-content-between my-form my-3 p-3">
  <div class="container">
    <h3 class=" text-center text-dark-blue">Enregistrement victime(s)</h3>
    <!-- Form ADD TRAITE-->
    <form class="form" id="victimeForm">
      <div class="row p-2">
        <input type="hidden" name="cas_traite" />
        <input type="hidden" id="url_request" value="{% url 'traiteapp:save_victime' %}">
        <div class="col-12 col-md-6 mb-1">
          <label for="prenom" >
            <span class="h6 small bg-white text-muted ms-3 pt-1 ps-2 pe-2 ">Prénom</span> 
          </label>
          <input type="text" class="form-control mt-n3 py-2" id="prenom" name="prenom" />
        </div>

        <div class="col-12 col-md-6 mb-1">
          <label for="nom" >
            <span class="h6 small bg-white text-muted ms-3 pt-1 ps-2 pe-2 ">Nom</span> 
          </label>
          <input type="text" class="form-control mt-n3 py-2" id="nom" name="nom" />
        </div>
      </div>
      <div class="row p-2">
        <div class="col-12 col-md-6 mb-1">
          <label for="date_naissance" >
            <span class="h6 small bg-white text-muted ms-3 pt-1 ps-2 pe-2 ">Date de naissance</span> 
          </label>
          <input
            type="date"
            class="form-control mt-n3 py-2 date-field"
            id="date_naissance"
            name="date_naissance"
          />
        </div>
        <div class="col-12 col-md-6 mb-1">
          <label for="lieu_naissance" >
            <span class="h6 small bg-white text-muted ms-3 pt-1 ps-2 pe-2 ">Lieu de naissance</span> 
          </label>
          <input
            type="text"
            class="form-control mt-n3 py-2"
            id="lieu_naissance"
            name="lieu_naissance"
          />
        </div>
      </div>
      <div class="row p-2">
        <div class="col-12 col-md-6 mb-1">
          <label for="sexe" >
            <span class="h6 small bg-white text-muted ms-3 pt-1 ps-2 pe-2 ">Sexe</span> 
          </label>
          <select class="form-select mt-n3 py-2" name="sexe">
            <option disabled  ></option>
            <option value="Féminin" >Féminin</option>
            <option value="Masculin"  >Masculin</option>
          </select>
        </div>

        <div class="col-12 col-md-6 mb-1">
          <label for="nationalite" >
            <span class="h6 small bg-white text-muted ms-3 pt-1 ps-2 pe-2 ">Nationalité</span> 
          </label>
          <select class="form-select mt-n3 py-2" name="nationalite">
            {% for country in countries %}
            <option value="{{country.name}}">{{country.name}}</option>
            {% endfor %}
          </select>
        </div>
      </div>

      <div class="row p-2">
        <div class="col-12 col-md-6 mb-1">
          <label for="situation_matrimoniale" >
            <span class="h6 small bg-white text-muted ms-3 pt-1 ps-2 pe-2 ">Situation matrimoniale</span> 
          </label>
          <select class="form-select mt-n3 py-2" name="situation_matrimoniale">
            <option value="Marié(e)">Marié(e)</option>
            <option value="Celibataire">Celibataire</option>
          </select>
        </div>
        <div class="col-12 col-md-6 mb-1">
          <label for="est_parent_tranfiquant">
            <span class="h6 small bg-white text-muted ms-3 pt-1 ps-2 pe-2 ">Lien de parenté avec l'auteur</span> 
          </label>
          <select class="form-select mt-n3 py-2" name="est_parent_tranfiquant">
            <option value="True">Oui</option>
            <option value="False">Non</option>
          </select>
        </div>
      </div>
      <div class="row p-2">
        
        <div class="col-12 col-md-6 mb-1">
          <label for="a_membre_famille_implique" >
            <span class="h6 small bg-white text-muted ms-3 pt-1 ps-2 pe-2 ">Membre(s) de la famille impliqué(s)</span> 
          </label>
          <select class="form-select mt-n3 py-2" name="a_membre_famille_implique">
            <option value="True">Oui</option>
            <option value="False">Non</option>
          </select>
        </div>
        <div class="col-12 col-md-6 mb-1">
          <label for="est_scolarise" >
            <span class="h6 small bg-white text-muted ms-3 pt-1 ps-2 pe-2 ">Scolarisé(s) si moins de 18 ans</span> 
          </label>
          <select class="form-select mt-n3 py-2" name="est_scolarise">
            <option value="True">Oui</option>
            <option value="False">Non</option>
          </select>
        </div>
      </div>
      <div class="text-end mt-2">
        <!-- <button
          type="button"
          class="btn btn-secondary px-4 "
          onclick="prevStep('step2', 'step1')"
        >
          PRECEDENT
        </button> -->
        <button type="submit" class="btn btn-dark px-4" id="btnSaveVictimAndAddAnother">
          ENREGISTRER ET AJOUTER UNE AUTRE
        </button>
        <button class="btn btn-dark px-4" type="submit" id="btnSaveVictimAndContinuous">
          ENREGISTRER ET CONTINUER
        </button>
        
      </div>
    </form>
    <!-- END ADD TRAITE-->
  </div>
</div>