{% 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 auteur(s) de traite</h3>
    <!-- Form ADD TRAITE -->
    <form class="form" id="trafiquantForm">
      <div class="row p-2">
        <input type="hidden" name="cas_traite" />
        <input
          type="hidden"
          id="url_request"
          value="{% url 'traiteapp:save_trafiquant' %}"
        />

        <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>
          <!-- <label for="prenom" class="form-label">Prenom</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>
          <!-- <label for="nom" class="form-label">Nom</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>
          <!-- <label for="date_naissance" class="form-label"
            >Date de naissance</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>
          <!-- <label for="lieu_naissance" class="form-label"
            >Lieu de naissance</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>
          <!-- <label for="sexe" class="form-label">Sexe</label> -->
          <select class="form-select" name="sexe">
            <option disabled></option>
            <option value="Masculin" selected>Masculin</option>
            <option value="Féminin">Féminin</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>
          <!-- <label for="nationalite" class="form-label">Nationalité</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>
          <!-- <label for="situation_matrimoniale" class="form-label"
            >Situation matrimoniale</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="activite" >
            <span class="h6 small bg-white text-muted ms-3 pt-1 ps-2 pe-2 ">Activité</span> 
          </label>
          <!-- <label for="activite" class="form-label">Activité</label> -->
          <input type="text" class="form-control mt-n3 py-2" name="activite" />
        </div>
      </div>
      <div class="row p-2">
        
        <div class="col-12 col-md-6 mb-1">
          <label for="est_recidiviste" >
            <span class="h6 small bg-white text-muted ms-3 pt-1 ps-2 pe-2 ">Cas de récidive ?</span> 
          </label>
          <!-- <label for="est_recidiviste" class="form-label"
            >Cas de récidive ?</label
          > -->
          <select class="form-select mt-n3 py-2" name="est_recidiviste">
            <option value="False" selected>Non</option>
            <option value="True">Oui</option>
          </select>
        </div>
        <div class="col-12 col-md-6 mb-1">
          <label for="zone_provenance" >
            <span class="h6 small bg-white text-muted ms-3 pt-1 ps-2 pe-2 ">Zone de provenance</span> 
          </label>
          <!-- <label for="zone_provenance" class="form-label"
            >Zone de provenance</label
          > -->
          <select class="form-select mt-n3 py-2" name="zone_provenance">
            {% for country in countries %}
            <option value="{{ country.name }}">{{ country.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-12 col-md-6 mb-4">
        
          <label for="raisons_trafic" class="col-sm-6">
            <span class="h6 small bg-white text-muted ms-3 pt-1 ps-2 pe-2 ">Raisons trafic</span> 
          </label>
          <div class="bg-white border rounded p-3 mt-n3 ">
           
            <div class="form-check">
              <input
                type="checkbox"
                class="form-check-input form-check-input-sm moyen_transport"
                id="pauvreté"
                name="raisons_trafic[]"
                value="pauvreté"
              />
              <label class="form-check-label" for="checkbox1"
                >Pauvreté</label
              >
            </div>
            <div class="form-check">
              <input
                type="checkbox"
                class="form-check-input form-check-input-sm moyen_transport"
                id="profit"
                name="raisons_trafic[]"
                value="profit"
              />
              <label class="form-check-label" for="checkbox1"
                >Profit financier</label
              >
            </div>
          
        </div>
      </div>

      <div class="text-end">
        <button type="submit" class="btn btn-dark px-4">
          ENREGISTRER ET AJOUTER UN AUTRE
        </button>
        <button
          type="submit"
          class="btn btn-dark px-4"
          id="btnSaveTrafiquantAndFinish"
        >
          ENREGISTRER
        </button>
      </div>
    </form>
    <!-- END ADD TRAITE -->
  </div>
</div>