{% extends 'base.html' %}

{% load static %}

{% block title %}{{ title }}{% endblock title %}

{% block content %}

{% if dataset.count >= 1 %}
<div class="mx-auto text-center my-4">
  <a
    id="last-session-start"
    href="{% url 'start_session_same_as_last' last.id %}"
    hx-get="{% url 'start_session_same_as_last' last.id %}"
    hx-swap="afterbegin"
    hx-target=".responsive-table tbody"
    hx-select=".responsive-table tbody tr:first-child"
    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 %}

<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 data in dataset %}
    <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' data.purchase.edition.game.id %}">
            {{ data.purchase.edition }}
        </a>
      </td>
      <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono hidden sm:table-cell">
        {{ data.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 data.unfinished %}
        <a
          href="{% url 'update_session' data.id %}"
          hx-get="{% url 'update_session' data.id %}"
          hx-swap="outerHTML"
          hx-target=".responsive-table tbody tr:first-child"
          hx-select=".responsive-table tbody tr:first-child"
          hx-indicator="#indicator"
          onClick="document.querySelector('#last-session-start').classList.remove('invisible')"
          >
            <span class="text-yellow-300">Finish now?</span>
        </a>
        {% elif data.duration_manual %}
            -- 
        {% else %}
            {{ data.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">
        {{ data.duration_formatted }}
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% endblock content %}