{% extends "base.html" %}
{% load static card_badge %}
{% block content %}
<div class="container mx-auto p-4" 
     x-data="{
         order: '{{ order }}',
         groupBy: '{{ group_by|default:'none' }}',
         page: 1,
         loadCards() {
             // Construct URL using current pathname and query parameters.
             let groupParam = this.groupBy === 'none' ? '' : this.groupBy;
             let url = window.location.pathname + '?order=' + this.order + '&group_by=' + groupParam + '&page=' + this.page;
             fetch(url, { headers: { 'x-requested-with': 'XMLHttpRequest' } })
                .then(response => response.text())
                .then(html => { this.$refs.cardList.innerHTML = html; });
         }
     }"
     x-init="loadCards()"
     x-on:change-page.window="page = $event.detail.page; loadCards()"
>
    
    <div class="flex flex-wrap items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold">Cards</h1>
        </div>
        <div>
            <!-- Sort Dropdown -->
            <div class="dropdown dropdown-end m-1">
                <div tabindex="0" class="btn">
                    Sort by: <span x-text="order === 'absolute' ? 'None' : (order === 'alphabetical' ? 'Alphabetical' : 'Rarity')"></span>
                    <svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </div>
                <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
                    <li><a href="#" @click.prevent="order = 'absolute'; page = 1; loadCards()">None</a></li>
                    <li><a href="#" @click.prevent="order = 'alphabetical'; page = 1; loadCards()">Alphabetical</a></li>
                    <li><a href="#" @click.prevent="order = 'rarity'; page = 1; loadCards()">Rarity</a></li>
                </ul>
            </div>
            <!-- Grouping Dropdown -->
            <div class="dropdown dropdown-end m-1">
                <div tabindex="0" class="btn">
                    Group by: <span x-text="groupBy === 'none' ? 'None' : (groupBy.charAt(0).toUpperCase() + groupBy.slice(1))"></span>
                    <svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </div>
                <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
                    <li><a href="#" @click.prevent="groupBy = 'none'; page = 1; loadCards()">None</a></li>
                    <li><a href="#" @click.prevent="groupBy = 'deck'; page = 1; loadCards()">Deck</a></li>
                    <li><a href="#" @click.prevent="groupBy = 'cardset'; page = 1; loadCards()">Cardset</a></li>
                    <li><a href="#" @click.prevent="groupBy = 'rarity'; page = 1; loadCards()">Rarity</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Container for the partial card list -->
    <div x-ref="cardList">
        
    </div>
</div>
{% endblock %}