{% extends "base.html" %}

{% block title %}Resell Zone{% endblock %}

{% block content %}
    {% if ipc_error %}
        <div class="alert alert-error">
            <strong>Heads up:</strong> {{ ipc_error }}
        </div>
    {% endif %}
    <section class="hero">
        <div class="hero-copy">
            <h1>Resell Zone</h1>
            <p>Browse the latest listings from Resell. Sign in with Discord to unlock quick, secure Stripe checkouts.</p>
            <form class="hero-search pill-surface pill-interactive pill-spotlight" role="search" data-hero-search>
                <label class="sr-only" for="hero-search-input">Search listings and guides</label>
                <span class="hero-search-icon" aria-hidden="true">🔍</span>
                <input
                    id="hero-search-input"
                    type="search"
                    name="q"
                    placeholder="Search listings &amp; guides"
                    autocomplete="off"
                    data-search-input
                >
                <button type="button" class="hero-search-clear" data-search-clear aria-label="Clear search" hidden>
                    <span aria-hidden="true">✕</span>
                </button>
            </form>
            <p class="search-feedback" data-search-feedback hidden></p>
        </div>
        <div class="hero-status">
            <span class="status-dot{% if total_count > 0 %} online{% endif %}"></span>
            <span>{{ total_count }} item{{ 's' if total_count != 1 else '' }} available</span>
        </div>
    </section>

    {% if status_message %}
        <div class="alert alert-{{ status_level }}">
            <strong>{{ status_level|capitalize }}:</strong> {{ status_message }}
            {% if checkout_session_id %}
                <br><small>Stripe session: <code>{{ checkout_session_id }}</code></small>
            {% endif %}
        </div>
    {% endif %}



    {% if not user %}
        <div class="login-reminder">
            <p>
                <strong>Sign in with Discord</strong> to purchase items. 
            </p>
        </div>
    {% endif %}



    {% if listings %}
        <section class="listings-grid" data-listings-grid>
            {% for item in listings %}
                <article class="listing-card" data-listing-card>
                    <header>
                        <h2>{{ item.name }}</h2>
                        <span class="listing-price">{{ item.price }}</span>
                    </header>
                    <p class="listing-description">{{ item.description }}</p>
                    <footer>
                        <button
                            class="buy-button"
                            type="button"
                            data-item-id="{{ item.id }}"
                            data-item-name="{{ item.name }}"
                            {% if not user %}data-requires-auth="1"{% endif %}
                        >
                            Buy with Stripe
                        </button>
                    </footer>
                </article>
            {% endfor %}
        </section>
    {% else %}
        <div class="empty-state" data-empty-state>
            <img src="https://cdn.discordapp.com/emojis/1146205946931021884.webp?size=96&quality=lossless" alt="Empty" width="72" height="72">
            <h3>No listings yet</h3>
            <p>New stock will appear here as soon as the bot updates the database.</p>
        </div>
    {% endif %}
{% endblock %}