{% extends "juntagrico/manage/base.html" %}
{% load i18n %}
{% load static %}
{% load juntagrico.config %}
{% block body_extra_classes %}wide-layout{% endblock %}

{% block page_title %}
    <h3>
        {% trans "Open bills" %}
    </h3>
{% endblock %}

{% block content %}
    {% include 'jb/snippets/year_form.html' %}

    <ul class="nav nav-tabs mb-3">
        <li class="nav-item">
          <a class="nav-link {{ state_active.0 }}" href="{% url 'jb:open-bills-list' %}?state=open">{% trans "Open" %}</a>
        </li>
        <li class="nav-item">
            <a class="nav-link {{ state_active.1 }}" href="{% url 'jb:open-bills-list' %}?state=open75">{% trans "Open" %} 75%</a>
        </li>
        <li class="nav-item">
            <a class="nav-link {{ state_active.2 }}" href="{% url 'jb:open-bills-list' %}?state=open50">{% trans "Open" %} 50%</a>
        </li>
        <li class="nav-item">
            <a class="nav-link {{ state_active.3 }}" href="{% url 'jb:open-bills-list' %}?state=open25">{% trans "Open" %} 25%</a>
        </li>
    </ul>
  
    {% if state == "all" %}
    <p class="mb-3">
        {{ bills_list | length }} {% trans "bills for" %} {{ selected_year.name }}
    </p>
    {% else %}
    <p class="mb-3">
        {{ bills_list | length }} {% trans "open bills with paid amount less than" %} {{ percent_paid }}%
    </p>
    {% endif %}

    {% include 'juntagrico/manage/member/snippets/toggle_buttons.html' %}
    {{ block.super }}
{% endblock %}

{% block list %}
    <table id="filter-table" class="table">
        <thead>
            <tr>
                <th scope="col">
                    {% trans "Number" %}
                </th>
                <th scope="col">
                    {% trans "Member" %}
                </th>
                <th scope="col" data-orderable="false">
                    {% trans "Kind" %}
                </th>
                <th scope="col">
                    {% trans "Date" %}
                </th>
                <th scope="col" class="text-right">
                    {% trans "Amount" %}
                </th>
                <th scope="col" class="text-right">
                    {% trans "Amount open" %}
                </th>
                <th scope="col" data-orderable="false">
                    {% trans "User view" %}
                </th>
            </tr>
        </thead>
        <tbody>
            {% for bill in bills_list %}
                <tr>
                    <td>
                        <a href="{% url 'admin:juntagrico_billing_bill_change' bill.id %}">
                        {{ bill.id }}
                        </a>
                    </td>
                    <td>
                        {% include 'juntagrico/manage/member/snippets/display_linked.html' with member=bill.member %}
                    </td>
                    <td>
                        {{ bill.item_kinds }}
                    </td>
                    <td data-order="{{ bill.bill_date|date:"Y-m-d" }}">
                        {{ bill.bill_date|date:"SHORT_DATE_FORMAT" }}
                    </td>
                    <td class="text-right">
                        {{ bill.amount | floatformat:2 }}
                    </td>
                    <td class="text-right">
                        {{ bill.amount_open | floatformat:2 }}
                    </td>
                    <td>
                        <a href="{% url 'jb:user-bill' bill.id %}">{{ bill.id }}</a>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
{% endblock %}