{% extends 'base.html' %}
{% block title %}Add Vehicle - TimeWheel Share{% endblock %}
{% block content %}
<div class="form-container">
    <div class="form-header">
        <h2>Add Your Vehicle</h2>
        <p class="form-subtitle">List your vehicle to start earning from idle time</p>
    </div>
    
    <form method="post" enctype="multipart/form-data" class="vehicle-form">
        {% csrf_token %}
        
        <div class="form-row">
            <div class="form-group">
                <label for="{{ form.make.id_for_label }}">Make</label>
                {{ form.make }}
                {% if form.make.errors %}
                    <div class="error-message">{{ form.make.errors.0 }}</div>
                {% endif %}
            </div>
            
            <div class="form-group">
                <label for="{{ form.model.id_for_label }}">Model</label>
                {{ form.model }}
                {% if form.model.errors %}
                    <div class="error-message">{{ form.model.errors.0 }}</div>
                {% endif %}
            </div>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label for="{{ form.registration_number.id_for_label }}">Registration Number</label>
                {{ form.registration_number }}
                {% if form.registration_number.errors %}
                    <div class="error-message">{{ form.registration_number.errors.0 }}</div>
                {% endif %}
            </div>
            
            <div class="form-group">
                <label for="{{ form.year.id_for_label }}">Year</label>
                {{ form.year }}
                {% if form.year.errors %}
                    <div class="error-message">{{ form.year.errors.0 }}</div>
                {% endif %}
            </div>
        </div>

        <div class="form-group">
            <label for="{{ form.color.id_for_label }}">Color</label>
            {{ form.color }}
            {% if form.color.errors %}
                <div class="error-message">{{ form.color.errors.0 }}</div>
            {% endif %}
        </div>

        <div class="form-group">
            <label for="{{ form.image.id_for_label }}">Vehicle Image</label>
            <div class="file-upload-container">
                {{ form.image }}
                <div class="file-upload-info">
                    <p>Upload a clear photo of your vehicle</p>
                    <p class="file-hint">Recommended: JPG or PNG, max 5MB</p>
                </div>
            </div>
            {% if form.image.errors %}
                <div class="error-message">{{ form.image.errors.0 }}</div>
            {% endif %}
        </div>

        <div class="form-actions">
            <button type="submit" class="btn btn-primary">Add Vehicle</button>
            <a href="/vehicles/" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>
{% endblock %}