{% load i18n humanize %}

<!-- DataTables Example -->
<div class="card mb-3">
    <div class="card-header">
        <i class="fas fa-table"></i>
        {% if ticket_list_caption %}{{ ticket_list_caption }}{% else %}{% trans "Your Tickets" %}{% endif %}
    </div>
    <div class="card-body">
        <div class="table-responsive">
        <table class="table table-bordered table-sm table-striped" id="dataTable" width="100%" cellspacing="0">
            <thead class="thead-light">
                <tr>
                    <th>{% trans "Ticket" %}</th>
                    <th>{% trans "Priority" %}</th>
                    <th>{% trans "Queue" %}</th>
                    <th>{% trans "Status" %}</th>
                    <th>{% trans "Last Update" %}</th>
                </tr>
            </thead>
            <tbody>
                {% for ticket in ticket_list %}
                <tr class="{{ ticket.get_priority_css_class }}">
                    <td class="tickettitle"><a href="{{ ticket.get_absolute_url }}">{{ ticket.id }}. {{ ticket.title }}</a></td>
                    <td>{{ ticket.priority }}</td>
                    <td>{{ ticket.queue }}</td>
                    <td>{{ ticket.get_status }}</td>
                    <td><span title='{{ ticket.modified|date:"DATETIME_FORMAT" }}'>{{ ticket.modified|naturaltime }}</span></td>
                </tr>
                {% empty %}
                <tr>{% if ticket_list_empty_message %}<td colspan='6'>{{ ticket_list_empty_message }}</td>{% else %}<td colspan='6'>{% trans "You do not have any pending tickets." %}</td>{% endif %}</tr>
                {% endfor %}
            </tbody>
        </table>
        </div>
        <!-- /.table-responsive -->
        {% if ticket_list.has_other_pages %}
            <ul class="pagination">
            <!-- if we aren't on page one, go back to start and go back one controls -->
            {% if ticket_list.has_previous %}
                <li><a href="?{{ page_var }}=1">&laquo;&laquo;</a></li>
                <li><a href="?{{ page_var }}={{ ticket_list.previous_page_number }}">&laquo;</a></li>
            {% else %}
                <li class="disabled"><span>&laquo;&laquo;</span></li>
                <li class="disabled"><span>&laquo;</span></li>
            {% endif %}
            <!-- other pages, set thresh to the number to show before and after active -->
            {% with 5 as thresh %}
            {% for i in ticket_list.paginator.page_range %}
            {% if ticket_list.number == i %}
                <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
            {% elif i <= ticket_list.number|add:5 and i >= ticket_list.number|add:-5 %}
                <li><a href="?{{ page_var }}={{ i }}">{{ i }}</a></li>
            {% endif %}
            {% endfor %}
            {% endwith %}
            <!-- if we aren't on the last page, go forward one and go to end controls -->
            {% if ticket_list.has_next %}
                <li><a href="?{{ page_var }}={{ ticket_list.next_page_number }}">&raquo;</a></li>
                <li><a href="?{{ page_var }}={{ ticket_list.paginator.num_pages }}">&raquo;&raquo;</a></li>
            {% else %}
                <li class="disabled"><span>&raquo;</span></li>
                <li class="disabled"><span>&raquo;&raquo;</span></li>
            {% endif %}
            </ul>
        {% endif %}
    </div>
    <div class="card-footer small text-muted">Listing {{ ticket_list|length }} ticket(s).</div>
</div>


