{% 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.make_id model_id=model.model_id trim_id=trim.trim_id %}">
                  {{ 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 %}