92 lines
3.3 KiB
HTML
92 lines
3.3 KiB
HTML
{% 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 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 %}
|