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

{% block content %}
    <div class="prose max-w-none mb-10">
        <p>
            <strong>Magni cumque debitis illo molestiae vitae.</strong> Laudantium et nihil magni rem. Aliquid aperiam minima aspernatur repudiandae quidem. Voluptatem consequatur voluptas aperiam consequatur. Et et dolor libero ut in est voluptate. Libero <a href="#">beatae temporibus itaque</a> est.
            Temporibus <i>voluptatum commodi delectus est</i>. Commodi et voluptatem dolor odit occaecati dolore aut. Qui dolor nihil excepturi id. Qui deleniti <i>cupiditate voluptatem aut</i> est dolores eum aliquid. Molestiae blanditiis reiciendis odio provident ipsam voluptas enim suscipit.
        </p>
    </div>
    <table class="table table-auto w-full table--striped table--bordered">
        <thead>
            <tr>
                <td class="font-bold">Název</td>
                <td>Typy</td>
                <td>Platná</td>
                <td class="whitespace-nowrap">Účinná od</td>
                <td class="whitespace-nowrap">Účinná do</td>
                <td class="whitespace-nowrap">Podepsána s</td>
            </tr>
        </thead>
        <tbody>
            {% for contract in page %}
                <tr>
                    <td>
                        <a
                            class="underline"
                            href="{% url "contracts:view_contract" contract.id %}"
                        >{{ contract.name }}</a>
                    </td>
                    <td>
                        <ul class="flex flex-wrap gap-1.5">
                            {% for type in contract.types.all %}
                                <li class="flex">
                                     {% include "contracts/includes/tag.html" with url="#TODO" icon="ico--folder" content=type.name %}
                                </li>
                            {% endfor %}
                        </ul>
                    </td>
                    <td>
                        <i class="{% if contract.legal_state == contract.LegalStates.VALID %}ico--checkmark{% else %}ico--cross{% endif %}"></i>
                    </td>
                    <td class="whitespace-nowrap">{{ contract.valid_start_date }}</td>
                    <td class="whitespace-nowrap">
                        {% if contract.valid_end_date %}
                            {{ contract.valid_end_date }}
                        {% else %}
                            <span class="text-grey-200">Neurčité</span>
                        {% endif %}
                    </td>
                    <td>
                        <ul class="flex flex-wrap gap-1.5">
                            {% for signature in contract.signee_signatures.all %}
                                <li class="flex">
                                    {% if signature.signee.entity_type == signature.signee.EntityTypes.LEGAL_ENTITY or signature.signee.entity_type == signature.signee.EntityTypes.OTHER %}
                                        {% include "contracts/includes/tag.html" with url="#TODO" icon="ico--office" content=signature.signee.name %}
                                    {% else %}
                                        {% include "contracts/includes/tag.html" with url="#TODO" icon="ico--user" content=signature.signee.name %}
                                    {% endif %}
                                </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 %}