{% load kfet_tags %}


<aside class="aside {% if account.is_frozen %}frozen-account{% endif %}">

  <div class="heading">
    <div class="big">{{ account.trigramme }}</div>
    <div class="toggle">
      <span class="base">{{ account.balance_ukf }} UKF</span>
      <span class="hover">{{ account.balance }} €</span>
    </div>
  </div>

  {% if perms.kfet.is_team %}
  <div class="buttons">
    <a class="btn btn-default" href="{% url 'kfet.account.update' account.trigramme %}">
      <span class="glyphicon glyphicon-cog"></span><span>Éditer</span>
    </a>
    {% if perms.kfet.delete_account %}
    <hr>
    <button class="btn btn-default" id="button-delete">
      <span class="glyphicon glyphicon-remove"></span><span>Supprimer</span>
    </button>
    <form method="post" action="{% url 'kfet.account.delete' account.trigramme %}" id="account-delete-form">
      {% csrf_token %}
    </form>
    {% endif %}
  </div>
  {% endif %}

  <div class="text">
    <h4>{{ account.name|title }}</h4>
    <ul class="list-unstyled">
      {% if perms.kfet.is_team %}
      <li>{{ account.nickname }}</li>
      {% endif %}
      <li>{{ account.email|default:"Pas d'email!" }}</li>
      <li>
        {% if account.promo %}
        {{ account.departement }} {{ account.promo }}
        {% else %}
        Sans promo
        {% endif %}
      </li>
      <li>
        {% if account.is_cof %}
        <span title="Réduction de {{ kfet_config.reduction_cof }} % sur tes commandes" data-toggle="tooltip"
          data-placement="right">Adhérent COF</span>
        {% else %}
        Non-COF
        {% endif %}
      </li>
    </ul>
  </div>

  {% if account.negative %}
  <div class="text">
    <h4>Négatif</h4>
    <ul class="list-unstyled">
      {% if account.negative.start %}
      <li>Depuis le <b>{{ account.negative.start|date:"d/m/Y à H:i" }}</b></li>
      {% endif %}
    </ul>
  </div>
  {% endif %}

</aside>



{% if account.user == request.user %}
<div class="buttons tabs-buttons">
  <div>
    <a class="btn btn-primary-w focus" data-toggle="pill" href="#tab_stats">
      Statistiques
      <span class="hidden-xs glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>
  <div>
    <a class="btn btn-primary-w" data-toggle="pill" href="#tab_history">
      Historique
      <span class="hidden-xs glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>
</div>
{% endif %}

<script type="text/javascript">
  $(function () {

    // Tooltips
    $('[data-toggle="tooltip"]').tooltip();

    // Opened tab button
    let tabs_buttons = $('.tabs-buttons a');
    tabs_buttons.click(function () {
      tabs_buttons.removeClass('focus');
      $(this).addClass('focus');
    });

    // Delete button
    $('#button-delete').click(function () {
      $.confirm({
        title: 'Confirmer la suppression',
        content: `
          <div class="warning">
          <span class='glyphicon glyphicon-warning-sign'></span><span>Cette opération est irréversible !</span>
          </div>
          <span>Toutes les données associées à ce compte seront anonymisées.</span>
        `,
        backgroundDismiss: true,
        animation: 'top',
        closeAnimation: 'bottom',
        keyboardEnabled: true,
        confirm: function () {
          $('#account-delete-form').submit();
        }
      })
    })
  });
</script>
