{% extends 'base.html' %}
{% block title %}Vehicles — TimeWheel Share{% endblock %}
{% block content %}
<div class="page-header">
    <h2>Available Vehicles</h2>
    <p class="page-subtitle">Choose from our collection of well-maintained vehicles</p>
    <div class="page-actions">
        <a href="/vehicles/new/" class="btn btn-primary">Add Vehicle</a>
        <a href="/vehicles/availability/new/" class="btn btn-secondary">Add Availability</a>
        {% if not request.user.is_authenticated %}
            <a href="/accounts/login/" class="btn btn-ghost">Login</a>
            <a href="/accounts/signup/" class="btn btn-ghost">Sign up</a>
        {% endif %}
    </div>
</div>

<div class="vehicles-grid">
    {% for v in vehicles %}
        <div class="vehicle-card">
            <div class="vehicle-image">
                {% if v.image %}
                    <img src="{{ v.image.url }}" alt="{{ v.make }} {{ v.model }}" loading="lazy">
                {% else %}
                    <img src="https://images.unsplash.com/photo-1542367597-8849bfa3b6b4?auto=format&fit=crop&w=400&q=80" alt="{{ v.make }} {{ v.model }}" loading="lazy">
                {% endif %}
                <div class="vehicle-overlay">
                    <div class="vehicle-actions">
                        <a href="/vehicles/{{ v.id }}/" class="btn btn-small">View Details</a>
                        <a href="/bookings/new/{{ v.id }}/" class="btn btn-small btn-primary">Book Now</a>
                    </div>
                </div>
            </div>
            <div class="vehicle-info">
                <h3 class="vehicle-title">{{ v.make }} {{ v.model }}</h3>
                <p class="vehicle-registration">{{ v.registration_number }}</p>
                <div class="vehicle-meta">
                    {% if v.year %}<span class="meta-item">Year: {{ v.year }}</span>{% endif %}
                    {% if v.color %}<span class="meta-item">Color: {{ v.color }}</span>{% endif %}
                </div>
                <div class="vehicle-links">
                    <a href="/vehicles/{{ v.id }}/availability/" class="link-small">View Availability</a>
                </div>
            </div>
        </div>
    {% empty %}
        <div class="empty-state">
            <div class="empty-icon">🚗</div>
            <h3>No vehicles available</h3>
            <p>Be the first to add a vehicle to our platform!</p>
            <a href="/vehicles/new/" class="btn btn-primary">Add Your Vehicle</a>
        </div>
    {% endfor %}
</div>
{% endblock %}