{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'environment/css/quotas_dropdown.css' %}">

<div class="quotas-dropdown-container">
    {% for region_quotas in quotas %}
        <div class="quotas-region-card mb-3">
            <div class="quotas-region-toggle collapsed" data-region="{{ region_quotas.region }}">
                <span><i class="fas fa-chevron-down collapse-indicator mr-2"></i>{{ region_quotas.region }}</span>
            </div>
            <div class="quotas-region-panel" id="quotas-panel-{{ region_quotas.region }}" style="display: none;">
                {% for quota in region_quotas.quotas %}
                    <div class="card mb-2">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="d-flex justify-content-between" style="width: 100%">
                                    <div>
                                        <h6 class="mb-0">{{ quota.metric_name }}</h6>
                                    </div>
                                    <div class="d-flex justify-content-between" style="width: 250px">
                                        <div class="progress" style="width: 100px; margin-right: 10px;">
                                            <div class="progress-bar" role="progressbar" style="width: {{ quota.usage_percentage }}%;" aria-valuenow="{{ quota.usage }}" aria-valuemin="0" aria-valuemax="{{ quota.limit }}"></div>
                                        </div>
                                        <div>
                                            <h6 class="mb-0">{{ quota.usage }}/{{ quota.limit }}</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    {% endfor %}
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.quotas-region-toggle').forEach(function(toggle) {
      toggle.addEventListener('click', function() {
        const region = this.getAttribute('data-region');
        const panel = document.getElementById('quotas-panel-' + region);
        if (panel.style.display === 'none') {
          panel.style.display = 'block';
          this.classList.remove('collapsed');
        } else {
          panel.style.display = 'none';
          this.classList.add('collapsed');
        }
      });
    });
  });
</script>