{% extends "bds/base.html" %}
{% load i18n %}


{% block content %}

{% for form in forms.values %}
{% for error in form.non_field_errors %}
<div class="notification is-danger">
    {{ error }}
</div>
{% endfor %}
{% endfor %}

<h1 class="title">{% trans "Modification du profil " %}{{ view.user.username }}</h1>

<div class="container">
    <form method="post" action="" id="user-update-form">
        {% csrf_token %}

        {% for form in forms.values %}
        {% include "bds/forms/form.html" with form=form errors=False %}
        {% endfor %}
    </form>

    <form method="post" action="{% url 'bds:user.delete' view.user.pk %}" id="user-delete-form">
        {% csrf_token %}
    </form>

    <div class="columns is-gapless mt-5">
        <div class="column is-5">
            <button id="user-update-button" class="button is-fullwidth is-primary">Enregistrer</button>
        </div>
        <div class="column is-2">
        </div>
        <div class="column is-5">
            <button id="user-delete-button" class="button is-fullwidth is-danger">Supprimer</button>
        </div>
    </div>
</div>

<!-- Hidden by default -->
<div id="confirm-delete-modal" class="modal">
    <div class="modal-background"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">Confirmer la suppression</p>
            <button id="modal-close" class="delete" aria-label="close"></button>
        </header>
        <section class="modal-card-body">
            Voulez-vous réellement supprimer ce compte ? Attention, cette opération est irréversible !
        </section>
        <footer class="modal-card-foot">
            <button id="confirm-delete-button" class="button is-primary">Supprimer</button>
            <button id="cancel-delete-button" class="button">Annuler</button>
        </footer>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        "use strict";

        // Adapted from https://bulma.io/lib/main.js
        function openModal(target) {
            $(document).addClass('is-clipped');
            $(`#${target}`).addClass('is-active');
        }

        function closeModals() {
            $(document).removeClass('is-clipped');
            $(".modal").removeClass('is-active');
        }

        // Si on clique sur enregistrer, ça marche
        $("#user-update-button").on("click", function() {
            $("#user-update-form").submit();
        })

        // Si on clique sur supprimer, confirmation demandée
        $("#user-delete-button").on("click", function() {
            openModal("confirm-delete-modal");
        });

        $(".modal-background, #modal-close, #cancel-delete-button").on("click", closeModals);

        $("#confirm-delete-button").on("click", function() {
            $("#user-delete-form").submit();
        });

        $(document).on("keydown", function(e) {
            if (e.key == "Escape") {
                closeModals();
            }

            if (e.key == "Enter") {
                $("#user-update-form").submit();
            }
        });

    });
</script>

{% endblock %}
