{% extends "musician/base.html" %}
{% load i18n l10n %}

{% block content %}

<h1 class="service-name">{% trans "Billing" %}</h1>
<p class="service-description">{% trans "Billing page description." %}</p>

<table class="table service-list">
  <colgroup>
    <col span="1" style="width: 15%;">
    <col span="1" style="width: 15%;">
    <col span="1" style="width: 40%;">
    <col span="1" style="width: 10%;">
    <col span="1" style="width: 10%;">
</colgroup>
<thead class="thead-dark">
  <tr>
    <th scope="col">{% trans "Number" %}</th>
    <th scope="col">{% trans "Bill date" %}</th>
    <th scope="col">{% trans "Type" %}</th>
    <th scope="col">{% trans "Total" %}</th>
    <th scope="col">{% trans "Download PDF" %}</th>
  </tr>
</thead>
<tbody>
  {% for bill in object_list %}
  <tr>
    <th scope="row">{{ bill.number }}</th>
    <td>{{ bill.created_on }}</td>
    <td>{{ bill.type }}</td>
    <td>{{ bill.total|floatformat:2|localize }}€</td>
    <td><a class="text-dark" href="{% url 'musician:bill-download' bill.id %}" target="_blank" rel="noopener noreferrer"><i class="fas fa-file-pdf"></i></a></td>
  </tr>
  {% endfor %}
</tbody>
{# TODO: define proper colspan #}
{% include "musician/components/table_paginator.html" %}
</table>

{% endblock %}
