{% extends "base.html" %}
{% load i18n %}
{% block content %}
<div class="container mt-4">
    <h5 class="text-center">{% trans "Add Colors" %}</h5>
    <p class="text-center">{% trans "Select exterior and interior colors for" %} {{ car.id_car_make.get_local_name }} {{ car.id_car_model.get_local_name }}</p>

    <form method="post">
        {% csrf_token %}

            <!-- Exterior Colors -->
    <div class="row g-4">
     <p class="fs-5 mb-0">{% trans 'Exterior Colors' %}</p>
            {% for color in form.fields.exterior.queryset %}
            <div class="col-lg-4 col-xl-2">
                <div class="card rounded shadow">
                    <div class="card-body" style="background-color: rgb({{ color.rgb }});">
                        <div class="form-check">
                            <input class="form-check-input"
                            type="radio"
                            name="exterior"
                            id="id_exterior" value="{{ color.id }}" >
                            <label class="form-check-label" for="id_exterior">
                            <small>{{ color.get_local_name }}</small>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
            <!-- Interior Colors -->
    <p class="fs-5 mt-3 mb-0">{% trans 'Interior Colors' %}</p>
    {% for color in form.fields.interior.queryset %}
            <div class="col-lg-4 col-xl-2">
                <div class="card rounded shadow">
                    <div class="card-body" style="background-color: rgb({{ color.rgb }});">
                        <div class="form-check">
                            <input class="form-check-input"
                            type="radio"
                            name="interior"
                            id="id_interior" value="{{ color.id }}" >
                            <label class="form-check-label" for="id_interior">
                            <small>{{ color.get_local_name }}</small>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
    {% endfor %}
        </div>

        <!-- Save and Cancel Buttons -->
        <div class="row g-1 mt-4">
            <div class="btn-group">
            <button type="submit" class="btn btn-success btn-sm me-1">{% trans "Save" %}</button>
            <a href="{% url 'car_detail' car.pk %}" class="btn btn-secondary btn-sm">{% trans "Cancel" %}</a>
            </div>
        </div>
    </form>
</div>
{% endblock %}