{% extends "public/base.html" %}
{% load static %}

{% block title %}Auction — Digital Assets for Sale — {{ site.site_name }}{% endblock %}
{% block meta_description %}Browse premium domain names and social media handles available for sale.{% endblock %}

{% block content %}
<div class="section-first-inner">

    <div class="section compact-bottom">
        <div class="hero-container">
            <div class="banner-inner">
                <div class="banner-inner-content">
                    <h1>Auction</h1>
                </div>
            </div>
        </div>
    </div>

    <div class="section" id="assets">
        <div class="hero-container">
            <div class="d-flex flex-column gspace-2">
                <div class="pricing-heading-container">
                    <div class="sub-heading">
                        <i class="fa-regular fa-circle-dot"></i>
                        <h6 class="font-family-1 accent-color">Curated Assets for Growth</h6>
                    </div>
                    <h2 class="animate-box animated animate__animated" data-animate="animate__fadeInUp">Available for Offer or Negotiation</h2>
                </div>

                {% if listings %}
                <div class="row row-cols-lg-3 row-cols-md-2 row-cols-1 align-items-center grid-spacer-2">
                    {% for item in listings %}
                    <div class="col">
                        <div class="card card-pricing">
                            <div class="sub-heading text-center justify-content-center">
                                {% if item.asset_type == 'domain' %}
                                <i class="fa-solid fa-globe"></i>
                                <h6 class="font-family-1 accent-color text-center">Domain</h6>
                                {% else %}
                                <i class="fa-solid fa-at"></i>
                                <h6 class="font-family-1 accent-color text-center">{{ item.get_asset_type_display }}</h6>
                                {% endif %}
                            </div>
                            <div class="card price-container">
                                <div class="price-wrapper">
                                    {% if item.is_premium %}<span style="display:inline-block;background:rgba(245,158,11,.15);color:#f59e0b;border:1px solid rgba(245,158,11,.3);border-radius:20px;font-size:.65rem;font-weight:700;padding:.2rem .6rem;margin-bottom:.4rem;letter-spacing:.04em;">★ PREMIUM</span>{% endif %}
                                    <span class="price">{{ item.name }}</span>
                                </div>
                                {% if item.tagline %}<p style="font-size:.8rem;opacity:.6;margin:.3rem 0 0;text-align:center;">{{ item.tagline }}</p>{% endif %}
                            </div>
                            {% if item.asking_price %}
                            <div style="font-size:1.1rem;font-weight:800;color:var(--accent-color,#ff404b);margin-bottom:.5rem;">£{{ item.asking_price|floatformat:0 }}</div>
                            {% endif %}
                            <a href="{% url 'auction_detail' item.slug %}" class="btn btn-accent">{% if item.asking_price %}Reserve / Enquire{% else %}Make an Enquiry{% endif %}</a>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="text-center py-5">
                    <i class="fa-solid fa-gavel" style="font-size:3rem;color:rgba(255,255,255,.2);margin-bottom:1rem;display:block;"></i>
                    <h3 class="secondary-accent">No listings right now</h3>
                    <p class="secondary-accent">Check back soon or <a href="{% url 'contact' %}" class="accent-color">contact us</a> about a specific asset.</p>
                </div>
                {% endif %}

            </div>
        </div>
    </div>

    <div class="section">
        <div class="hero-container">
            <div class="d-flex flex-column gspace-2">
                <div class="sub-heading justify-content-center">
                    <i class="fa-regular fa-circle-dot"></i>
                    <h6 class="font-family-1 accent-color">How it Works</h6>
                </div>
                <h2 class="text-center animate-box animated animate__animated" data-animate="animate__fadeInUp">A Controlled Way to Secure Digital Assets</h2>
                <div class="row row-cols-md-4 row-cols-1 grid-spacer-2">
                    <div class="col">
                        <div class="d-flex flex-column gspace-1">
                            <div class="process-header"><span class="process-number">01</span></div>
                            <div class="card card-process animate-box animated animate__animated" data-animate="animate__fadeInUp">
                                <img src="{% static 'images/icon-auction-5.svg' %}" style="width:5em">
                                <h3 class="secondary-accent">Browse</h3>
                                <p>Review available domains, handles and digital assets listed for sale, offer or negotiation.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="d-flex flex-column gspace-1">
                            <div class="process-header"><span class="process-number">02</span></div>
                            <div class="card card-process animate-box animated animate__animated" data-animate="animate__fadeInUp">
                                <img src="{% static 'images/icon-auction-6.svg' %}" style="width:5em">
                                <h3 class="secondary-accent">Submit Interest</h3>
                                <p>Tell us which asset you want and whether you would like to make an offer or request details.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="d-flex flex-column gspace-1">
                            <div class="process-header"><span class="process-number">03</span></div>
                            <div class="card card-process animate-box animated animate__animated" data-animate="animate__fadeInUp">
                                <img src="{% static 'images/icon-auction-7.svg' %}" style="width:5em">
                                <h3 class="secondary-accent">Negotiate</h3>
                                <p>We help clarify availability, ownership, transfer conditions and the next steps where applicable.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="d-flex flex-column gspace-1">
                            <div class="process-header"><span class="process-number">04</span></div>
                            <div class="card card-process animate-box animated animate__animated" data-animate="animate__fadeInUp">
                                <img src="{% static 'images/icon-auction-8.svg' %}" style="width:5em">
                                <h3 class="secondary-accent">Complete</h3>
                                <p>Once terms are agreed, the transfer process follows the relevant registrar or platform rules.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="section py-0 animate-box animated animate__animated" data-animate="animate__zoomIn" id="request">
        <div class="hero-container">
            <div class="cta-banner">
                <div class="cta-content">
                    <div class="cta-container">
                        <h2 class="secondary-accent">Need a Domain, Page or Handle You Cannot Reach?</h2>
                        <p>If you are trying to secure a specific domain, social media page or username but cannot contact the owner, our broker service can help you make the right approach.</p>
                        <div><a href="{% url 'contact' %}" class="btn btn-accent">Start Broker Request</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
{% endblock %}