{% extends "base.html" %}
{% comment %}
SPDX-License-Identifier: GPL-3.0-or-later
{% endcomment %}
{% load i18n perms %}

{# Use a fluid-width container #}
{% block containertype %}container-fluid{% endblock %}

{% block content %}
<div class="row mt-4">
    <div class="col-xl-4">
        {% block profile_info %}
        <div class="card bg-light" id="card-infos">
            <h4 class="card-header text-center">
                {% if user_object %}
                {% trans "Account #" %}{{ user_object.pk }}
                {% elif club %}
                Club {{ club.name }}
                {% endif %}
            </h4>
            <div class="text-center">
                {% if user_object %}
                <a href="{% url 'member:user_update_pic' user_object.pk  %}">
                    <img src="{{ user_object.note.display_image.url }}" class="img-thumbnail mt-2">
                </a>
                {% elif club %}
                <a href="{% url 'member:club_update_pic' club.pk  %}">
                    <img src="{{ club.note.display_image.url }}" class="img-thumbnail mt-2">
                </a>
                {% endif %}
            </div>
            {% if note.inactivity_reason %}
                <div class="alert alert-danger polymorphic-add-choice">
                    {{ note.get_inactivity_reason_display }}
                </div>
            {% endif %}
            <div class="card-body" id="profile_infos">
                {% if user_object %}
                {% include "member/includes/profile_info.html" %}
                {% elif club %}
                {% include "member/includes/club_info.html" %}
                {% endif %}
            </div>
            <div class="card-footer">
                {% if user_object %}
                <a class="btn btn-sm btn-secondary" href="{% url 'member:user_update_profile' user_object.pk %}">
                    <svg class="bi bi-edit" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
                    </svg>
                    {% trans 'Update Profile' %}
                </a>
                {% url 'member:user_detail' user_object.pk as user_profile_url %}
                {% if request.path_info != user_profile_url %}
                <a class="btn btn-sm btn-primary" href="{{ user_profile_url }}">{% trans 'View Profile' %}</a>
                {% endif %}
                {% elif club and not club.weiclub %}
                {% if can_add_members %}
                <a class="btn btn-sm btn-success" href="{% url 'member:club_add_member' club_pk=club.pk %}"
                   data-turbolinks="false"> {% trans "Add member" %}</a>
                {% endif %}
                {% if ".change_"|has_perm:club %}
                <a class="btn btn-sm btn-secondary" href="{% url 'member:club_update' pk=club.pk %}"
                   data-turbolinks="false">
                    <svg class="bi bi-edit" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
                    </svg>
                    {% trans 'Update Profile' %}
                </a>
                {% endif %}
                {% url 'member:club_detail' club.pk as club_detail_url %}
                {% if request.path_info != club_detail_url %}
                <a class="btn btn-sm btn-primary" href="{{ club_detail_url }}">{% trans 'View Profile' %}</a>
                {% endif %}
                {% endif %}
                {% if can_lock_note %}
                <button class="btn btn-sm btn-danger" data-toggle="modal" data-target="#lock-note-modal">
                    <i class="fa fa-ban"></i> {% trans 'Lock note' %}
                </button>
                {% elif can_unlock_note %}
                <button class="btn btn-sm btn-success" data-toggle="modal" data-target="#unlock-note-modal">
                    <i class="fa fa-check-circle"></i> {% trans 'Unlock note' %}
                </button>
                {% endif %}
            </div>
        </div>
        {% endblock %}
    </div>
    <div class="col-xl-8">
        {% block profile_content %}{% endblock %}
    </div>

    {# Popup to confirm the action of locking the note. Managed by a button #}
    <div class="modal fade" id="lock-note-modal" tabindex="-1" role="dialog" aria-labelledby="lockNote"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="lockNote">{% trans "Lock note" %}</h5>
                    <button type="button" class="close btn-modal" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    {% blocktrans trimmed %}
                        Are you sure you want to lock this note? This will prevent any transaction that would be performed,
                        until the note is unlocked.
                    {% endblocktrans %}
                    {% if can_force_lock %}
                    {% blocktrans trimmed %}
                        If you use the force mode, the user won't be able to unlock the note by itself.
                    {% endblocktrans %}
                    {% endif %}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-modal" data-dismiss="modal">{% trans "Close" %}</button>
                    {% if can_force_lock %}
                    <button type="button" class="btn btn-danger btn-modal" onclick="lock_note(true, 'forced')">{% trans "Force mode" %}</button>
                    {% endif %}
                    <button type="button" class="btn btn-warning btn-modal" onclick="lock_note(true, 'manual')">{% trans "Lock note" %}</button>
                </div>
            </div>
        </div>
    </div>

    {# Popup to confirm the action of unlocking the note. Managed by a button #}
    <div class="modal fade" id="unlock-note-modal" tabindex="-1" role="dialog" aria-labelledby="unlockNote"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="unlockNote">{% trans "Unlock note" %}</h5>
                    <button type="button" class="close btn-modal" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    {% blocktrans trimmed %}
                        Are you sure you want to unlock this note? Transactions will be re-enabled.
                    {% endblocktrans %}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-modal" data-dismiss="modal">{% trans "Close" %}</button>
                    <button type="button" class="btn btn-success btn-modal" onclick="lock_note(false, null)">{% trans "Unlock note" %}</button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extrajavascript %}
<script>
    function refreshHistory() {
        {% if user_object %}
        $("#history_list").load("{% url 'member:user_detail' pk=user_object.pk %} #history_list");
        $("#profile_infos").load("{% url 'member:user_detail' pk=user_object.pk %} #profile_infos");
        {% else %}
        $("#history_list").load("{% url 'member:club_detail' pk=club.pk %} #history_list");
        $("#profile_infos").load("{% url 'member:club_detail' pk=club.pk %} #profile_infos");
        {% endif %}
    }

    function lock_note(locked, mode) {
        $("button.btn-modal").attr("disabled", "disabled");
        $.ajax({
            url: "/api/note/note/{{ note.pk }}/",
            type: "PATCH",
            dataType: "json",
            headers: {
                "X-CSRFTOKEN": CSRF_TOKEN
            },
            data: {
                is_active: !locked,
                inactivity_reason: mode,
                resourcetype: "{% if user_object %}NoteUser{% else %}NoteClub{% endif %}"
            }
        }).done(function () {
            $("#card-infos").load("#card-infos #card-infos", function () {
                $(".modal").modal("hide");
                $("button.btn-modal").removeAttr("disabled");
            });
        }).fail(function(xhr, textStatus, error) {
            $(".modal").modal("hide");
            $("button.btn-modal").removeAttr("disabled");
            errMsg(xhr.responseJSON);
        });
    }
</script>
{% endblock %}