{% 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 %}