haikal/templates/vendors/vendors_list.html

{% extends 'base.html' %}
{% load i18n %}
{% load static %}
{% block title %}{% trans 'Vendors'|capfirst %}{% endblock title %}
{% block vendors %}<a class="nav-link active">{% trans "Vendors"|capfirst %}</a>{% endblock  %}

{% block content %}

<div class="container-fluid">
    <div class="card mb-3">
        <div class="card-header fw-light mb-0">
            {% include 'breadcrumbs.html' %}
        </div>
        <div class="card-body">

<div class="container-fluid p-2">
            <form method="get">
                <div class="input-group input-group-sm">
                    <button id="inputGroup-sizing-sm"
                            class="btn btn-sm btn-secondary rounded-start" type="submit">
                        {% trans 'search'|capfirst %}
                    </button>
                    <input type="text"
                           name="q"
                           class="form-control form-control-sm rounded-end"
                           value="{{ request.GET.q }}"
                           aria-describedby="inputGroup-sizing-sm"/>
                 <!-- Clear Button -->
        {% if request.GET.q %}
            <a href="{% url request.resolver_match.view_name %}"
               class="btn btn-sm btn-outline-danger ms-1 rounded">
                <i class="bi bi-x-lg"></i>
            </a>
        {% endif %}
                </div>

            </form>
        </div>
   <table class="table table-hover table-responsive-sm">
        <thead>
            <tr>
                <th>{% trans 'name'|capfirst %}</th>
                
                <th>{% trans 'logo'|capfirst %}</th>
                <th>{% trans 'address'|capfirst %}</th>
                <th>{% trans 'actions'|capfirst %}</th>
            </tr>
        </thead>
        <tbody>
        {% if page_obj.object_list %}
            {% for vendor in page_obj.object_list %}
            <tr>
               <td>
               {{ vendor.get_local_name }}
               </td>
                <td>
                    {% if vendor.logo %}
                    <img src="{% static 'images/' %}{{ vendor.logo }}" width="100" height="30">
                    {% else %}
                        <img src="{% static 'images/logos/default_no_logo.png' %}" width="100" height="30">
                    {% endif %}
                </td>
                <td>{{ vendor.address }}</td>
                <td>
                    <a class="btn btn-sm btn-warning" href="{% url 'vendor_detail' vendor.id %}">{% trans 'view'|capfirst %}</a>

                </td>
            </tr>
            {% endfor %}
        {% else %}
        <tr>
            <td class="border-0" colspan="6">{% trans 'no vendors found'|capfirst %}</td>
        </tr>
        {% endif %}
        </tbody>
    </table>

    <nav aria-label="Page navigation">
        <ul class="pagination pagination-sm justify-content-center">
            {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?{% if request.GET.q %}q={{ request.GET.q }}&{% endif %}page=1" aria-label={% trans 'first'|capfirst %}>
                        <span aria-hidden="true">&laquo;&laquo;</span>
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?{% if request.GET.q %}q={{ request.GET.q }}&{% endif %}page={{ page_obj.previous_page_number }}" aria-label={% trans 'previous'|capfirst %}>
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <span class="page-link" aria-hidden="true">&laquo;&laquo;</span>
                </li>
                <li class="page-item disabled">
                    <span class="page-link" aria-hidden="true">&laquo;</span>
                </li>
            {% endif %}
            {% for num in page_obj.paginator.page_range %}
                {% if page_obj.number == num %}
                    <li class="page-item active">
                        <span class="page-link">{{ num }}</span>
                    </li>
                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                    <li class="page-item">
                        <a class="page-link" href="?{% if request.GET.q %}q={{ request.GET.q }}&{% endif %}page={{ num }}">{{ num }}</a>
                    </li>
                {% endif %}
            {% endfor %}
            {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?{% if request.GET.q %}q={{ request.GET.q }}&{% endif %}page={{ page_obj.next_page_number }}" aria-label={% trans 'next'|capfirst %}>
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?{% if request.GET.q %}q={{ request.GET.q }}&{% endif %}page={{ page_obj.paginator.num_pages }}" aria-label={% trans 'last'|capfirst %}>
                        <span aria-hidden="true">&raquo;&raquo;</span>
                    </a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <span class="page-link" aria-hidden="true">&raquo;</span>
                </li>
                <li class="page-item disabled">
                    <span class="page-link" aria-hidden="true">&raquo;&raquo;</span>
                </li>
            {% endif %}
        </ul>
    </nav>
        </div>
    </div>
</div>
{% endblock %}