{% extends "issues/base.html" %}
{% load issues %}
{% load add_to_qs %}
{% load humanize %}
{% load add_to_qs %}

{% block tab_content %}

<div class="flex">
    <div class="overflow-hidden">
        <div class="italic">
            Showing {{ page_obj.start_index|intcomma }} - {{ page_obj.end_index|intcomma }} of
            {% if page_obj.paginator.count == issue.stored_event_count and issue.stored_event_count == issue.digested_event_count %} {# all equal #}
                {{ page_obj.paginator.count|intcomma }} total events.
            {% elif page_obj.paginator.count == issue.stored_event_count and issue.stored_event_count != issue.digested_event_count %} {# evictions applied #}
                {{ page_obj.paginator.count|intcomma }} available events ({{ issue.digested_event_count|intcomma }} total observed).
            {% elif page_obj.paginator.count != issue.stored_event_count and issue.stored_event_count == issue.digested_event_count %} {# search filters #}
                {{ page_obj.paginator.count|intcomma }} events found ({{ issue.digested_event_count|intcomma }} total observed).
            {% else %} {# everything unequal #}
                {{ page_obj.paginator.count|intcomma }} events found ({{ issue.stored_event_count|intcomma }} available, {{ issue.digested_event_count|intcomma }} total observed).
            {% endif %}
        </div>
    </div>

    <div class="ml-auto flex-none">
        {# UI / UX question: is it a good idea to reuse-with-different-meaning (pages, not events) for this? #}
        {# adapted copy/pasta from _event_nav #}
        <div class="flex place-content-end">
                <form action="." method="get">
                <input type="text" name="q" value="{{ q }}" placeholder="search..." class="focus:border-cyan-500 dark:focus:border-cyan-400 focus:ring-cyan-200 dark:focus:ring-cyan-700 rounded-md mr-2"/>
                </form>

                {% if page_obj.has_previous %} {# no need for 'is_first': if you can go to the left, you can go all the way to the left too #}
                <a href="?{% add_to_qs page=1 %}" class="font-bold text-slate-500 dark:text-slate-300 border-slate-300 dark:border-slate-600 pl-4 pr-4 pb-1 pt-1 mr-2 border-2 rounded-md hover:bg-slate-200 dark:hover:bg-slate-800 active:ring inline-flex items-center justify-center" title="First page">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-6 h-6"><path fill-rule="evenodd" d="M3.22 7.595a.75.75 0 0 0 0 1.06l3.25 3.25a.75.75 0 0 0 1.06-1.06l-2.72-2.72 2.72-2.72a.75.75 0 0 0-1.06-1.06l-3.25 3.25Zm8.25-3.25-3.25 3.25a.75.75 0 0 0 0 1.06l3.25 3.25a.75.75 0 1 0 1.06-1.06l-2.72-2.72 2.72-2.72a.75.75 0 0 0-1.06-1.06Z" clip-rule="evenodd" /></svg></a>
                {% else %}
                <div class="font-bold text-slate-300 dark:text-slate-600 border-slate-300 dark:border-slate-600 pl-4 pr-4 pb-1 pt-1 mr-2 border-2 rounded-md inline-flex items-center justify-center" title="First page">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-6 h-6"><path fill-rule="evenodd" d="M3.22 7.595a.75.75 0 0 0 0 1.06l3.25 3.25a.75.75 0 0 0 1.06-1.06l-2.72-2.72 2.72-2.72a.75.75 0 0 0-1.06-1.06l-3.25 3.25Zm8.25-3.25-3.25 3.25a.75.75 0 0 0 0 1.06l3.25 3.25a.75.75 0 1 0 1.06-1.06l-2.72-2.72 2.72-2.72a.75.75 0 0 0-1.06-1.06Z" clip-rule="evenodd" /></svg>
                </div>
                {% endif %}

                {% if page_obj.has_previous %}
                <a href="?{% add_to_qs page=page_obj.previous_page_number %}" class="font-bold text-slate-500 dark:text-slate-300 border-slate-300 dark:border-slate-600 pl-4 pr-4 pb-1 pt-1 mr-2 border-2 rounded-md hover:bg-slate-200 dark:hover:bg-slate-800 active:ring inline-flex items-center justify-center" title="Previous page">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-6 h-6"><path fill-rule="evenodd" d="M9.78 4.22a.75.75 0 0 1 0 1.06L7.06 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L5.47 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" /></svg>
                </a>
                {% else %}
                <div class="font-bold text-slate-300 dark:text-slate-600 border-slate-300 dark:border-slate-600 pl-4 pr-4 pb-1 pt-1 mr-2 border-2 rounded-md inline-flex items-center justify-center" title="Previous page">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-6 h-6"><path fill-rule="evenodd" d="M9.78 4.22a.75.75 0 0 1 0 1.06L7.06 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L5.47 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" /></svg>
                </div>
                {% endif %}

                {% if page_obj.has_next %}
                <a href="?{% add_to_qs page=page_obj.next_page_number %}" class="font-bold text-slate-500 dark:text-slate-300 border-slate-300 dark:border-slate-600 pl-4 pr-4 pb-1 pt-1 mr-2 border-2 rounded-md hover:bg-slate-200 dark:hover:bg-slate-800 active:ring inline-flex items-center justify-center" title="Next page">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-6 h-6"><path fill-rule="evenodd" d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg>
                </a>
                {% else %}
                <div class="font-bold text-slate-300 dark:text-slate-600 border-slate-300 dark:border-slate-600 pl-4 pr-4 pb-1 pt-1 mr-2 border-2 rounded-md inline-flex items-center justify-center" title="Next page">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-6 h-6"><path fill-rule="evenodd" d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg>
                </div>
                {% endif %}

                {% if page_obj.has_next %}
                <a href="?{% add_to_qs page=page_obj.paginator.num_pages %}" class="font-bold text-slate-500 dark:text-slate-300 border-slate-300 dark:border-slate-600 pl-4 pr-4 pb-1 pt-1 mr-2 border-2 rounded-md hover:bg-slate-200 dark:hover:bg-slate-800 active:ring inline-flex items-center justify-center" title="Last page">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-6 h-6"><path fill-rule="evenodd" d="M12.78 7.595a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06l2.72-2.72-2.72-2.72a.75.75 0 0 1 1.06-1.06l3.25 3.25Zm-8.25-3.25 3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06l2.72-2.72-2.72-2.72a.75.75 0 0 1 1.06-1.06Z" clip-rule="evenodd" /></svg>
                </a>
                {% else %}
                <div class="font-bold text-slate-300 dark:text-slate-600 border-slate-300 dark:border-slate-600 pl-4 pr-4 pb-1 pt-1 mr-2 border-2 rounded-md inline-flex items-center justify-center" title="Last page">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-6 h-6"><path fill-rule="evenodd" d="M12.78 7.595a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06l2.72-2.72-2.72-2.72a.75.75 0 0 1 1.06-1.06l3.25 3.25Zm-8.25-3.25 3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06l2.72-2.72-2.72-2.72a.75.75 0 0 1 1.06-1.06Z" clip-rule="evenodd" /></svg>

                </div>
                {% endif %}

        </div>
    </div>
</div>

<div class="pt-4">
<table class="w-full">
<thead>

    <tr>
    <td class="p-4 align-top text-slate-800 dark:text-slate-100 font-bold">
        #
    </td>

    <td class="p-4 align-top text-slate-800 dark:text-slate-100 font-bold">
        ID
    </td>

    <td class="p-4 align-top text-slate-800 dark:text-slate-100 font-bold">
        Timestamp
    </td>

    <td class="p-4 w-full align-top text-slate-800 dark:text-slate-100 font-bold">
        Title
    </td>

    <td class="p-4 align-top text-slate-800 dark:text-slate-100 font-bold">
        Release
    </td>

    <td class="p-4 align-top text-slate-800 dark:text-slate-100 font-bold">
        Environment
    </td>
    </tr>


</thead>
<tbody>

{% comment %}
TODO
        release
        environment

{% endcomment %}

{% for event in page_obj %}
    <tr class="border-slate-200 dark:border-slate-700 border-2 ">

        <td class="p-4 font-bold text-slate-500 dark:text-slate-300 align-top">
            <a href="/issues/issue/{{ issue.id }}/event/{{ event.id }}/{% current_qs %}">{{ event.digest_order }}</a>
        </td>

        <td class="p-4 font-bold text-slate-500 dark:text-slate-300 align-top"> {# how useful is this really? #}
            <a href="/issues/issue/{{ issue.id }}/event/{{ event.id }}/{% current_qs %}">{{ event.id|truncatechars:9 }}</a>
        </td>

        <td class="p-4 font-mono whitespace-nowrap align-top">
            {{ event.timestamp|date:"j M G:i:s" }}.<span class="text-xs">{{ event.timestamp|date:"u"|slice:":3" }}</span>
        </td>

        {% comment %}
        In the current setup, event title wraps to the next line if needed, there's no clipping.
        I tried to get 'just use dots' to work for that, but I did not get that to work in a table. Perhaps it's actually
        anti-thetical to the table layout. Perhaps if we used a flexbox layout, it would work better.
        Anyway, overflow-to-next-line is also fine (at least for now)
        {% endcomment %}

        <td class="w-full p-4 font-mono align-top">
            {{ event.title }}
        </td>

        <td class="p-4 font-mono align-top">
            <span {% if event.release|issha %}class="font-mono"{% endif %}>{{ event.release|shortsha }}</span>
        </td>

        <td class="p-4 font-mono align-top">
            {{ event.environment|truncatechars:30 }}
        </td>

    </tr>
{% empty %}
    <tr>
        <td colspan="6" class="p-4 text-slate-800 dark:text-slate-100 italic">
            No events found{% if q %} for "{{ q }}"{% endif %}.
        </td>
    </tr>
{% endfor %}
{# note: no "empty" case; event-less issues are not something I expect to really support (for some definition of "really") #}
</tbody>
</table>


</div>

{% endblock %}
