{% extends 'base.html' %}
{% load i18n %}
{% 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-fluid p-2">
                        <form method="get" class="mb-3">
                            <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" />
                                <!-- Clear Button -->
                                {% if request.GET.q %}
                                <a href="{% url 'inventory_list' %}"
                                   class="btn btn-sm btn-outline-danger ms-1 rounded">
                                    <i class="bi bi-x-lg"></i>
                                </a>
                                {% endif %}
                            </div>
                        </form>
                    </div>

                    <table class="table table-responsive table-sm align-middle">
                        <thead>
                            <tr>
                                <th>{% trans "VIN" %}</th>
                                <th>{% trans "Year" %}</th>
                                <th>{% trans 'Exterior Color' %}</th>
                                <th>{% trans 'Interior Color' %}</th>
                                <th>{% trans "Showroom Location" %}</th>
                                <th>{% trans "Actions" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for car in cars %}
                            <tr class="{% if car.is_reserved %}table-danger{% endif %}">
                                <td>{{ car.vin }}</td>
                                <td>{{ car.year }}</td>
                                {% if car.colors.exists %}
                                <td><span>{{ car.colors.first.exterior.get_local_name }}<div class="color-div" style="background-color: rgb({{ car.colors.first.exterior.rgb }});"></div></span></td>
                                <td>{{ car.colors.first.interior.get_local_name }}<div class="color-div" style="background-color: rgb({{ car.colors.first.interior.rgb }});"></div></td>
                                {% else %}
                                <td><div class="color-div"><i class="bi bi-x-lg fs-6"></i></div></td>
                                <td><div class="color-div"><i class="bi bi-x-lg fs-6"></i></div></td>
                                {% endif %}
                            {% if  car.location.is_owner_showroom  %}
                            <td> {% trans 'Our Showroom' %}</td>
                            {% else %}
                                <td>{{ car.location.showroom.get_local_name }}</td>
                            {% endif %}
                                <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="6">{% trans "No cars available." %}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>

                    <!-- 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">
                                <a class="page-link" href="?page=1" aria-label="First">
                                    &laquo;&laquo;
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
                                    &laquo;
                                </a>
                            </li>
                            {% else %}
                            <li class="page-item disabled">
                                <span class="page-link">&laquo;&laquo;</span>
                            </li>
                            <li class="page-item disabled">
                                <span class="page-link">&laquo;</span>
                            </li>
                            {% endif %}
                            {% for num in page_obj.paginator.page_range %}
                            {% if page_obj.number == num %}
                            <li class="page-item active">
                                <span class="page-link">{{ num }}</span>
                            </li>
                            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                            <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">
                                    &raquo;
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}" aria-label="Last">
                                    &raquo;&raquo;
                                </a>
                            </li>
                            {% else %}
                            <li class="page-item disabled">
                                <span class="page-link">&raquo;</span>
                            </li>
                            <li class="page-item disabled">
                                <span class="page-link">&raquo;&raquo;</span>
                            </li>
                            {% endif %}
                        </ul>
                    </nav>
                    {% endif %}
                </div>
            </div>
        </main>
    </div>
</div>
{% endblock %}