{% extends "base.html" %}
{% load i18n static %}
{% block title %}
    {% trans "Inventory Stats"|capfirst %}
{% endblock %}
{% block content %}

{% if inventory %}
    <div class="row justify-content-between">
        <div class="col-sm-12 ">
            <div class="card border h-100 w-100 p-lg-10">
                <div class="bg-holder bg-card"
                     style="background-image:url({% static 'images/spot-illustrations/32.png' %});
                            background-position: top right"></div>
                <div class="d-dark-none">
                    <div class="bg-holder bg-card me-5"
                         style="background-image:url({% static 'images/spot-illustrations/dark_21.png' %});
                                background-position: bottom right;
                                transform: revert"></div>
                </div>
                <div class="d-light-none">
                    <div class="bg-holder bg-card me-5"
                         style="background-image:url({% static 'images/spot-illustrations/21.png' %});
                                background-position: bottom right;
                                transform: revert"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- Total Cars -->
    <div class="row justify-content-center">
        <div class="col-sm-12">
            <!-- Inventory by Makes -->
            <div class="accordion" id="makesAccordion">
                {% for make in inventory.makes %}
                    <div class="accordion-item">
                        <p class="accordion-header" id="heading{{ make.make_id }}">
                            <button class="accordion-button collapsed"
                                    type="button"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#collapse{{ make.make_id }}"
                                    aria-expanded="true"
                                    aria-controls="collapse{{ make.make_id }}">
                                {{ make.make_name }}:&nbsp;
                                <strong>{{ make.total_cars }}</strong>
                            </button>
                        </p>
                        <div id="collapse{{ make.make_id }}"
                             class="accordion-collapse collapse"
                             aria-labelledby="heading{{ make.make_id }}"
                             data-bs-parent="#makesAccordion">
                            <div class="accordion-body">
                                <p>{% trans "models"|capfirst %}</p>
                                <ul class="list-group">
                                    {% for model in make.models %}
                                        <li class="list-group-item">
                                            {{ model.model_name }}:&nbsp;
                                            <strong>{{ model.total_cars }}</strong>
                                            <button class="btn btn-sm btn-link text-decoration-none"
                                                    type="button"
                                                    data-bs-toggle="collapse"
                                                    data-bs-target="#detailsModel{{ model.model_id }}"
                                                    aria-expanded="false"
                                                    aria-controls="detailsModel{{ model.model_id }}">
                                                {% trans "Details" %}
                                            </button>
                                            <div class="collapse mt-2" id="detailsModel{{ model.model_id }}">
                                                <p class="mt-2">{% trans "Trims" %}</p>
                                                <ul>
                                                    {% for trim in model.trims %}
                                                        <li>
                                                            <a href="{% url 'car_inventory' dealer_slug=request.dealer.slug make_id=make.slug model_id=model.slug trim_id=trim.slug %}">{{ trim.trim_name }}</a>&nbsp;-&nbsp;{% trans "Total" %}:
                                                            <strong>{{ trim.total_cars }}</strong>
                                                        </li>
                                                    {% empty %}
                                                        <li>{% trans "No trims available" %}</li>
                                                    {% endfor %}
                                                </ul>
                                            </div>
                                        </li>
                                    {% empty %}
                                        <li class="list-group-item">{% trans "No models available." %}</li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
            {% if is_paginated %}
                <div class="d-flex justify-content-end mt-3">
                    <div class="d-flex">{% include 'partials/pagination.html' %}</div>
                </div>
            {% endif %}
        </div>
    </div>

    {% else %}
         {% url "car_add" request.dealer.slug as create_car_url %}
         {% include "empty-illustration-page.html" with value="car" url=create_car_url %}
    {% endif %}
{% endblock %}