{% extends 'base.html' %}
{% load i18n dpagination %}

{% block title %}{% trans 'Service users' %}{% endblock %}

{% block breadcrumb %}
    <ol class="breadcrumb">
        <li><span class="glyphicon glyphicon-home"></span></li>
        <li><a href="{% url 'tarifs:home' %}">{% trans 'Services' %}</a></li>
        <li class="active">{% trans 'Service users' %}</li>
    </ol>
{% endblock %}

{% block page-header %}
    {% blocktrans with service_name=tariff.title %}'{{ service_name }}' tariff users{% endblocktrans %}.
    <span class="small">{% trans 'Total:' %} {{ total }}</span>
{% endblock %}

{% block main %}

    <div class="table-responsive">
        <table class="table table-striped table-bordered">
            <thead>
            <tr>
                <th>
                    <a href="{% url 'tarifs:service_users' tariff.id %}?{% url_order_by request order_by='username' %}">
                        {% trans 'Username' %}
                    </a>
                    {% if order_by == 'username' %}<span class="glyphicon glyphicon-filter"></span>{% endif %}
                </th>
                <th>
                    <a href="{% url 'tarifs:service_users' tariff.id %}?{% url_order_by request order_by='fio' %}">
                        {% trans 'Username' %}
                    </a>
                    {% if order_by == 'fio' %}<span class="glyphicon glyphicon-filter"></span>{% endif %}
                </th>
                <th width="50">#</th>
            </tr>
            </thead>
            <tbody>
                {% for customer in object_list %}
                    <tr>
                        <td><a href="{{ customer.get_absolute_url }}">{{ customer.username }}</a></td>
                        <td>{{ customer.fio }}</td>
                    </tr>
                {% empty %}
                    <tr>
                        <td colspan="3">{% trans 'Customers that uses this service not found.' %}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock %}