116 lines
3.8 KiB
HTML
116 lines
3.8 KiB
HTML
{% extends 'base.html' %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
{% block title %}
|
|
{% trans 'inventory'|capfirst %}
|
|
{% endblock %}
|
|
{% block inventory %}<a class="nav-link active fw-bold">{% trans "inventory" %}<span class="visually-hidden">(current)</span></a>{% endblock %}
|
|
{% block content %}
|
|
<style>
|
|
.color-div {
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 50%;
|
|
border: 1px solid #ccc;
|
|
margin: auto;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
<div class="d-flex flex-column min-vh-100">
|
|
<div class="d-flex flex-column flex-sm-grow-1 ms-sm-14 p-1">
|
|
<main class="d-grid gap-4 p-1">
|
|
<div class="row g-4">
|
|
<div class="col-lg-6 col-xl-12">
|
|
|
|
|
|
<div class="container m-1">
|
|
<form method="get" >
|
|
<div class="input-group input-group-sm">
|
|
<button id="inputGroup-sizing-sm" class="btn btn-sm btn-secondary rounded-start" type="submit">{% trans 'search'|capfirst %}</button>
|
|
<input type="text" name="q" class="form-control form-control-sm rounded-end" value="{{ request.GET.q }}" aria-describedby="inputGroup-sizing-sm"/>
|
|
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<table class="table table-responsive table-sm align-middle">
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th>{% trans "VIN" %}</th>
|
|
<th>{% trans "Year" %}</th>
|
|
<th>{% trans "Make" %}</th>
|
|
<th>{% trans "Model" %}</th>
|
|
<th>{% trans "Actions" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for car in cars %}
|
|
<tr class="{% if car.is_reserved %}table-danger{% endif %}">
|
|
{% if car.colors.all %}
|
|
{% for color in car.colors.all %}
|
|
<td><div class="color-div" style="background-color: rgb({{ color.rgb }});"></div></td>
|
|
{% endfor %}
|
|
{% else %}
|
|
<td><div class="color-div"><i class="bi bi-x-lg fs-6"></i></div></td>
|
|
{% endif %}
|
|
<td>{{ car.vin }}</td>
|
|
<td>{{ car.year }}</td>
|
|
<td>{{ car.id_car_make.get_local_name }}</td>
|
|
<td>{{ car.id_car_model.get_local_name }}</td>
|
|
<td>
|
|
<a href="{% url 'car_detail' car.pk %}" class="btn btn-sm btn-success"><small>{% trans "view" %}</small></a>
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="7">{% trans "No cars available." %}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
<!-- Optional: Pagination -->
|
|
{% if is_paginated %}
|
|
<nav aria-label="Page navigation">
|
|
<ul class="pagination pagination-sm justify-content-center">
|
|
{% if page_obj.has_previous %}
|
|
<li class="page-item py-0">
|
|
<a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
|
|
<span aria-hidden="true">«</span>
|
|
</a>
|
|
</li>
|
|
{% else %}
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#" aria-label="Previous">
|
|
<span aria-hidden="true">«</span>
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
{% for num in page_obj.paginator.page_range %}
|
|
{% if page_obj.number == num %}
|
|
<li class="page-item active"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
|
|
{% else %}
|
|
<li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
|
|
{% endif %}
|
|
{% endfor %} {% if page_obj.has_next %}
|
|
<li class="page-item">
|
|
<a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
|
|
<span aria-hidden="true">»</span>
|
|
</a>
|
|
</li>
|
|
{% else %}
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#" aria-label="Next">
|
|
<span aria-hidden="true">»</span>
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
</nav>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |