{% extends 'traite/base.html' %}
{% load static %}
{% load countries %}
{% block content %}
  <style>
  .step-content {
    display: none;
  }

  .step-content.active {
    display: block;
  }
  .steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    position: relative;
  }
  .step-button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background-color: var(--gray-color);
    transition: 0.4s;
    color: #fff;
  }
  .step-button[aria-expanded="true"] {
    /* width: 42px;
    height: 42px; */
    background-color: var(--dark-color);
    color: #fff;
  }
 
  .step-item {
    z-index: 10;
    text-align: center;
  }

  .progress {
    -webkit-appearance: none;
    position: absolute;
    width: 40%;
    z-index: 5;
    height: 4px;
    margin-bottom: 18px;
  }
  .step-completed::-webkit-progress-bar {
    background-color: var(--dark-color);
  }
  .step-uncompleted::-webkit-progress-bar {
    background-color: var(--gray-color);
  }

  #progress-step-1 {
    margin-left: 9%;
  }
  #progress-step-2 {
    margin-left: 55.5%;
    width: 38%;
  }
  /* to customize progress bar */
  .progress::-webkit-progress-value {
    background-color: var(--dark-color);
    transition: 0.5s ease;
  }
  /* .progress::-webkit-progress-bar {
    
  } */
  </style>
  <div class="container bg-liht w-75 my-form">
    <div>
      <h1 class="text-center fw-bold my-4">Nouveau cas de traite</h1>
    </div>
    <div class="steps">
      <progress id="progress-step-1"
                class="progress step-uncompleted"
                value="0"
                max="100"></progress>
      <progress id="progress-step-2"
                class="progress step-uncompleted"
                value="0"
                max="100"></progress>
      <div class="step-item">
        <button id="step-number-1"
                class="step-button text-center fs-4 fw-bold"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#collapseOne"
                aria-expanded="true"
                aria-controls="collapseOne">1</button>
        <div id="step-title-1" class="step-title fw-bold text-dark-blue">Cas de traite</div>
      </div>
      <div class="step-item">
        <button id="step-number-2"
                class="step-button text-center collapsed fs-5 fw-bold"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#collapseTwo"
                aria-expanded="false"
                aria-controls="collapseTwo">2</button>
        <div id="step-title-2" class="step-title text-dark-blue">Victimes</div>
      </div>
      <div class="step-item">
        <button id="step-number-3"
                class="step-button text-center collapsed fs-5 fw-bold"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#collapseThree"
                aria-expanded="false"
                aria-controls="collapseThree">3</button>
        <div id="step-title-3" class="step-title text-dark-blue">Auteurs</div>
      </div>
    </div>
    <div class="step-content active" id="step1">{% include './ui-elements/traite-form.html' %}</div>
    <div class="step-content" id="step2">{% include './ui-elements/victime-form.html' %}</div>
    <div class="step-content" id="step3">{% include './ui-elements/trafiquant-form.html' %}</div>
    <div class="step-content" id="step4">
      <a href="{% url 'traiteapp:traite' %}" class="text-center btn bg-dark">Retourner aux cas de traite</a>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.min.js"></script>
  {% verbatim %}
    <script>
  var VICTIMEFORM = '{% include "./ui-elements/victime-form.html" %}';
  console.log(VICTIMEFORM);
    </script>
  {% endverbatim %}
  <script>
    const REGIONS = {{ regions|safe }};
    const PAYS = {{ pays|safe }};
    const dateFields = document.getElementsByClassName("date-field");
    Array.from(dateFields).forEach((dateField) => {
      dateField.max = new Date().toLocaleDateString('fr-ca');
    });
  </script>
  <script src="{% static 'assets/js/traite.js' %}" defer></script>
{% endblock %}