haikal/templates/inventory/inventory_stats.html

{% extends "base.html" %}
{% load i18n static %}

{% block title %}
  {% trans "inventory"|capfirst %}
{% endblock %}

{% block content %}

  <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' 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>
    </div>
  </div>

{% endblock %}