{% extends "base.html" %}
{% load static card_badge %}
{% block content %}
    <!-- Card header with badge and details -->
    <div class="flex items-center mb-6">
        <div class="ml-4">
            <h1 class="text-3xl font-bold">{{card.name}}</h1>
            <h2 class="text-lg text-gray-500">{{ card.cardset }} #{{ card.cardnum }} &bull; {{ card.rarity.icon }}</h2>
        </div>
    </div>
    
    <!-- Trade Offers sections -->
    <div class="flex flex-col gap-8">
        
        <!-- Trade Offers: Have -->
        <div x-data="{
            order: 'newest',
            page: 1,
            loadOffers() {
                document.activeElement.blur();
                fetch(`{% url 'cards:card_trade_offer_have_list' card.pk %}?order=` + this.order + '&page=' + this.page)
                    .then(response => response.text())
                    .then(html => { 
                        this.$refs.offerList.innerHTML = html;
                        Alpine.initTree(this.$refs.offerList); // reinitialize Alpine on the injected content
                        window.processMarqueeElements && window.processMarqueeElements();
                    });
            }
        }" 
        x-init="loadOffers()"
        x-on:change-page="page = $event.detail.page; loadOffers()"
        class="p-4">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-xl font-semibold">Have this Card ({{ trade_offer_have_count }})</h2>
                <!-- DaisyUI dropdown replacing the select -->
                <div class="dropdown dropdown-end">
                    <div tabindex="0" role="button" class="btn m-1">Sort by: <span x-text="order === 'newest' ? 'Newest' : 'Oldest'"></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 bg-base-100 rounded-box z-1 max-w-26 p-2 shadow-sm">
                        <li>
                            <a href="#" @click.prevent="order = 'newest'; page = 1; loadOffers()">
                                Newest
                            </a>
                        </li>
                        <li>
                            <a href="#" @click.prevent="order = 'oldest'; page = 1; loadOffers()">
                                Oldest
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div x-ref="offerList">
            </div>
        </div>
        
            <!-- Trade Offers: Want -->
            <div x-data="{
                order: 'newest',
                page: 1,
                loadOffers() {
                    fetch(`{% url 'cards:card_trade_offer_want_list' card.pk %}?order=` + this.order + '&page=' + this.page)
                        .then(response => response.text())
                        .then(html => { 
                            this.$refs.offerList.innerHTML = html;
                            Alpine.initTree(this.$refs.offerList); // reinitialize Alpine on the injected content
                            window.processMarqueeElements && window.processMarqueeElements();
                        });
                }
            }" 
            x-init="loadOffers()"
            x-on:change-page="page = $event.detail.page; loadOffers()"
            class="p-4">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-xl font-semibold">Want this Card ({{ trade_offer_want_count }})</h2>
                <!-- DaisyUI dropdown replacing the select -->
                <div class="dropdown dropdown-end">
                    <div tabindex="0" role="button" class="btn m-1">Sort by: <span x-text="order === 'newest' ? 'Newest' : 'Oldest'"></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 bg-base-100 rounded-box z-1 max-w-26 p-2 shadow-sm">
                        <li>
                            <a href="#" @click.prevent="order = 'newest'; page = 1; loadOffers()">
                                Newest
                            </a>
                        </li>
                        <li>
                            <a href="#" @click.prevent="order = 'oldest'; page = 1; loadOffers()">
                                Oldest
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div x-ref="offerList">
            </div>
        </div>
        
    </div>
{% endblock %}