{% extends "base.html" %}
{% load static %}
{% load i18n %}

{% block head %}
<link rel="stylesheet" href="{% static 'contracts/css/contracts_index.css' %}">
{% endblock head %}

{% block content %}

<!-- ─── Modale de Filtres ──────────────────────────────────────── -->
<div class="modal fade" id="filterModal" tabindex="-1" aria-labelledby="filterModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <div>
                    <h5 class="modal-title" id="filterModalLabel">{% translate "Filtrer les commandes et marchés" %}</h5>
                    <div class="text-muted small" style="font-size: 0.8rem;">{% translate "Sélectionnez les critères de recherche" %}</div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
            </div>
            <div class="modal-body">
                <form method="get" action="{% url 'contracts:contracts_index' %}" id="filter-form">
                    <input type="hidden" name="tab" id="filter-tab-input" value="{{ active_tab }}">
                    {% if search_query %}<input type="hidden" name="search" value="{{ search_query }}">{% endif %}
                    {% if sort_field %}<input type="hidden" name="sort" value="{{ sort_field }}">{% endif %}
                    {% if sort_dir %}<input type="hidden" name="dir" value="{{ sort_dir }}">{% endif %}
                    {% if page_size %}<input type="hidden" name="page_size" value="{{ page_size }}">{% endif %}

                    <!-- Statuts -->
                    <div class="filter-section">
                        <div class="filter-section-header">
                            <label>{% translate "Statut" %}</label>
                            <div class="filter-section-buttons">
                                <button type="button" class="btn select-all-btn">{% translate "Tous" %}</button>
                                <button type="button" class="btn deselect-all-btn">{% translate "Aucun" %}</button>
                            </div>
                        </div>
                        <div class="filter-options">
                            {% for key, label in status_choices %}
                            <div class="filter-option">
                                <input type="checkbox" name="status" id="status_{{ key }}" value="{{ key }}" {% if key in selected_statuses %}checked{% endif %}>
                                <label for="status_{{ key }}" class="context-badge {{ key }}">{{ label }}</label>
                            </div>
                            {% endfor %}
                        </div>
                    </div>

                    <!-- Thématiques -->
                    {% if available_thematics %}
                    <div class="filter-section">
                        <div class="filter-section-header">
                            <label>{% translate "Thématiques" %}</label>
                            <div class="filter-section-buttons">
                                <button type="button" class="btn select-all-btn">{% translate "Tous" %}</button>
                                <button type="button" class="btn deselect-all-btn">{% translate "Aucun" %}</button>
                            </div>
                        </div>
                        <div class="filter-options">
                            {% for thematic in available_thematics %}
                            <div class="filter-option">
                                <input type="checkbox" name="thematic" id="thematic_{{ thematic.id }}" value="{{ thematic.id }}" {% if thematic.id|stringformat:"s" in selected_thematics or thematic.code in selected_thematics %}checked{% endif %}>
                                <label for="thematic_{{ thematic.id }}">
                                    {% if thematic.icon %}<i class="bi {{ thematic.icon }} me-1"></i>{% endif %}{{ thematic.name }}
                                </label>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}

                    <!-- Marchés / Contrats -->
                    {% if available_contracts %}
                    <div class="filter-section">
                        <div class="filter-section-header">
                            <label>{% translate "Marchés" %}</label>
                            <div class="filter-section-buttons">
                                <button type="button" class="btn select-all-btn">{% translate "Tous" %}</button>
                                <button type="button" class="btn deselect-all-btn">{% translate "Aucun" %}</button>
                            </div>
                        </div>
                        <div class="contracts-filter-container">
                            <div class="contracts-filter-search-box">
                                <i class="bi bi-search search-icon"></i>
                                <input type="text" id="contract-filter-search" class="form-control form-control-sm" placeholder="{% translate 'Filtrer la liste des marchés...' %}">
                            </div>
                            <div class="contracts-filter-scroll">
                                {% for c in available_contracts %}
                                <div class="contract-filter-item">
                                    <input type="checkbox" name="contract" id="contract_{{ c.id }}" value="{{ c.id }}" class="form-check-input" {% if c.id|stringformat:"s" in selected_contracts %}checked{% endif %}>
                                    <label for="contract_{{ c.id }}">
                                        <span class="fw-semibold">{{ c.contract_number }}</span> – {{ c.company.name }}
                                    </label>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    {% endif %}

                    <!-- Période -->
                    <div class="filter-section mb-0">
                        <div class="filter-section-header">
                            <label>{% translate "Période de commande" %}</label>
                        </div>
                        <div class="row g-2 align-items-center">
                            <div class="col-md-6">
                                <label for="date-from" class="form-label small text-muted mb-1">{% translate "Commandes à partir du" %}</label>
                                <input type="date" class="form-control form-control-sm" id="date-from" name="date_from" value="{{ date_from }}">
                            </div>
                            <div class="col-md-6">
                                <label for="date-to" class="form-label small text-muted mb-1">{% translate "jusqu'au" %}</label>
                                <input type="date" class="form-control form-control-sm" id="date-to" name="date_to" value="{{ date_to }}">
                            </div>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <a href="{% url 'contracts:contracts_index' %}" class="btn btn-link text-muted p-0 text-decoration-none d-flex align-items-center gap-1" style="font-size: 0.85rem; font-weight: 500;">
                    <i class="bi bi-arrow-counterclockwise"></i> {% translate "Réinitialiser" %}
                </a>
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-sm btn-outline-secondary px-3 py-2" data-bs-dismiss="modal" style="border-radius: 8px; font-weight: 500;">{% translate "Annuler" %}</button>
                    <button type="submit" form="filter-form" class="btn btn-sm btn-dark px-4 py-2" style="background-color: #0f172a; border-color: #0f172a; border-radius: 8px; font-weight: 600;">
                        <i class="bi bi-check2 me-1"></i>{% translate "Filtrer" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ─── Contenu Principal ─────────────────────────────────────── -->
<div class="contracts-page-container">

    <!-- Header avec onglets et bouton d'action -->
    <div class="contracts-header">
        <ul class="nav nav-tabs contracts-tabs" id="tablesTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link {% if active_tab == 'orders' %}active{% endif %}" id="orders-tab" data-bs-toggle="tab" data-bs-target="#orders-content" type="button" role="tab" aria-controls="orders-content" aria-selected="{% if active_tab == 'orders' %}true{% else %}false{% endif %}">
                    <i class="bi bi-receipt"></i>
                    {% translate "Commandes" %}
                    <span class="tab-counter-badge">{{ orders_paginator.count }}</span>
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link {% if active_tab == 'contracts' %}active{% endif %}" id="contracts-tab" data-bs-toggle="tab" data-bs-target="#contracts-content" type="button" role="tab" aria-controls="contracts-content" aria-selected="{% if active_tab == 'contracts' %}true{% else %}false{% endif %}">
                    <i class="bi bi-briefcase"></i>
                    {% translate "Marchés/Contrats" %}
                    <span class="tab-counter-badge">{{ contracts_paginator.count }}</span>
                </button>
            </li>
        </ul>

        {% if is_add_order_allowed %}
        <a href="{% url 'contracts:contracts_orders_add' %}" class="btn-new-order">
            <i class="bi bi-plus-circle"></i>
            {% translate "Nouvelle commande" %}
        </a>
        {% endif %}
    </div>

    <!-- Barre d'outils : Recherche et Filtres -->
    <div class="contracts-toolbar">
        <div class="search-widget">
            <div class="search-input-wrapper">
                <i class="bi bi-search search-icon-left"></i>
                <input type="text" id="main-search-input" class="search-input" value="{{ search_query }}" placeholder="{% translate 'Rechercher une commande, un marché, une description, un prestataire...' %}">
                <button type="button" id="main-search-clear" class="search-clear-btn" title="{% translate 'Effacer la recherche' %}">
                    <i class="bi bi-x-circle-fill"></i>
                </button>
            </div>
        </div>

        <div class="toolbar-actions">
            <button type="button" class="filter-trigger-btn" data-bs-toggle="modal" data-bs-target="#filterModal">
                <i class="bi bi-funnel"></i>
                {% translate "Filtres" %}
                {% if active_filters_count > 0 %}
                <span class="filter-count-badge">{{ active_filters_count }}</span>
                {% endif %}
            </button>

            <div class="page-size-selector">
                <label for="page-size-select" class="d-none d-sm-inline">{% translate "Afficher par" %}</label>
                <select id="page-size-select" class="page-size-select">
                    <option value="25" {% if page_size == 25 %}selected{% endif %}>25</option>
                    <option value="50" {% if page_size == 50 %}selected{% endif %}>50</option>
                    <option value="100" {% if page_size == 100 %}selected{% endif %}>100</option>
                </select>
            </div>
        </div>
    </div>

    <!-- Puces des filtres actifs -->
    {% if active_filters_list %}
    <div class="active-filters-bar">
        <span class="active-filter-label">{% translate "Filtres actifs" %}:</span>
        {% for filter in active_filters_list %}
        <span class="active-filter-chip">
            {% if filter.is_status %}
            <span class="badge rounded-pill status-badge {{ filter.status_class }}" style="padding: 2px 6px; font-size: 0.72rem;">{{ filter.label }}</span>
            {% else %}
            {{ filter.label }}
            {% endif %}
            <button type="button" class="remove-filter-btn" data-param="{{ filter.param }}" data-val="{{ filter.val }}" title="{% translate 'Supprimer ce critère' %}">
                <i class="bi bi-x-circle-fill"></i>
            </button>
        </span>
        {% endfor %}
        <a href="{% url 'contracts:contracts_index' %}" class="btn-clear-all-filters">
            <i class="bi bi-x me-1"></i>{% translate "Tout effacer" %}
        </a>
    </div>
    {% endif %}

    <!-- Contenu des onglets -->
    <div class="tab-content" id="tablesTabContent">

        <!-- ─── Onglet Commandes ──────────────────────────────────── -->
        <div class="tab-pane fade {% if active_tab == 'orders' %}show active{% endif %}" id="orders-content" role="tabpanel" aria-labelledby="orders-tab">
            <div class="contracts-table-card">
                <div class="table-responsive">
                    <table class="contracts-table">
                        <thead>
                            <tr>
                                <th style="width: 48px;"></th>
                                <th class="sortable">
                                    <a href="{{ sort_urls.code }}" class="sort-link">
                                        <span>{% translate "Numéro de commande" %}</span>
                                        <i class="bi {% if sort_field == 'code' %}{% if sort_dir == 'asc' %}bi-sort-up text-primary{% else %}bi-sort-down text-primary{% endif %}{% else %}bi-arrow-down-up text-muted opacity-50{% endif %}"></i>
                                    </a>
                                </th>
                                <th class="sortable">
                                    <a href="{{ sort_urls.description }}" class="sort-link">
                                        <span>{% translate "Description" %}</span>
                                        <i class="bi {% if sort_field == 'description' %}{% if sort_dir == 'asc' %}bi-sort-up text-primary{% else %}bi-sort-down text-primary{% endif %}{% else %}bi-arrow-down-up text-muted opacity-50{% endif %}"></i>
                                    </a>
                                </th>
                                <th class="sortable">
                                    <a href="{{ sort_urls.date }}" class="sort-link">
                                        <span>{% translate "Date" %}</span>
                                        <i class="bi {% if sort_field == 'date' %}{% if sort_dir == 'asc' %}bi-sort-up text-primary{% else %}bi-sort-down text-primary{% endif %}{% else %}bi-arrow-down-up text-muted opacity-50{% endif %}"></i>
                                    </a>
                                </th>
                                <th class="sortable">
                                    <a href="{{ sort_urls.status }}" class="sort-link">
                                        <span>{% translate "Statut" %}</span>
                                        <i class="bi {% if sort_field == 'status' %}{% if sort_dir == 'asc' %}bi-sort-up text-primary{% else %}bi-sort-down text-primary{% endif %}{% else %}bi-arrow-down-up text-muted opacity-50{% endif %}"></i>
                                    </a>
                                </th>
                                {% if can_view_prices %}
                                <th class="sortable text-end">
                                    <a href="{{ sort_urls.amount }}" class="sort-link justify-content-end">
                                        <span>{% translate "Montant" %}</span>
                                        <i class="bi {% if sort_field == 'amount' %}{% if sort_dir == 'asc' %}bi-sort-up text-primary{% else %}bi-sort-down text-primary{% endif %}{% else %}bi-arrow-down-up text-muted opacity-50{% endif %} ms-1"></i>
                                    </a>
                                </th>
                                {% endif %}
                                <th style="width: 60px; text-align: center;">{% translate "Fichier" %}</th>
                                <th class="sortable">
                                    <a href="{{ sort_urls.contract }}" class="sort-link">
                                        <span>{% translate "Marché" %}</span>
                                        <i class="bi {% if sort_field == 'contract' %}{% if sort_dir == 'asc' %}bi-sort-up text-primary{% else %}bi-sort-down text-primary{% endif %}{% else %}bi-arrow-down-up text-muted opacity-50{% endif %}"></i>
                                    </a>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for order in orders_page %}
                            <tr>
                                <td class="text-center">
                                    <a href="/contracts/orders/{{ order.id }}" class="table-action-btn" title="{% translate 'Détail de la commande' %}">
                                        <i class="bi bi-info-circle"></i>
                                    </a>
                                </td>
                                <td>
                                    <a href="/contracts/orders/{{ order.id }}" class="table-code-link">
                                        {{ order.order_code }}
                                    </a>
                                </td>
                                <td>
                                    <span title="{{ order.description }}">{{ order.description|default:"-"|truncatechars:90 }}</span>
                                </td>
                                <td class="text-nowrap">{{ order.order_date|date:"d/m/Y" }}</td>
                                <td>
                                    <span class="status-badge {{ order.order_status }}">
                                        {{ order.get_order_status_display }}
                                    </span>
                                </td>
                                {% if can_view_prices %}
                                <td class="text-end text-nowrap fw-semibold">
                                    {% if order.total_amount %}
                                        {{ order.total_amount }} €
                                    {% else %}
                                        <span class="text-muted font-monospace">-</span>
                                    {% endif %}
                                </td>
                                {% endif %}
                                <td class="text-center">
                                    {% if order.order_file %}
                                    <a href="{{ order.order_file.url }}" target="_blank" class="file-download-btn" title="{% translate 'Télécharger le bon de commande' %}">
                                        <i class="bi bi-file-earmark-pdf"></i>
                                    </a>
                                    {% else %}
                                    <span class="text-muted opacity-50">–</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <a href="/contracts/{{ order.contract.id }}" class="text-decoration-none text-dark fw-medium">
                                        {{ order.contract.contract_number }}
                                    </a>
                                    <span class="text-muted small d-block">{{ order.contract.company.name }}</span>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="{% if can_view_prices %}8{% else %}7{% endif %}">
                                    <div class="table-empty-state">
                                        <div class="empty-icon"><i class="bi bi-inbox"></i></div>
                                        <div class="empty-title">{% translate "Aucune commande trouvée" %}</div>
                                        <div class="empty-desc">{% translate "Aucune commande ne correspond à vos critères de recherche actuels." %}</div>
                                        <a href="{% url 'contracts:contracts_index' %}" class="btn btn-sm btn-outline-secondary">
                                            <i class="bi bi-arrow-counterclockwise me-1"></i>{% translate "Réinitialiser les filtres" %}
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Barre de pagination Commandes -->
                {% if orders_paginator.count > 0 %}
                <div class="contracts-pagination-bar">
                    <div class="pagination-info">
                        {% blocktranslate with start=orders_page.start_index end=orders_page.end_index total=orders_paginator.count %}
                        Affichage de <strong>{{ start }}</strong> à <strong>{{ end }}</strong> sur <strong>{{ total }}</strong> commande(s)
                        {% endblocktranslate %}
                    </div>

                    {% if orders_page.has_other_pages %}
                    <nav class="pagination-nav" aria-label="{% translate 'Pagination des commandes' %}">
                        <ul class="pagination pagination-sm">
                            {% if orders_page.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?{{ orders_querystring }}&page={{ orders_page.previous_page_number }}" aria-label="{% translate 'Précédent' %}">
                                    <i class="bi bi-chevron-left"></i>
                                </a>
                            </li>
                            {% else %}
                            <li class="page-item disabled">
                                <span class="page-link"><i class="bi bi-chevron-left"></i></span>
                            </li>
                            {% endif %}

                            {% for page_num in orders_elided_range %}
                                {% if page_num == orders_paginator.ELLIPSIS %}
                                <li class="page-item disabled"><span class="page-link">…</span></li>
                                {% else %}
                                <li class="page-item {% if page_num == orders_page.number %}active{% endif %}">
                                    <a class="page-link" href="?{{ orders_querystring }}&page={{ page_num }}">{{ page_num }}</a>
                                </li>
                                {% endif %}
                            {% endfor %}

                            {% if orders_page.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?{{ orders_querystring }}&page={{ orders_page.next_page_number }}" aria-label="{% translate 'Suivant' %}">
                                    <i class="bi bi-chevron-right"></i>
                                </a>
                            </li>
                            {% else %}
                            <li class="page-item disabled">
                                <span class="page-link"><i class="bi bi-chevron-right"></i></span>
                            </li>
                            {% endif %}
                        </ul>
                    </nav>
                    {% endif %}
                </div>
                {% endif %}
            </div>
        </div>

        <!-- ─── Onglet Marchés / Contrats ────────────────────────── -->
        <div class="tab-pane fade {% if active_tab == 'contracts' %}show active{% endif %}" id="contracts-content" role="tabpanel" aria-labelledby="contracts-tab">
            <div class="contracts-table-card">
                <div class="table-responsive">
                    <table class="contracts-table">
                        <thead>
                            <tr>
                                <th style="width: 48px;"></th>
                                <th class="sortable">
                                    <a href="{{ contracts_sort_urls.code }}" class="sort-link">
                                        <span>{% translate "Numéro" %}</span>
                                        <i class="bi {% if contracts_sort_field == 'code' %}{% if contracts_sort_dir == 'asc' %}bi-sort-up text-primary{% else %}bi-sort-down text-primary{% endif %}{% else %}bi-arrow-down-up text-muted opacity-50{% endif %}"></i>
                                    </a>
                                </th>
                                <th class="sortable">
                                    <a href="{{ contracts_sort_urls.description }}" class="sort-link">
                                        <span>{% translate "Description" %}</span>
                                        <i class="bi {% if contracts_sort_field == 'description' %}{% if contracts_sort_dir == 'asc' %}bi-sort-up text-primary{% else %}bi-sort-down text-primary{% endif %}{% else %}bi-arrow-down-up text-muted opacity-50{% endif %}"></i>
                                    </a>
                                </th>
                                <th>{% translate "Thématiques" %}</th>
                                <th class="sortable">
                                    <a href="{{ contracts_sort_urls.company }}" class="sort-link">
                                        <span>{% translate "Prestataire" %}</span>
                                        <i class="bi {% if contracts_sort_field == 'company' %}{% if contracts_sort_dir == 'asc' %}bi-sort-up text-primary{% else %}bi-sort-down text-primary{% endif %}{% else %}bi-arrow-down-up text-muted opacity-50{% endif %}"></i>
                                    </a>
                                </th>
                                <th class="sortable">
                                    <a href="{{ contracts_sort_urls.start_date }}" class="sort-link">
                                        <span>{% translate "Début" %}</span>
                                        <i class="bi {% if contracts_sort_field == 'start_date' or contracts_sort_field == 'date' %}{% if contracts_sort_dir == 'asc' %}bi-sort-up text-primary{% else %}bi-sort-down text-primary{% endif %}{% else %}bi-arrow-down-up text-muted opacity-50{% endif %}"></i>
                                    </a>
                                </th>
                                <th class="sortable">
                                    <a href="{{ contracts_sort_urls.end_date }}" class="sort-link">
                                        <span>{% translate "Fin" %}</span>
                                        <i class="bi {% if contracts_sort_field == 'end_date' %}{% if contracts_sort_dir == 'asc' %}bi-sort-up text-primary{% else %}bi-sort-down text-primary{% endif %}{% else %}bi-arrow-down-up text-muted opacity-50{% endif %}"></i>
                                    </a>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for contract in contracts_page %}
                            <tr>
                                <td class="text-center">
                                    <a href="/contracts/{{ contract.id }}" class="table-action-btn" title="{% translate 'Détail du contrat' %}">
                                        <i class="bi bi-info-circle"></i>
                                    </a>
                                </td>
                                <td>
                                    <a href="/contracts/{{ contract.id }}" class="table-code-link">
                                        {{ contract.contract_number }}
                                    </a>
                                </td>
                                <td>
                                    <span title="{{ contract.description }}">{{ contract.description|default:"-"|truncatechars:90 }}</span>
                                </td>
                                <td>
                                    <div class="d-flex flex-wrap gap-1">
                                        {% for thematic in contract.thematics.all %}
                                        <span class="badge rounded-pill bg-light text-dark border" style="font-size: 0.72rem; font-weight: 500;">
                                            {% if thematic.icon %}<i class="bi {{ thematic.icon }} me-1"></i>{% endif %}{{ thematic.name }}
                                        </span>
                                        {% empty %}
                                        <span class="text-muted small">–</span>
                                        {% endfor %}
                                    </div>
                                </td>
                                <td class="fw-medium">{{ contract.company.name }}</td>
                                <td class="text-nowrap">{{ contract.start_date|date:"d/m/Y" }}</td>
                                <td class="text-nowrap">{{ contract.end_date|date:"d/m/Y" }}</td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="7">
                                    <div class="table-empty-state">
                                        <div class="empty-icon"><i class="bi bi-inbox"></i></div>
                                        <div class="empty-title">{% translate "Aucun marché trouvé" %}</div>
                                        <div class="empty-desc">{% translate "Aucun marché ne correspond à vos critères de recherche actuels." %}</div>
                                        <a href="{% url 'contracts:contracts_index' %}?tab=contracts" class="btn btn-sm btn-outline-secondary">
                                            <i class="bi bi-arrow-counterclockwise me-1"></i>{% translate "Réinitialiser les filtres" %}
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Barre de pagination Marchés -->
                {% if contracts_paginator.count > 0 %}
                <div class="contracts-pagination-bar">
                    <div class="pagination-info">
                        {% blocktranslate with start=contracts_page.start_index end=contracts_page.end_index total=contracts_paginator.count %}
                        Affichage de <strong>{{ start }}</strong> à <strong>{{ end }}</strong> sur <strong>{{ total }}</strong> marché(s)
                        {% endblocktranslate %}
                    </div>

                    {% if contracts_page.has_other_pages %}
                    <nav class="pagination-nav" aria-label="{% translate 'Pagination des marchés' %}">
                        <ul class="pagination pagination-sm">
                            {% if contracts_page.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?{{ contracts_querystring }}&contracts_page={{ contracts_page.previous_page_number }}" aria-label="{% translate 'Précédent' %}">
                                    <i class="bi bi-chevron-left"></i>
                                </a>
                            </li>
                            {% else %}
                            <li class="page-item disabled">
                                <span class="page-link"><i class="bi bi-chevron-left"></i></span>
                            </li>
                            {% endif %}

                            {% for page_num in contracts_elided_range %}
                                {% if page_num == contracts_paginator.ELLIPSIS %}
                                <li class="page-item disabled"><span class="page-link">…</span></li>
                                {% else %}
                                <li class="page-item {% if page_num == contracts_page.number %}active{% endif %}">
                                    <a class="page-link" href="?{{ contracts_querystring }}&contracts_page={{ page_num }}">{{ page_num }}</a>
                                </li>
                                {% endif %}
                            {% endfor %}

                            {% if contracts_page.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?{{ contracts_querystring }}&contracts_page={{ contracts_page.next_page_number }}" aria-label="{% translate 'Suivant' %}">
                                    <i class="bi bi-chevron-right"></i>
                                </a>
                            </li>
                            {% else %}
                            <li class="page-item disabled">
                                <span class="page-link"><i class="bi bi-chevron-right"></i></span>
                            </li>
                            {% endif %}
                        </ul>
                    </nav>
                    {% endif %}
                </div>
                {% endif %}
            </div>
        </div>

    </div>
</div>

{% endblock content %}

{% block script %}
<script src="{% static 'contracts/js/contracts_index.js' %}"></script>
{% endblock script %}