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

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

{% block content %}
    <div class="px-3 mb-6">
            <div class="row justify-content-between">
              <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0 "><span class="uil fs-5 lh-1 uil-car-sideview text-primary"></span>
                <h1 class="fs-5 pt-3">{{ inventory.total_cars }}</h1>
                <p class="fs-9 mb-0">{% trans "Total Cars in Inventory" %}</p>
              </div>
              <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end-md border-bottom pb-4 pb-xxl-0"><span class="uil fs-5 lh-1 uil-lock-alt text-info"></span>
                <h1 class="fs-5 pt-3">2</h1>
                <p class="fs-9 mb-0">{{ _("Reserved")}}</p>
              </div>
              <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-bottom-xxl-0 border-bottom border-end border-end-md-0 pb-4 pb-xxl-0 pt-4 pt-md-0"><span class="uil fs-5 lh-1 uil-envelopes text-primary"></span>
                <h1 class="fs-5 pt-3">1,366</h1>
                <p class="fs-9 mb-0">Emails Delivered</p>
              </div>
              <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-md border-end-xxl-0 border-bottom border-bottom-md-0 pb-4 pb-xxl-0 pt-4 pt-xxl-0"><span class="uil fs-5 lh-1 uil-envelope-open text-info"></span>
                <h1 class="fs-5 pt-3">1,200</h1>
                <p class="fs-9 mb-0">Emails Opened</p>
              </div>
              <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end border-end-xxl-0 pb-md-4 pb-xxl-0 pt-4 pt-xxl-0"><span class="uil fs-5 lh-1 uil-envelope-check text-success"></span>
                <h1 class="fs-5 pt-3">900</h1>
                <p class="fs-9 mb-0">Emails Clicked</p>
              </div>
              <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl pb-md-4 pb-xxl-0 pt-4 pt-xxl-0"><span class="uil fs-5 lh-1 uil-envelope-block text-danger"></span>
                <h1 class="fs-5 pt-3">500</h1>
                <p class="fs-9 mb-0">Emails Bounce</p>
              </div>
            </div>
          </div>
<div class="row mt-4">

<!-- Total Cars -->

  <!-- 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>
{% endblock %}