{% extends 'base.html' %}
{% load i18n %}
{% block title %}
    {% trans "Representatives" %}
{% endblock title %}
{% block content %}
    <div class="row my-4">
        <h2>{% trans "Representatives" %}</h2>
        <div class="d-flex justify-content-between align-items-center mb-3">
            <form method="get" class="d-flex">
                <input type="text"
                       name="q"
                       class="form-control form-control-sm"
                       placeholder="{% trans 'Search' %}"
                       value="{{ request.GET.q }}">
                <button type="submit" class="btn btn-sm btn-phoenix-secondary ms-2">{% trans "Search" %}</button>
            </form>
            <a href="{% url 'representative_create' %}"
               class="btn btn-sm btn-phoenix-primary">{% trans "Add Representative" %}</a>
        </div>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>{% trans "Name" %}</th>
                    <th>{% trans "ID Number" %}</th>
                    <th>{% trans "Phone" %}</th>
                    <th>{% trans "Actions" %}</th>
                </tr>
            </thead>
            <tbody>
                {% for rep in representatives %}
                    <tr>
                        <td>{{ rep.get_local_name }}</td>
                        <td>{{ rep.id_number }}</td>
                        <td>{{ rep.phone_number }}</td>
                        <td>
                            <a href="{% url 'representative_detail' rep.id %}"
                               class="btn btn-sm btn-phoenix-success">{% trans "view" %}</a>
                        </td>
                    </tr>
                {% empty %}
                    <tr>
                        <td colspan="4" class="text-center">{% trans "No representatives found." %}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
        {% if is_paginated %}
            <nav aria-label="Page navigation">
                <ul class="pagination mb-0">
                    {% if page_obj.has_previous %}
                        <li class="page-item py-0">
                            <a class="page-link"
                               href="?page={{ page_obj.previous_page_number }}"
                               aria-label="Previous">
                                <span aria-hidden="true"><span class="fas fa-chevron-left"></span></span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page-item disabled">
                            <a class="page-link" href="#" aria-label="Previous">
                                <span aria-hidden="true"><span class="fas fa-chevron-left"></span></span>
                            </a>
                        </li>
                    {% endif %}
                    {% for num in page_obj.paginator.page_range %}
                        {% if page_obj.number == num %}
                            <li class="page-item active">
                                <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                            </li>
                        {% else %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                            </li>
                        {% endif %}
                    {% endfor %}
                    {% if page_obj.has_next %}
                        <li class="page-item">
                            <a class="page-link"
                               href="?page={{ page_obj.next_page_number }}"
                               aria-label="Next">
                                <span aria-hidden="true"><span class="fas fa-chevron-right"></span></span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page-item disabled">
                            <a class="page-link" href="#" aria-label="Next">
                                <span aria-hidden="true"><span class="fas fa-chevron-right"></span></span>
                            </a>
                        </li>
                    {% endif %}
                </ul>
            </nav>
        {% endif %}
    </div>
{% endblock %}