{% extends "shared/includes/base.html" %}
{% load subtract %}

{% block content %}
    <h1 class="head-alt-lg mb-10">{{ title }}</h1>
    <table class="table table-auto w-full table--striped table--bordered">
        <thead>
            <tr>
                <td class="font-bold">Identifikace</td>
                <td>Typ</td>
                <td>Právní stav</td>
                <td>Účinná od</td>
                <td>Platná do</td>
                <td>Podepsána s</td>
            </tr>
        </thead>
        <tbody>
            {% for contract in page %}
                <tr>
                    <td>
                        <a
                            class="underline"
                            href="{% url "contracts:view_contract" contract.id %}"
                        >{{ contract.identifier }}</a>
                    </td>
                    <td>
                        <ul class="flex flex-wrap gap-1.5">
                            {% for type in contract.types.all %}
                                <li class="p-1.5 rounded-sm whitespace-nowrap bg-gray-200">{{ type.name }}</li>
                            {% endfor %}
                        </ul>
                    </td>
                    <td>{{ contract.get_legal_state_display }}</td>
                    <td class="whitespace-nowrap">{{ contract.valid_start_date }}</td>
                    <td class="whitespace-nowrap">{{ contract.valid_end_date }}</td>
                    <td>
                        <ul class="flex flex-wrap gap-1.5">
                            {% for signature in contract.signee_signatures.all %}
                                <li
                                    class="p-1.5 rounded-sm whitespace-nowrap cursor-pointer {% if not signature.signee.color %}bg-gray-200 duration-100 hover:bg-gray-300{% endif %}"
                                    {% if signature.signee.color %}style="background-color:{{ signature.signee.color }}"{% endif %}
                                >{{ signature.signee.name }}</li>
                            {% endfor %}
                        </ul>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    
    {% if page.has_other_pages %}
        <div class="pagination-container">
            <nav class="pagination space-x-1">
                <a
                    class="btn btn--icon btn--grey-125 btn--hoveractive btn--to-black btn--condensed btn--inverted-icon"
                    {% if not page.has_previous %}disabled{% endif %}
                    {% if page.has_previous %}href="{% url "contracts:index" %}?page={{ page.previous_page_number }}"{% endif %}
                >
                    <div class="btn__body-wrap">
                        <div class="btn__body">Předchozí</div>
                        <div class="btn__icon">
                            <i class="ico--chevron-left"></i>
                        </div>
                    </div>
                </a>
                
                {% if page.previous_page_number != 1 %}
                    <a
                        class="btn btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block"
                        href="{% url "contracts:index" %}?page=1"
                    >
                        <div class="btn__body">1</div>
                    </a>
                {% endif %}
                
                {% if page.has_previous and page.previous_page_number != 2 %}
                    <span class="text-grey-500 hidden md:flex flex-col px-2 justify-center">...</span>
                {% endif %}
                
                {% if page.has_previous %}
                    <a
                        class="btn btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block"
                        href="{% url "contracts:index" %}?page={{ page.previous_page_number }}"
                    >
                        <div class="btn__body ">{{ page.previous_page_number }}</div>
                    </a>
                {% endif %}

                <button class="btn btn--grey-500 btn--condensed hidden md:inline-block">
                    <div class="btn__body">{{ page.number }}</div>
                </button>
                
                {% if page.has_next %}
                    <a
                        class="btn btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block"
                        href="{% url "contracts:index" %}?page={{ page.next_page_number }}"
                    >
                        <div class="btn__body ">{{ page.next_page_number }}</div>
                    </a>
                {% endif %}
                
                {% if paginator.num_pages != page.next_page_number and paginator.num_pages|subtract:1 != page.next_page_number %}
                    <span class="text-grey-500 hidden md:flex flex-col px-2 justify-center">...</span>
                {% endif %}
                
                {% comment %}num_pages is equivalent to the last page number{% endcomment %}
                
                {% if paginator.num_pages != page.next_page_number %}
                    <a
                        role="button"
                        class="btn btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block"
                        href="{% url "contracts:index" %}?page={{ paginator.num_pages }}"
                    >
                        <div class="btn__body">{{ paginator.num_pages }}</div>
                    </a>
                {% endif %}
                
                <a
                    class="btn btn--icon btn--grey-125 btn--hoveractive btn--to-black btn--condensed"
                    {% if not page.has_next %}disabled{% endif %}
                    {% if page.has_next %}href="{% url "contracts:index" %}?page={{ page.next_page_number }}"{% endif %}
                >
                    <div class="btn__body-wrap">
                        <div class="btn__body">Další</div>
                        <div class="btn__icon">
                            <i class="ico--chevron-right"></i>
                        </div>
                    </div>
                </a>
            </nav>
        </div>
    {% endif %}
{% endblock %}