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

{% block title %}{{ auction.title }} | AutoBid{% endblock %}

{% block content %}
<section class="py-5">
    <div class="container">
        <nav aria-label="breadcrumb" class="mb-4">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'home' %}" class="text-decoration-none">Home</a></li>
                <li class="breadcrumb-item active">{{ auction.make }} {{ auction.model }}</li>
            </ol>
        </nav>

        <div class="row g-5">
            <!-- Left: Car Images & Details -->
            <div class="col-lg-8">
                <div class="bg-white rounded-4 overflow-hidden shadow-sm mb-4">
                    {% if auction.image_url %}
                        <img src="{{ auction.image_url }}" class="img-fluid w-100" 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="img-fluid w-100" alt="Car Placeholder">
                    {% endif %}
                </div>

                <div class="bg-white rounded-4 p-4 shadow-sm mb-4">
                    <h2 class="h3 mb-4">Specifications</h2>
                    <div class="row g-3">
                        <div class="col-6 col-md-3">
                            <div class="p-3 border rounded-3 text-center">
                                <span class="d-block text-muted small">Make</span>
                                <span class="fw-bold">{{ auction.make }}</span>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="p-3 border rounded-3 text-center">
                                <span class="d-block text-muted small">Model</span>
                                <span class="fw-bold">{{ auction.model }}</span>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="p-3 border rounded-3 text-center">
                                <span class="d-block text-muted small">Year</span>
                                <span class="fw-bold">{{ auction.year }}</span>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="p-3 border rounded-3 text-center">
                                <span class="d-block text-muted small">Bids</span>
                                <span class="fw-bold">{{ bids.count }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-4 p-4 shadow-sm">
                    <h2 class="h3 mb-4">Description</h2>
                    <p class="mb-0 text-muted">{{ auction.description|linebreaks }}</p>
                </div>
            </div>

            <!-- Right: Bidding Widget -->
            <div class="col-lg-4">
                <div class="sticky-top" style="top: 100px;">
                    <div class="bg-white rounded-4 p-4 shadow mb-4">
                        <h1 class="h4 mb-1">{{ auction.title }}</h1>
                        <p class="text-muted small mb-4">Listed by {{ auction.seller.username }}</p>
                        
                        <div class="d-flex justify-content-between align-items-center mb-4 p-3 bg-light rounded-3">
                            <div>
                                <span class="d-block text-muted small">Current Bid</span>
                                <span class="h2 mb-0 fw-bold text-danger">${{ auction.current_bid|default:auction.starting_bid }}</span>
                            </div>
                            <div class="text-end">
                                <span class="d-block text-muted small text-uppercase fw-bold">Ends In</span>
                                <span class="text-dark fw-bold">{{ auction.time_left }}</span>
                            </div>
                        </div>

                        <div class="mb-4">
                            {% if user.is_authenticated %}
                                <form action="#" method="POST">
                                    {% csrf_token %}
                                    <div class="input-group mb-3">
                                        <span class="input-group-text">$</span>
                                        <input type="number" class="form-control" placeholder="Enter bid amount" min="{{ auction.current_bid|default:auction.starting_bid|add:100 }}">
                                    </div>
                                    <button type="submit" class="btn btn-primary w-100 py-3">Place Bid</button>
                                </form>
                                <p class="text-center text-muted small mt-2">Enter at least ${{ auction.current_bid|default:auction.starting_bid|add:100 }}</p>
                            {% else %}
                                <div class="text-center py-3">
                                    <p class="mb-3">Log in to place a bid on this car.</p>
                                    <a href="/admin/login/" class="btn btn-outline-dark w-100">Login to Bid</a>
                                </div>
                            {% endif %}
                        </div>

                        <hr>

                        <div class="bid-history">
                            <h6 class="mb-3">Recent Bids</h6>
                            {% for bid in bids|slice:":5" %}
                                <div class="d-flex justify-content-between align-items-center mb-2 small">
                                    <span class="text-muted">{{ bid.user.username }}</span>
                                    <span class="fw-bold">${{ bid.amount }}</span>
                                </div>
                            {% empty %}
                                <p class="text-muted small text-center mb-0">No bids yet. Be the first!</p>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}
