{% extends "base.html" %}

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

{% load static %}

{% block content %}
    <div class="dark:text-white max-w-sm sm:max-w-xl lg:max-w-3xl mx-auto">
        <div class="flex justify-center items-center">
            <form method="get" class="text-center">
                <label class="text-5xl text-center inline-block mb-10" for="yearSelect">Stats for:</label>
                <select name="year" id="yearSelect" onchange="this.form.submit();" class="mx-2">
                    <option value="2022" {% if year == 2022 %}selected{% endif %}>2022</option>
                    <option value="2023" {% if year == 2023 %}selected{% endif %}>2023</option>
                </select>
            </form>
        </div>
        <table class="responsive-table">
            <thead>
                <tr>
                    <th class="px-2 sm:px-4 md:px-6 md:py-2">Total hours</th>
                    <th class="px-2 sm:px-4 md:px-6 md:py-2">Total games</th>
                    <th class="px-2 sm:px-4 md:px-6 md:py-2">Released that year</th>
                </tr>
            <tbody>
                <tr>
                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_hours }}</td>
                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_games }}</td>
                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_2023_games }}</td>
                </tr>
            </tbody>
        </table>
        <h1 class="text-5xl text-center my-6">Top games by playtime</h1>
        <table class="responsive-table">
            <thead>
                <tr>
                    <th class="px-2 sm:px-4 md:px-6 md:py-2">Name</th>
                    <th class="px-2 sm:px-4 md:px-6 md:py-2">Playtime (hours)</th>
                </tr>
            </thead>
            <tbody>
                {% for game in top_10_games_by_playtime %}
                <tr>
                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
                        <a href="{% url 'view_game' game.id  %}">{{ game.name }}

                        </a>
                    </td>
                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ game.formatted_playtime }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        <h1 class="text-5xl text-center my-6">Platforms by playtime</h1>
        <table class="responsive-table">
            <thead>
                <tr>
                    <th class="px-2 sm:px-4 md:px-6 md:py-2">Platform</th>
                    <th class="px-2 sm:px-4 md:px-6 md:py-2">Playtime (hours)</th>
                </tr>
            </thead>
            <tbody>
                {% for item in total_playtime_per_platform %}
                <tr>
                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ item.platform_name }}                    </td>
                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ item.formatted_playtime }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock content %}