{% 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: 3px solid rgb(44, 229, 44);
            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 class="text-center text-primary">{{ _("Select Car Makes You Sell") }}</h2>
        <form method="post" class="mb-3"
              action="{% url 'assign_car_makes' request.dealer.slug %}">
            {% 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-outline-primary btn-lg" type="submit">
                    <i class="fa fa-save me-2"></i>{{ _("Save") }}
                </button>
            </div>
        </form>
    {% endblock %}