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

{% block content %}
<!-- Hero Section -->
<section class="hero">
    <div class="container text-center hero-content">
        <h1 class="display-3 mb-3">Find Your Next <span class="text-danger">Masterpiece</span></h1>
        <p class="lead mb-5 opacity-75">Exclusive car auctions. Real-time bidding. Trusted sellers.</p>
        
        <div class="search-container mx-auto">
            <form action="{% url 'home' %}" method="GET" class="d-flex">
                <input type="text" name="q" class="form-control search-input" placeholder="Search by make, model, or year..." value="{{ query|default:'' }}">
                <button type="submit" class="btn btn-primary ms-2 px-4">Search</button>
            </form>
        </div>
    </div>
</section>

<!-- Active Auctions -->
<section class="py-5">
    <div class="container">
        <div class="d-flex justify-content-between align-items-end mb-5">
            <div>
                <h2 class="mb-1">Featured Auctions</h2>
                <p class="text-muted mb-0">Discover top deals closing soon.</p>
            </div>
            <a href="#" class="btn btn-link text-danger text-decoration-none fw-bold">View All <i class="bi bi-arrow-right"></i></a>
        </div>

        <div class="row g-4">
            {% for auction in auctions %}
            <div class="col-lg-4 col-md-6">
                <div class="auction-card">
                    <div class="card-img-container">
                        {% if auction.image_url %}
                            <img src="{{ auction.image_url }}" class="card-img-top" alt="{{ auction.title }}">
                        {% else %}
                            <img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" class="card-img-top" alt="Car Placeholder">
                        {% endif %}
                        <span class="badge-bid">${{ auction.current_bid|default:auction.starting_bid }}</span>
                        <span class="badge-time"><i class="bi bi-clock"></i> {{ auction.time_left }}</span>
                    </div>
                    <div class="card-body p-4">
                        <h5 class="card-title mb-2">{{ auction.title }}</h5>
                        <p class="text-muted small mb-3">{{ auction.make }} • {{ auction.year }} • {{ auction.model }}</p>
                        <div class="d-grid">
                            <a href="{% url 'auction_detail' auction.pk %}" class="btn btn-outline-dark">View Auction</a>
                        </div>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="col-12 text-center py-5">
                <div class="opacity-50 mb-3">
                    <i class="bi bi-search display-1"></i>
                </div>
                <h3>No active auctions found</h3>
                <p class="text-muted">Try searching for something else or check back later.</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endblock %}
