{% load modal_tag %}
{% python_modal "delete-game-confirmation-modal" %}
    <h1 class="text-2xl leading-6 font-medium dark:text-white text-center">Delete Game</h1>
    <p class="dark:text-white text-center mt-5">
        Are you sure you want to delete <strong>{{ game.name }}</strong>?
    </p>
    <form class=""
        hx-post="{% url 'games:delete_game' game.id %}"
        hx-replace-url="true"
        hx-target="#main-container"
        hx-select="#main-container"
        hx-swap="outerHTML"
        >
        {% csrf_token %}
        <p class="dark:text-white text-center mt-3 text-sm text-gray-600 dark:text-gray-400">
            This will permanently delete this game and all associated data:
        </p>
        <ul class="dark:text-white text-center mt-1 text-sm text-gray-600 dark:text-gray-400 list-disc list-inside">
            {% if session_count %}<li>{{ session_count }} session(s)</li>{% endif %}
            {% if purchase_count %}<li>{{ purchase_count }} purchase(s)</li>{% endif %}
            {% if playevent_count %}<li>{{ playevent_count }} play event(s)</li>{% endif %}
            {% if not session_count and not purchase_count and not playevent_count %}<li>No associated data</li>{% endif %}
        </ul>
        <p class="dark:text-white text-center mt-3 text-sm font-medium text-red-600 dark:text-red-400">
            This action cannot be undone.
        </p>
        <div class="items-center mt-5">
            <c-button color="red" size="lg" type="submit" class="w-full">Delete</c-button>
            <c-button color="gray" size="base" class="mt-0 w-full" onclick="this.closest('#delete-game-confirmation-modal').remove()">Cancel</c-button>
        </div>
    </form>
{% endpython_modal %}