{% extends "core/base.html" %}
{% load bootstrap4 staticfiles %}
{% block page_title %}
 <a href="{{ prev_month_url }}" class="btn btn-dark btn-sm"><img src="{% static "img/chevrons-left.svg" %}" /></a>
 Comptes de {{mois}} {{annee}}
 <a href="{% url "add"%}?year={{year}}&month={{month}}" class="btn btn-dark btn-sm m-0"><img src="{% static "img/plus.svg" %}" /></a>
 {% if next_month_url %}
 <a href="{{ next_month_url}}" class="btn btn-dark btn-sm"><img src="{% static "img/chevrons-right.svg" %}" /></a>
 {% endif %}
{% endblock %}
{% block body_content %}
<div class="row">
 {% bootstrap_messages %}
 <div class="col-md-9">
   {% if not object_list %}
   <p class="alert alert-warning m-3">Aucune donnée</p>
   {% else %}
   <table class="table table-striped table-hover">
     <thead class="thead-inverse">
      <tr>
        <th width="25%">Date</th>
        <th width="40%">Description</th>
        <th width="20%">Etiquette</th>
        <th width="10%">Montant</th>
        <th width="5%">Actions</th></tr>
     </thead>
     {% for d in object_list %}
     <tr>
       <td>{{ d.date }}</td>
       <td>{{ d.description }}</td>
       <td>{{ d.etiquette }}</td>
       <td class="text-{% if d.montant > 0 %}success{% else %}danger{%endif%}">
         <strong>{{ d.montant }}</strong>
       </td>
       <td>
         <a href="{% url "update" pk=d.pk %}"><img src="{% static "img/edit.svg" %}" /></a>
         <a href="{% url "delete" pk=d.pk %}"><img src="{% static "img/delete.svg" %}" /></a>
       </td>
     </tr>
     {% endfor %}
   </table>
   {% endif %}
 </div>
 <div class="col-md-3 mt-3">
  <h2 class="page-title">Balance 
    <span class="badge float-right badge-{% if data.balance > 0 %}success{% else %}danger{% endif%}">{{ data.balance|floatformat:-2 }} €</span>
  </h2>
  <div class="card mt-3" >
   <div class="card-header">
    Dépenses
   </div>
    <ul class="list-group list-group-flush">
     {% for label, montant in data.par_etiquette.items %}
     <li class="list-group-item">{{ label }} 
       <span class="badge badge-dark p-2 align-middle float-right">{{ montant|floatformat:-2 }} €</span>
     </li>
     {% endfor %}
    </ul>
  </div>
 </div>
</div>
{% endblock %}