{% extends "base2.html" %}

 {% load static %}

 {% block title %} Registre {% endblock %}


  {% block content %}
  
  

<section class="hero is-fullheight" id="bglogin" style="position: absolute;top: 0;left: 0;width: 100%;">
      <div class="hero-body has-text-centered">
        <div class="login  p-6 is-justify-content-center" style="display: block;margin-left: auto;margin-right: auto;">
            {% load static %}
            <img src="{% static 'img/doucoder.png' %}" width="200px" />
            <br><br>
          <form method="POST" action="/registre">
            {% csrf_token %}

           
                    <div class="columns">

                        <div class="column">
                                <div class="field">
                                        <div class="control">
                                          <input id="" class="input is-medium is-rounded" type="email" placeholder="example@gmail.com"  name="email" required  />
                                        </div>
                                </div>
                                <div class="field">
                                        <div class="control">
                                          <input id="password" class="input is-medium is-rounded" type="password" placeholder="password" minlength="8"  required />
                                        </div>
                                </div>
                        </div>

                        <div class="column">
                                <div class="field">
                                        <div class="control">
                                                <input id="" class="input is-medium is-rounded" type="text" placeholder="name"  name="nom" required  />
                                        </div>
                                </div>   
                                <div class="field">
                                      <div class="control">
                                        <input id="cpassword" onchange="passControlle()" class="input is-medium is-rounded" type="password" placeholder="confirm password" minlength="8"  required />
                                      </div>
                                </div>
                                <input required id="bonpass" type="hidden" name="password" value="">
                        </div>
                    </div>
                            

                    <span id="message" style="color: #fbab04;"> </span>
                    
                    
            <button style="background-color:#fbab04 ;" class="button is-block is-fullwidth is-primary is-medium is-rounded" type="submit">
              sign up
            </button>
          </form>
          <br>
          <nav class="level">
            <div class="level-item has-text-centered">
              <div>
                  <span style="color: aliceblue;"> do you have an account? </span>
              
                <a href="{% url 'login' %}">login</a>
              </div>
            </div>
            
          </nav>
        </div>
      </div>
    </section>

    <script>

    

    function passControlle(){

        var password = document.getElementById("password").value
        var cpassword = document.getElementById("cpassword").value
        var message = document.getElementById("message")
         
        //console.log(" "+password+" conf >> "+ cpassword)

        if(password != cpassword ){

            message.innerHTML= "passwords are not the same"
            document.getElementById("bonpass").value=""
        }else{
            message.innerHTML= ""
            document.getElementById("bonpass").value=password
        }
    }

    function submit(){

        if(password == cpassword ){


        }
        
    }
    
    </script>


  {% endblock content %}