{% extends 'base.html' %}
{% load static %}
{% block title %}
    {{ title }}
{% endblock title %}
{% block content %}
    <div class="flex-col">
        {% if dataset_count >= 1 %}
            {% url 'list_sessions_start_session_from_session' last.id as start_session_url %}
            <div class="mx-auto text-center my-4">
                <a id="last-session-start"
                   href="{{ start_session_url }}"
                   hx-get="{{ start_session_url }}"
                   hx-swap="afterbegin"
                   hx-target=".responsive-table tbody"
                   onClick="document.querySelector('#last-session-start').classList.add('invisible')"
                   class="{% if last.timestamp_end == null %}invisible{% endif %}">
                    {% include 'components/button_start.html' with text=last.purchase title="Start session of last played game" only %}
                </a>
            </div>
        {% endif %}
        {% if dataset_count != 0 %}
            <table class="responsive-table">
                <thead>
                    <tr>
                        <th class="px-2 sm:px-4 md:px-6 md:py-2">Name</th>
                        <th class="hidden sm:table-cell px-2 sm:px-4 md:px-6 md:py-2">Start</th>
                        <th class="hidden lg:table-cell px-2 sm:px-4 md:px-6 md:py-2">End</th>
                        <th class="px-2 sm:px-4 md:px-6 md:py-2">Duration</th>
                    </tr>
                </thead>
                <tbody>
                    {% for session in dataset %}
                        {% partialdef session-row inline=True %}
                            <tr>
                                <td class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char md:max-w-40char">
                                    <a class="underline decoration-slate-500 sm:decoration-2"
                                       href="{% url 'view_game' session.purchase.edition.game.id %}">
                                        {{ session.purchase.edition.name }}
                                    </a>
                                </td>
                                <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono hidden sm:table-cell">
                                    {{ session.timestamp_start | date:"d/m/Y H:i" }}
                                </td>
                                <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono hidden lg:table-cell">
                                    {% if not session.timestamp_end %}
                                        {% url 'list_sessions_end_session' session.id as end_session_url %}
                                        <a  href="{{ end_session_url }}"
                                           hx-get="{{ end_session_url }}"
                                           hx-target="closest tr"
                                           hx-swap="outerHTML"
                                           hx-indicator="#indicator"
                                           onClick="document.querySelector('#last-session-start').classList.remove('invisible')">
                                            <span class="text-yellow-300">Finish now?</span>
                                        </a>
                                    {% elif session.duration_manual %}
                                        --
                                    {% else %}
                                        {{ session.timestamp_end | date:"d/m/Y H:i" }}
                                    {% endif %}
                                </td>
                                <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ session.duration_formatted }}</td>
                            </tr>
                        {% endpartialdef %}
                    {% endfor %}
                </tbody>
            </table>
        {% else %}
            <div class="mx-auto text-center text-slate-300 text-xl">No sessions found.</div>
        {% endif %}
    </div>
{% endblock content %}