<c-layouts.base>
<div class="dark:text-white max-w-sm sm:max-w-xl lg:max-w-3xl mx-auto">
    <div id="game-info" class="mb-10">
        <div class="flex gap-5 mb-3">
            <span class="text-balance max-w-120 text-4xl">
                <span class="font-bold font-serif">{{ game.name }}</span>{% if game.year_released %}&nbsp;<c-popover id="popover-year" popover_content="Original release year" class="text-slate-500 text-2xl">{{ game.year_released }}</c-popover>{% endif %}
                </span>
            </div>
            <div class="flex gap-4 dark:text-slate-400 mb-3">
                <c-popover id="popover-hours" popover_content="Total hours played" class="flex gap-2 items-center">
                <svg xmlns="http://www.w3.org/2000/svg"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke-width="1.5"
                     stroke="currentColor"
                     class="size-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                </svg>
                {{ game.playtime_formatted }}
                </c-popover>
                <c-popover id="popover-sessions" popover_content="Number of sessions" class="flex gap-2 items-center">
                <svg xmlns="http://www.w3.org/2000/svg"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke-width="1.5"
                     stroke="currentColor"
                     class="size-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5" />
                </svg>
                {{ session_count }}
                </c-popover>
                <c-popover id="popover-average" popover_content="Average playtime per session" class="flex gap-2 items-center">
                <svg xmlns="http://www.w3.org/2000/svg"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke-width="1.5"
                     stroke="currentColor"
                     class="size-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z" />
                </svg>
                {{ session_average_without_manual }}
                </c-popover>
                <c-popover id="popover-playrange" popover_content="Earliest and latest dates played" class="flex gap-2 items-center">
                <svg xmlns="http://www.w3.org/2000/svg"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke-width="1.5"
                     stroke="currentColor"
                     class="size-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z" />
                </svg>
                {{ playrange }}
                </c-popover>
            </div>
            <div class="flex flex-col mb-6 text-gray-600 dark:text-slate-400 gap-y-4">
                <div class="flex gap-2 items-center">
                    <span class="uppercase">Original year</span>
                    <span class="text-black dark:text-slate-300">{{ game.original_year_released }}</span>
                </div>
                <div class="flex gap-2 items-center"
                >
                    <span class="uppercase">Status</span>
                    {% include "partials/gamestatus_selector.html" %}
                    {% if game.mastered %}👑{% endif %}
                </div>
                <div class="flex gap-2 items-center"
                     x-data="{ open: false }"
                >
                    <span class="uppercase">Played</span>
                    <div class="inline-flex rounded-md shadow-2xs" role="group" x-data="{ played: {{ game.playevents.count }} }">
                        <a href="{% url 'add_playevent' %}">
                        <button type="button" class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-s-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white hover:cursor-pointer">
                            <span x-text="played"></span> times
                        </button>
                        </a>
                        <button type="button" x-on:click="open = !open" @click.outside="open = false" class="relative px-4 py-2 text-sm font-medium text-gray-900 bg-white border-e border-b border-t border-gray-200 rounded-e-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white align-middle hover:cursor-pointer">
                            <c-icon.arrowdown />
                            <div
                                class="absolute top-full -left-px w-auto whitespace-nowrap z-10 text-sm font-medium bg-gray-800/20 backdrop-blur-lg rounded-md rounded-tl-none border border-gray-200 dark:border-gray-700"
                                x-show="open"
                            >
                                <ul
                                    class=""
                                >
                                    <li class="px-4 py-2 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white rounded-tr-md">
                                        <a href="{% url 'add_playevent_for_game' game.id %}">Add playthrough...</a>
                                    </li>
                                    <li
                                        x-on:click="createPlayEvent"
                                        class="relative px-4 py-2 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white rounded-b-md"
                                    >
                                        Played times +1
                                    </li>
                                    <script>
                                       function createPlayEvent() {
                                        this.played++;
                                        // TODO: migrate to hx-post + hx-on::after-request for HTMX-native toast handling
                                        fetchWithHtmxTriggers('{% url 'api-1.0.0:create_playevent' %}', {
                                            method: 'POST',
                                            headers: { 'X-CSRFToken': '{{ csrf_token }}', 'Content-Type': 'application/json' },
                                            body: '{"game_id": {{ game.id }}}'
                                        })
                                        .catch(() => {
                                            this.played--;
                                            console.error('Failed to record play');
                                        });
                                       }
                                    </script>
                                </ul>
                            </div>
                        </button>
                      </div>
                </div>


  
  
                <div class="flex gap-2 items-center">
                    <span class="uppercase">Platform</span>
                    <span class="text-black dark:text-slate-300">{{ game.platform }}</span>
                </div>
            </div>
            <div class="inline-flex rounded-md shadow-xs mb-3" role="group">
                <a href="{% url 'edit_game' game.id %}">
                    <button type="button"
                            class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-s-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white hover:cursor-pointer">
                        Edit
                    </button>
                </a>
                <a href="{% url 'delete_game' game.id %}">
                    <button type="button"
                            class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-e-lg hover:bg-red-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-red-700 dark:focus:ring-blue-500 dark:focus:text-white hover:cursor-pointer">
                        Delete
                    </button>
                </a>
            </div>
        </div>
        <div class="mb-6">
            <c-h1 :badge="purchase_count">Purchases</c-h1>
            {% if purchase_count %}
            <c-simple-table :rows=purchase_data.rows :columns=purchase_data.columns />
            {% else %}
            No purchases yet.
            {% endif %}
        </div>
        <div class="mb-6">
            <c-h1 :badge="session_count">Sessions</c-h1>
            {% if session_count %}
            <c-simple-table :rows=session_data.rows :columns=session_data.columns :header_action=session_data.header_action :page_obj=session_page_obj :elided_page_range=session_elided_page_range />
            {% else %}
            No sessions yet.
            {% endif %}
        </div>
        <!-- list all playevents -->
        <div class="mb-6">
            <c-h1 :badge="playevent_count">Play Events</c-h1>
            {% if playevent_count %}
                <c-simple-table :rows=playevent_data.rows :columns=playevent_data.columns />
            {% else %}
                No play events yet.
            {% endif %}
        </div>
        <div class="mb-6" id="history-container" hx-get="" hx-trigger="status-changed from:body" hx-select="#history-container" hx-swap="outerHTML">
            <c-h1 :badge="statuschange_count">History</c-h1>
            {% include "partials/history.html" %}
        </div>
    </div>
    <script>
            function getSessionCount() {
                return document.getElementById('session-count').textContent.match("[0-9]+");
            }
    </script>
    </c-layouts.base>
