{% extends "default_content_page.html" %}
{% block title %}Список Контактів{% endblock title %}
{% block navigation %}
{% endblock %}
{% block content-title %}Список Контактів{% endblock %}
{% block content-inner %}
<div class="card shadow mb-4">
    <div class="card-header py-3">
        <div class="row">
        <div class="col-md-8">
             <div class="alphabet-filter">
                 <span>Фільтр:</span>
                 <a href="?">Всі</a>
                 {% for letter in alphabet %}
                     <a href="?letter={{ letter }}" {% if letter == filter_letter %}class="active"{% endif %}>{{ letter }}</a>
                 {% endfor %}
             </div>
        </div>
        <div class="col-md-4">
            <div class="search-filter">
                <form method="GET" action="">
                    <input type="text" name="q" placeholder="Пошук..." value="{{ search_query }}" />
                    <button type="submit">Пошук</button>
                </form>
            </div>
        </div>
        </div>
    </div>
    <div class="card-body">
            <table class="table table-responsive-sm">
                <thead>
                    <tr>
                        <th>Прізвище, Імʼя</th>
                        <th>Посада</th>
                        <th>Дата народження</th>
                        <th>Детально</th>
                    </tr>
                </thead>
                <tbody>
                {% for contact_person in contact_persons %}
                    <tr>
                        <td><a href="{% url 'contacts:contact_person_detail' contact_person.id %}">
                            {{ contact_person.surname }}, {{ contact_person.name }}</a>
                        </td>
                        <td>{{ contact_person.position }}</td>
                        <td>{{ contact_person.birth_date }}</td>
                        <td><a href="{% url 'contacts:contact_person_detail' contact_person.id %}">Детально</a></td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            
            <div class="pagination">
                {% if is_paginated %}
                    <span class="page-links">
                        {% if page_obj.has_previous %}
                            <a href="?{% if search_query %}q={{ search_query }}&{% endif %}{% if filter_letter %}letter={{ filter_letter }}&{% endif %}page={{ page_obj.previous_page_number }}">Попередня</a>
                        {% endif %}
            
                        <span class="current">
                            Сторінка {{ page_obj.number }} з {{ paginator.num_pages }}
                        </span>
            
                        {% if page_obj.has_next %}
                            <a href="?{% if search_query %}q={{ search_query }}&{% endif %}{% if filter_letter %}letter={{ filter_letter }}&{% endif %}page={{ page_obj.next_page_number }}">Наступна</a>
                        {% endif %}
                    </span>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}