{% extends 'base.html' %}
{% load static carconnectivity_filters %}

{% block title %}Garage{% endblock %}

{% block header %}Garage{% endblock %}

{% block content %}
{% if garage.list_vehicles %}
    <div class="row stagger-children">
        {% for vehicle in garage.list_vehicles %}
            <div class="col-12 col-md-6 col-lg-4">
                <div class="vehicle-card" data-href="{% url 'vehicle' vin=vehicle.vin.value %}">
                    <img src="{% url 'vehicle_img' vin=vehicle.vin.value %}?fallback=icons/car.svg" 
                         class="vehicle-card-image" 
                         alt="{{ vehicle.name.value|default:vehicle.id }}"
                         loading="lazy">
                    <div class="vehicle-card-body">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-sm);">
                            <h3 class="vehicle-card-title" style="margin: 0;">
                                {% if vehicle.name.enabled %}
                                    {{ vehicle.name.value }}
                                {% else %}
                                    {{ vehicle.id }}
                                {% endif %}
                            </h3>
                            {% if vehicle.name.enabled and vehicle.name.last_updated %}
                                <span style="font-size: var(--font-size-xs); color: var(--color-text-tertiary);" class="js-convert-time">{{ vehicle.name.last_updated|date:"c" }}</span>
                            {% endif %}
                        </div>
                        
                        <div class="vehicle-card-metric vehicle-card-metric--info">
                            {% if vehicle.model_year.enabled %}
                                <span class="vehicle-card-metric-label">Model Year</span>
                                <span class="vehicle-card-metric-value">{{ vehicle.model_year.value }}</span>
                            {% endif %}
                        </div>
                        
                        {% if vehicle.drives.enabled and vehicle.drives.drives %}
                            <div class="vehicle-card-metric">
                                <div class="battery-icon">
                                    {% for drive in vehicle.drives.drives.values %}
                                        {% if drive.level.enabled %}
                                            <div class="battery-container" data-level="{{ drive.level.value }}">
                                                <div class="battery-body">
                                                    <div class="battery-level" style="width: {{ drive.level.value }}%;"></div>
                                                </div>
                                                <div class="battery-tip"></div>
                                            </div>
                                        {% endif %}
                                    {% endfor %}
                                </div>
                                <span class="vehicle-card-metric-label">Battery:</span>
                                {% for drive in vehicle.drives.drives.values %}
                                    <span class="vehicle-card-metric-value">{{ drive.level|format_cc_element:""|safe }}</span>{% if not forloop.last %}, {% endif %}
                                {% endfor %}
                            </div>
                        {% endif %}
                        
                        {% if vehicle.drives.total_range.enabled %}
                            <div class="vehicle-card-metric">
                                <div class="range-icon loader-shape-3"></div>
                                <span class="vehicle-card-metric-label">Range:</span>
                                <span class="vehicle-card-metric-value">{{ vehicle.drives.total_range|format_cc_element:""|safe }}</span>
                            </div>
                        {% endif %}
                        
                        {% if vehicle.odometer.enabled %}
                            <div class="vehicle-card-metric">
                                <div class="speedometer">
                                    <svg width="20" height="20" viewBox="0 0 100 100">
                                        <circle cx="50" cy="50" r="45" fill="none" stroke="var(--color-divider)" stroke-width="8" opacity="0.3"/>
                                        <circle cx="50" cy="50" r="45" fill="none" stroke="var(--color-primary)" stroke-width="8" 
                                                stroke-dasharray="283" stroke-dashoffset="70" stroke-linecap="round" 
                                                transform="rotate(-90 50 50)"/>
                                        <circle cx="50" cy="50" r="5" fill="var(--color-primary)"/>
                                        <line x1="50" y1="50" x2="75" y2="35" stroke="var(--color-primary)" stroke-width="3" stroke-linecap="round"/>
                                    </svg>
                                </div>
                                <span class="vehicle-card-metric-label">Odometer:</span>
                                <span class="vehicle-card-metric-value">{{ vehicle.odometer|format_cc_element:""|safe }}</span>
                            </div>
                        {% endif %}
                        
                        <a href="{% url 'vehicle' vin=vehicle.vin.value %}" class="btn btn-primary" style="width: 100%; margin-top: var(--space-md);">
                            View Vehicle
                        </a>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% else %}
    <div class="glass-card text-center" style="padding: var(--space-3xl);">
        <img src="{% static 'icons/car.svg' %}" alt="No vehicles" style="width: 64px; height: 64px; margin: 0 auto var(--space-lg); opacity: 0.5;">
        <h3>No vehicles in the garage yet</h3>
        <p class="text-secondary">You might need to add a connector to see vehicles.</p>
    </div>
{% endif %}
{% endblock %}