{% extends "base.html" %}

{% block navbar_start %}
<div class="navbar-item">{{ gettext("My consumptions") }}</div>
{% endblock %}

{% block content %}
<div class="section has-text-centered">
    <h1 class="title">
      {{ gettext("My past consumptions") }}
    </h1>
    <div class="box has-background-info-light has-text-info-dark has-text-centered">
      <div class="icon">{{ "info-circle"|icon }}</div>
      <p>
        {{ gettext("Here you can view your past consumptions.") }}<br>
      </p>
    </div>

  <div class="table-container">
    <table class="table has-text-left mx-auto">
      <thead>
        <tr>
          <th>{{ gettext("Date") }}</th>
          <th>{{ gettext("Name") }}</th>
          <th>{{ gettext("Description") }}</th>
          <th>{{ gettext("Purpose") }}</th>
          <th>{{ gettext("Unit price") }}</th>
          <th>{{ gettext("Amount") }}</th>
          <th>{{ gettext("Total price") }}</th>
        </tr>
      </thead>
      <tbody>
        {% if view_model.show_consumptions %}
        {% for consumption in view_model.consumptions %}
        <tr>
          <td>{{ consumption.consumption_date }}</td>
          <td>{{ consumption.product_name }}</td>
          <td>{{ consumption.product_description }}</td>
          <td>{{ consumption.consumption_type }}</td>
          <td>{{ consumption.price_per_unit }}</td>
          <th>{{ consumption.amount }}</th>
          <th>{{ consumption.price_total }}</th>
        </tr>
        {% endfor %}
        {% else %}
        <div>{{ gettext("You haven't consumed anything yet.") }}</div>
        {% endif %}
      </tbody>
    </table>
  </div>
</div>

{% endblock %}