{% extends "kfet/base_col_2.html" %}
{% load static %}
{% load kfet_tags %}
{% load l10n %}

{% block extra_head %}
<script type="text/javascript" src="{% static 'kfet/js/history.js' %}"></script>
<script type="text/javascript" src="{% url 'js_reverse' %}" ></script>
<script type="text/javascript" src="{% static 'kfet/vendor/moment/moment.min.js' %}"></script>
<script type="text/javascript" src="{% static 'kfet/vendor/moment/fr.js' %}"></script>
<script type="text/javascript" src="{% static 'kfet/vendor/moment/moment-timezone-with-data-2012-2022.min.js' %}"></script>
{% if account.user == request.user %}
<script type="text/javascript" src="{% static 'kfet/vendor/Chart.min.js' %}"></script>
<script type="text/javascript" src="{% static 'kfet/js/statistic.js' %}"></script>
{% autoescape off %}
<script type="text/javascript">
$(document).ready(function() {
    var stat_last = new StatsGroup(
        "{% url 'kfet.account.stat.operation.list' trigramme=account.trigramme %}",
        $("#stat_last")
    );
    var stat_balance = new StatsGroup(
        "{% url 'kfet.account.stat.balance.list' trigramme=account.trigramme %}",
        $("#stat_balance")
    );
});
</script>
{% endautoescape %}
{% endif %}
{% endblock %}

{% block title %}
{% if account.user == request.user %}
    Mon compte
{% else %}
    Compte - {{ account.trigramme }}
{% endif %}
{% endblock %}

{% block header-title %}
{% if account.user == request.user %}
    Mon compte
{% else %}
    Informations du compte {{ account.trigramme }}
{% endif %}
{% endblock %}

{% block footer %}
{% include "kfet/base_footer.html" %}
{% endblock %}

{% block fixed %}
{% include "kfet/left_account.html" %}
{% endblock %}

{% block main %}

<div class="tab-content">

  {% if account.user == request.user %}
  <div id="tab_stats" class="tab-pane fade in active">
    <section>
      <div>
        <h3>Ma balance</h3>
          <div id="stat_balance"></div>
        <h3>Ma consommation</h3>
          <div id="stat_last"></div>
      </div>
    </section>
  </div><!-- stats tab -->
  {% endif %}

  <div id="tab_history" class="tab-pane fade {% if account.user != request.user %}in active{% endif %}">
    <section>
      {% if addcosts %}
      <h2>Gagné des majorations</h2>
      <div>
        <ul>
          {% for addcost in addcosts %}
          <li>{{ addcost.date|date:'l j F' }}: +{{ addcost.sum_addcosts }}€</li>
          {% endfor %}
          </ul>
      </div>
      {% endif %}
      <div id="history"></div>
    </section>
  </div><!-- history tab -->

</div><!-- tab-content -->

<script type="text/javascript">
$(document).ready(function() {
    settings = { 'subvention_cof': parseFloat({{ kfet_config.subvention_cof|unlocalize }})}

    khistory = new KHistory({
        display_trigramme: false,
        fetch_options: {
            account: {{ account.pk }},
        }
    });

    $(document).on('keydown', function (e) {
        if (e.keyCode == 46) {
            // DEL (Suppr)
            khistory.cancel_selected()
        }
    });

    khistory.fetch().done(function () {
            var nb_opes = khistory.$container.find('.ope:not(.canceled)').length;
            $('#nb_opes').text(nb_opes);
    });
});
</script>

{% endblock %}
