{% extends "base.html" %}
{% load i18n static %}
{%block title%} {% trans  'Car Makes'%}{%endblock%}
{% block content %}
    <style>
        /* Your existing CSS styles here */
        .car-makes-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        .car-make-option {
            position: relative;
            cursor: pointer;
            text-align: center;
            transition: all 0.3s ease;
        }
        .car-make-image {
            width: 100px;
            height: 100px;
            object-fit: contain;
            border: 2px solid transparent;
            border-radius: 8px;
            padding: 8px;
            background: #f8f9fa;
        }
        .car-make-option input[type="checkbox"] {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
        }
        .car-make-option input[type="checkbox"]:checked + .car-make-image-container .car-make-image {
            border: 2px solid #2c7be5;
            box-shadow: 0 0 10px rgba(44, 123, 229, 0.5);
            background: #f0f7ff;
        }
        .car-make-name {
            margin-top: 8px;
            font-size: 12px;
            color: #5e6e82;
        }
        .car-make-image-container {
            display: flex;
            justify-content: center;
        }
        .logo-placeholder {
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f8f9fa;
            border-radius: 8px;
        }
    </style>

    <h2>{{ _("Select Car Makes You Sell") }}</h2>

    <form method="post" action="{% url 'assign_car_makes' %}">
        {% csrf_token %}

        <div class="car-makes-grid">
            {% for car_make in form.fields.car_makes.queryset %}

                <label class="car-make-option">
                    <input type="checkbox"
                           name="car_makes"
                           value="{{ car_make.pk }}"
                           {% if car_make.pk in form.initial.car_makes or car_make.pk|stringformat:"s" in form.car_makes.value %}checked{% endif %}>
                    <div class="car-make-image-container">
                        {% if car_make.logo and car_make.logo.url %}
                            <img src="{{ car_make.logo.url }}"
                                 alt="{{ car_make.name }}"
                                 class="car-make-image">
                        {% else %}
                            <div class="logo-placeholder">
                                {{ car_make.name }}
                            </div>
                        {% endif %}
                    </div>
                    <div class="car-make-name">{{ car_make.get_local_name }}</div>
                </label>
            {% endfor %}
        </div>
        <div class="d-grid gap-2">
            <button class="btn btn-phoenix-primary btn-lg" type="submit"><i class="fa fa-save me-2"></i>{{ _("Save") }}</button>
        </div>
    </form>
{% endblock %}