{% extends 'base.html' %}
{% block title %}{{ vehicle.make }} {{ vehicle.model }} - TimeWheel Share{% endblock %}
{% block content %}
<div class="vehicle-detail-header">
    <h1>{{ vehicle.make }} {{ vehicle.model }}</h1>
    <p class="vehicle-registration-large">{{ vehicle.registration_number }}</p>
</div>

<div class="vehicle-detail-content">
    <div class="vehicle-image-section">
        <div class="vehicle-main-image">
            {% if vehicle.image %}
                <img src="{{ vehicle.image.url }}" alt="{{ vehicle.make }} {{ vehicle.model }}" id="mainImage">
            {% else %}
                <img src="https://images.unsplash.com/photo-1542367597-8849bfa3b6b4?auto=format&fit=crop&w=800&q=80" alt="{{ vehicle.make }} {{ vehicle.model }}" id="mainImage">
            {% endif %}
            <div class="image-overlay">
                <button class="image-zoom-btn" onclick="zoomImage()">🔍</button>
            </div>
        </div>
        
        <!-- Image Gallery Placeholder -->
        <div class="image-gallery">
            <div class="gallery-thumbnails">
                {% if vehicle.image %}
                    <div class="thumbnail active" onclick="changeImage('{{ vehicle.image.url }}')">
                        <img src="{{ vehicle.image.url }}" alt="Main view">
                    </div>
                {% endif %}
                <div class="thumbnail" onclick="changeImage('https://images.unsplash.com/photo-1542367597-8849bfa3b6b4?auto=format&fit=crop&w=400&q=80')">
                    <img src="https://images.unsplash.com/photo-1542367597-8849bfa3b6b4?auto=format&fit=crop&w=400&q=80" alt="Side view">
                </div>
                <div class="thumbnail" onclick="changeImage('https://images.unsplash.com/photo-1552519507-da3b142c6e3d?auto=format&fit=crop&w=400&q=80')">
                    <img src="https://images.unsplash.com/photo-1552519507-da3b142c6e3d?auto=format&fit=crop&w=400&q=80" alt="Interior view">
                </div>
                <div class="thumbnail" onclick="changeImage('https://images.unsplash.com/photo-1583121274602-3e2820c69888?auto=format&fit=crop&w=400&q=80')">
                    <img src="https://images.unsplash.com/photo-1583121274602-3e2820c69888?auto=format&fit=crop&w=400&q=80" alt="Rear view">
                </div>
            </div>
        </div>
    </div>

    <div class="vehicle-info-section">
        <div class="vehicle-specs">
            <h3>Vehicle Specifications</h3>
            <div class="specs-grid">
                <div class="spec-item">
                    <span class="spec-label">Owner</span>
                    <span class="spec-value">{{ vehicle.owner.username }}</span>
                </div>
                {% if vehicle.year %}
                <div class="spec-item">
                    <span class="spec-label">Year</span>
                    <span class="spec-value">{{ vehicle.year }}</span>
                </div>
                {% endif %}
                {% if vehicle.color %}
                <div class="spec-item">
                    <span class="spec-label">Color</span>
                    <span class="spec-value">{{ vehicle.color }}</span>
                </div>
                {% endif %}
                <div class="spec-item">
                    <span class="spec-label">Status</span>
                    <span class="spec-value status-active">Active</span>
                </div>
            </div>
        </div>

        <div class="vehicle-actions">
            <a href="/bookings/new/{{ vehicle.id }}/" class="btn btn-primary btn-large">Book This Vehicle</a>
            <a href="/vehicles/{{ vehicle.id }}/availability/" class="btn btn-secondary">View Availability</a>
        </div>

        <div class="availability-section">
            <h3>Available Times</h3>
            {% if availabilities %}
                <div class="availability-list">
                    {% for a in availabilities %}
                        <div class="availability-item">
                            <div class="time-range">
                                <span class="start-time">{{ a.start_time|date:"M d, Y" }}</span>
                                <span class="time-separator">→</span>
                                <span class="end-time">{{ a.end_time|date:"M d, Y" }}</span>
                            </div>
                            {% if a.notes %}
                                <p class="availability-notes">{{ a.notes }}</p>
                            {% endif %}
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="no-availability">
                    <p>No availability scheduled yet.</p>
                    <a href="/vehicles/{{ vehicle.id }}/availability/" class="btn btn-secondary btn-small">Add Availability</a>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Image Modal -->
<div id="imageModal" class="image-modal" onclick="closeModal()">
    <div class="modal-content">
        <span class="close-btn" onclick="closeModal()">&times;</span>
        <img id="modalImage" src="" alt="">
    </div>
</div>

<script>
function changeImage(src) {
    document.getElementById('mainImage').src = src;
    document.querySelectorAll('.thumbnail').forEach(thumb => thumb.classList.remove('active'));
    event.target.closest('.thumbnail').classList.add('active');
}

function zoomImage() {
    const modal = document.getElementById('imageModal');
    const modalImg = document.getElementById('modalImage');
    const mainImg = document.getElementById('mainImage');
    
    modal.style.display = 'block';
    modalImg.src = mainImg.src;
}

function closeModal() {
    document.getElementById('imageModal').style.display = 'none';
}
</script>
{% endblock %}