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

{% block content %}
    <h3>Compte n° {{ object.pk }}</h3>

    <img src="{{ object.note.display_image.url }}" alt=""/>

    <dl class="row">
        <dt class="col-6 col-md-3">{% trans 'name'|capfirst %}</dt>
        <dd class="col-6 col-md-3">{{ object.user.name }}</dd>
        <dt class="col-6 col-md-3">{% trans 'first name'|capfirst %}</dt>
        <dd class="col-6 col-md-3">{{ object.user.first_name }}</dd>
        <dt class="col-6 col-md-3">{% trans 'username'|capfirst %}</dt>
        <dd class="col-6 col-md-3">{{ object.user.username }}</dd>
        <dt class="col-6 col-md-3">Aliases</dt>
        <dd class="col-6 col-md-3">{{ object.user.note.aliases_set.all }}</dd>
        <dt class="col-6 col-md-3">{% trans 'section'|capfirst %}</dt>
        <dd class="col-6 col-md-3">{{ object.section }}</dd>
        <dt class="col-6 col-md-3">{% trans 'address'|capfirst %}</dt>
        <dd class="col-6 col-md-3">{{ object.address }}</dd>
        <dt class="col-6 col-md-3">{% trans 'balance'|capfirst %}</dt>
        <dd class="col-6 col-md-3">{{ object.user.note.balance | pretty_money }}</dd>
    </dl>

    <a class="btn btn-primary" href="{% url 'password_change' %}">{% trans 'Change password' %}</a>

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            <i class="fa fa-users"></i> {% trans "View my memberships" %}
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        {% render_table club_list %}
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            <i class="fa fa-euro"></i> Historique des transactions
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
          {% render_table history_list %}
      </div>
    </div>
  </div>
</div>




    {% endblock %}