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

{% block title %}
{% trans "Inventory Statistics" %}
{% endblock %}

{% block content %}
<div class="container mt-4">

<!-- Total Cars -->
  <div class="alert alert-primary">
    <div class="d-flex justify-content-between">
        <strong class="fs-6">{% trans "Total Cars in Inventory" %}</strong>
        <strong class="fs-6">{{ inventory.total_cars }}</strong>
    </div>
  </div>  
  <!-- 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" 
                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>
{% endblock %}