{% extends "base.html" %}

{% load humanize i18n %}

{% block nav_pills %}
  <ul class="nav nav-pills">
    <li class="nav-item" role="presentation">
      <a class="nav-link active"
         data-bs-target="#trial"
         role="tab"
         data-bs-toggle="tab"
         href="#">{% translate "Trial" %} <span class="badge  text-bg-secondary">{{ trial|length|intcomma }}</span></a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link"
         data-bs-target="#pending"
         role="tab"
         data-bs-toggle="tab"
         href="#">{% translate "Pending approval" %} <span class="badge  text-bg-secondary">{{ pending|length|intcomma }}</span></a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link"
         data-bs-target="#paid"
         role="tab"
         data-bs-toggle="tab"
         href="#">{% translate "Commercial" %} <span class="badge  text-bg-secondary">{{ paid|length|intcomma }}</span></a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link"
         data-bs-target="#free"
         role="tab"
         data-bs-toggle="tab"
         href="#">{% translate "Libre" %} <span class="badge  text-bg-secondary">{{ free|length|intcomma }}</span></a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link"
         data-bs-target="#removal"
         role="tab"
         data-bs-toggle="tab"
         href="#">{% translate "Scheduled removal" %} <span class="badge  text-bg-secondary">{{ removal|length|intcomma }}</span></a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link"
         data-bs-target="#terminated"
         role="tab"
         data-bs-toggle="tab"
         href="#">{% translate "Terminated" %} <span class="badge  text-bg-secondary">{{ terminated|length|intcomma }}</span></a>
    </li>
  </ul>
{% endblock nav_pills %}

{% block breadcrumbs %}
  <li class="breadcrumb-item">
    <a href="{% url 'manage' %}">{% translate "Manage" %}</a>
  </li>
  <li class="breadcrumb-item">
    <a href="{% url 'manage-billing' %}">{% translate "Billing" %}</a>
  </li>
{% endblock breadcrumbs %}

{% block content %}

  <div class="tab-content">
    <div class="tab-pane active" id="trial">{% include "billing/list.html" with objects=trial show_expiry=1 %}</div>
    <div class="tab-pane" id="pending">{% include "billing/list.html" with objects=pending show_expiry=1 %}</div>
    <div class="tab-pane" id="paid">{% include "billing/list.html" with objects=paid %}</div>
    <div class="tab-pane" id="free">{% include "billing/list.html" with objects=free %}</div>
    <div class="tab-pane" id="removal">{% include "billing/list.html" with objects=removal show_removal=1 %}</div>
    <div class="tab-pane" id="terminated">{% include "billing/list.html" with objects=terminated %}</div>
  </div>

{% endblock content %}