{% extends "base.html" %}
{% load i18n static pretty_money django_tables2 %}

{% block content %}
<div class="row mt-4">
    <div class="col-md-3 mb-4">
        <div class="card bg-light shadow">
            <img src="{{ object.note.display_image.url }}" class="card-img-top" alt="">
            <div class="card-body">
                <dl class="row">
                    <dt class="col-xl-6">{% trans 'name'|capfirst %}, {% trans 'first name' %}</dt>
                    <dd class="col-xl-6">{{ object.user.last_name }} {{ object.user.first_name }}</dd>

                    <dt class="col-xl-6">{% trans 'username'|capfirst %}</dt>
                    <dd class="col-xl-6">{{ object.user.username }}</dd>

                    <dt class="col-xl-6">{% trans 'password'|capfirst %}</dt>
                    <dd class="col-xl-6">
                        <a class="small" href="{% url 'password_change' %}">
                            {% trans 'Change password' %}
                        </a>
                    </dd>

                    <dt class="col-xl-6">{% trans 'section'|capfirst %}</dt>
                    <dd class="col-xl-6">{{ object.section }}</dd>

                    <dt class="col-xl-6">{% trans 'address'|capfirst %}</dt>
                    <dd class="col-xl-6">{{ object.address }}</dd>

                    <dt class="col-xl-6">{% trans 'balance'|capfirst %}</dt>
                    <dd class="col-xl-6">{{ object.user.note.balance | pretty_money }}</dd>

                    <dt class="col-xl-6">{% trans 'aliases'|capfirst %}</dt>
                    <dd class="col-xl-6">{{ object.user.note.alias_set.all|join:", " }}</dd>
                </dl>

                {% if object.user.pk == user.pk %}
                    <a class="small" href="{% url 'member:auth_token' %}">{% trans 'Manage auth token' %}</a>
                {% endif %}
            </div>
            <div class="card-footer">
                <a class="btn btn-primary btn-sm" href="{% url 'member:user_update_profile' object.pk %}">{% trans 'Update Profile' %}</a>
            </div>
        </div>
    </div>

    <div class="col-md-9">
        <div class="accordion shadow" id="accordionProfile">
            <div class="card">
                <div class="card-header position-relative" id="clubListHeading">
                    <a class="btn btn-link stretched-link font-weight-bold"
                       data-toggle="collapse" data-target="#clubListCollapse"
                       aria-expanded="true" aria-controls="clubListCollapse">
                        <i class="fa fa-users"></i> {% trans "View my memberships" %}
                    </a>
                </div>
                <div id="clubListCollapse" class="collapse show" style="overflow:auto hidden" aria-labelledby="clubListHeading" data-parent="#accordionProfile">
                    {% render_table club_list %}
                </div>
            </div>

            <div class="card">
                <div class="card-header position-relative" id="historyListHeading">
                    <a class="btn btn-link stretched-link collapsed font-weight-bold"
                       data-toggle="collapse" data-target="#historyListCollapse"
                       aria-expanded="false" aria-controls="historyListCollapse">
                        <i class="fa fa-euro"></i> Historique des transactions
                    </a>
                </div>
                <div id="historyListCollapse" class="collapse" style="overflow:auto hidden" aria-labelledby="historyListHeading" data-parent="#accordionProfile">
                    {% render_table history_list %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}