{% extends 'reseau/main.html' %}

{% load static %}

{% block content %}



    <div class="d-flex flex-column justify-content-center align-items-center">
        <h3 class="mb-5">Page inscription remplaçant</h3>

        <form method="POST" action="">

            {% csrf_token %}

            <!-- d-none  -->
            <div id="div2Hide" class="d-flex flex-column justify-content-center align-items-center bg-primary mb-3">
                <h3 class="mb-5">Step 0</h3>
                <!-- <p class="mb-1">{{form.username.label}}</p> -->
                <p class="mb-1">Prénom</p>
                <p>{{form.first_name}}</p> 

                <p class="mb-1">Nom</p>
                <p>{{form.last_name}}</p> 
                
                <p class="mb-1">Nom</p>
                <p>{{form.last_name}}</p> 
            </div>
            <!-- d-none  -->
            <div id="div2Hide1" class="d-none d-flex flex-column justify-content-center align-items-center bg-secondary mb-3">
                <h3 class="mb-5">Step 1</h3>
            </div>
            <div id="div2Hide2" class="d-none d-flex flex-column justify-content-center align-items-center bg-info mb-3">
                <h3 class="mb-5">Step 2</h3>
            </div>
            <div id="div2Hide3" class="d-none d-flex flex-column justify-content-center align-items-center bg-warning mb-3">
                <h3 class="mb-5">Step 3</h3>
            </div>

            <div class="d-flex justify-content-center align-items-center bg-secondary mb-3 py-3">
                <a id="div2HideButton" class="btn btn-danger me-2" data-toggle="collapse" href="#">Toggle</a>
                <a id="div2HidePrecedent" class="btn btn-info me-2" data-toggle="collapse" href="#">Précédent</a>
                <a id="div2HideSuivant" class="btn btn-success" data-toggle="collapse" href="#">Suivant</a>

            </div>

            <!-- <p class="mb-1">{{form.username.label}}</p> -->
            <p class="mb-1">Identifiant</p>
            <p>{{form.username}}</p> 

            <!-- <p class="mb-1">{{form.code_structure.label}}</p> -->
            <p class="mb-1">Code Structure</p>
            <p>{{form.code_structure}}</p>

            <!-- <p class="mb-1">{{form.email.label}}</p> -->
            <p class="mb-1">Email</p>
            <p>{{form.email}}</p>

            <!-- <p class="mb-1">{{form.password1.label}}</p> -->
            <p class="mb-1">Mot de passe</p>
            <p>{{form.password1}}</p>
            
            <!-- <p class="mb-1">{{form.password2.label}}</p> -->
            <p class="mb-1">Confirmation mot de passe</p>
            <p>{{form.password2}}</p>

            <input type="submit" value="S'inscrire">

        </form>
    </div>
     <!-- <div>
          <form method="POST" action="">
  
              {% csrf_token %}
              {{form.as_p}}  
              <input type="submit" value="Register">

          </form>
      </div> -->

     <!-- <div>
          <form method="POST" action="">
  
              {% csrf_token %}
  
              <label for="">Username</label>
              <input type="text" name="username" placeholder="Enter Username">
              
              <label for="">Password</label>
              <input type="password" name="password" placeholder="Enter Password">
  
              <input type="submit" value="Login">
          </form>
      </div> -->

      

{% endblock content %}

{% block js_clock %} 

    <script>
        console.log('div2HideButton click OK ! 1')
    </script>
    
    <script src="{% static 'js/registerMultiStepsForm.js' %}"></script>
{% endblock %}