{% extends "base2.html" %}
{% load static %}
{% load i18n %}
{% block css %}
<link rel="stylesheet" href="{% static "clean/predical/css/login.css"%}">
{% endblock %}
{% block content %}
<div id="app" class="container h-100">
    <div id="login" class="row h-100 justify-content-center align-items-center">
        <form name="login" action="" method="post">
            {% csrf_token %}
            <div class="text-center">
                <img id="logo" src="{% static "clean/predical/pix/logo.png" %}">
            </div>

            <div class="form-row justify-content-center">
                <input type="hidden" id="rgpd" name="rgpd" value="0">
                <!-- 
                    <input type="hidden" id="login" name="login" value="0">
                -->
                <div class="col-10">
                    <input v-model="username" type="text" name="username" class="form-control"
                    placeholder="prénom.nom">
                </div>
                <div class="col-10 my-1">
                    <input v-model="password" type="password" name="password" class="form-control" placeholder="Mot de passe">
                </div>
            </div>
            <div class="form-row justify-content-center">
                <div class="col-10  my-1">
                    <button :disabled="InputIsEmpty" type="submit" name="login" class="btn btn-info btn-block btn-login">Connectez-vous</button>
                </div>
            </div>
            <div class="form-row justify-content-center">
                <div class="col-6  my-1">
                    <a id="show-recover" href="#">Mot de passe oublié ?</a>
                </div>
                <div class="col-4  my-1 text-right">
                    <a href="https://www.predical.fr">Retour</a>
                </div>
            </div>
            {% if danger %} <div class="alert alert-danger text-center"> <p>{{ danger }}</p> </div> {% endif %}
            {% if warning %} <div class="alert alert-warning text-center"> <p>{{ warning }}</p> </div> {% endif %}
            {% if success %} <div class="alert alert-success text-center"> <p>{{ success }}</p> </div> {% endif %}
        </form>   
    </div>
    <div id="recover" class="row h-100 justify-content-center align-items-center">
        <form action="" method="post">
            {% csrf_token %}
            <div class="text-center">
                <img id="logo" src="{% static "clean/predical/pix/logo.png" %}">
            </div>
            <div class="form-row justify-content-center">
                <div class="col-10">
                    <input v-model="recovered" type="text" name="recovered_email"
                    class="form-control" placeholder="prénom.nom">
                </div>
                <div class="col-10 my-1">
                    <input type="text" name="email" disabled class="form-control" placeholder="Mot de passe">
                </div>
            </div>
            <div class="form-row justify-content-center">
                <div class="col-10  my-1">
                    <button :disabled="UsernameIsEmpty" type="submit" name="recover" class="btn btn-info btn-block btn-login">Nouveau mot de passe</button>
                </div>
            </div>
            <div class="form-row justify-content-center">
                <div class="col-6  my-1">
                    <a id="show-login" href="#">Connectez-vous</a>
                </div>
                <div class="col-4  my-1 text-right">
                    <a href="https://www.predical.fr">Retour</a>
                </div>

            </div>
        </form>   
    </div>
{% if rgpd %}
<div class="modal fade show d-block" id="RGPDModal" tabindex="-1" role="dialog" aria-labelledby="RGPDModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="RGPDModalLabel">Traitement des données personnelles</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Je declare avoir pris connaissance des dispositions
	<a target="_blank" href="{% static "clean/predical/Predical_-_dispositions_relatives_à_la_vie_prive.pdf "%}">relatives a la protection de la vie privee</a> et accepter l'utilisation des donnees aux
        fins decrites dans le document
      </div>
      <div class="modal-footer">
        <button id="cancel-rgpd" type="button" class="btn btn-danger" data-dismiss="modal">Refuser</button>
        <button id="valid-rgpd" type="button" class="btn btn-primary" data-dismiss="modal">Accepter</button>
      </div>
    </div>
  </div>
</div>
{% endif %}
</div>
{% endblock %}
{% block js %}
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script><Paste>
<script>
    {% if rgpd %}
    window.onload = function() {
      $('#RGPDModal').modal("show")
    }
    {% endif %}

    var app = new Vue({
        el : '#app',
        data : {
            username: '',
            password: '',
            recovered: '',
        },
        computed: {
            InputIsEmpty: function() {
                return this.username.length == 0 | this.password.length == 0 ? true : false;
            },
            UsernameIsEmpty: function() {
                return this.recovered.length == 0;
            }

        }

    })

    $('#show-recover').click(function() {
        $('#recover').css( "display", "flex" );
        $('#login').css( "display", "none" );
    });
    $('#show-login').click(function() {
        $('#recover').css( "display", "none" );
        $('#login').css( "display", "flex" );
    });
    $("#cancel-rgpd").click( function () {
        location.href='/predical/logout';
    });
    $("#valid-rgpd").click( function () {
        $("#rgpd").attr("value", "1");
        $("#login").attr("value", "1");
        document.login.submit();
   });

</script>
<style>
button[disabled] {
      cursor: not-allowed;
      opacity: .5;
}
</style>
{% endblock %}