<div class="row">
    <div class="col-xs-12">
        <br>
    </div>
</div>
{% if caps_data %}
    <!-- Mobile Accordion View for CAPS -->
    <div class="mobile-accordion">
        {% for cap in caps_data %}
            <div class="accordion-item">
                <div class="accordion-header" onclick="toggleAccordion(this)">
                    <span>{{ cap.rate_category.name }}</span>
                    <span class="accordion-chevron">▶</span>
                </div>
                <div class="accordion-body">
                    {% if core_facilities_exist and cap.core_facility_names %}
                        <div class="accordion-detail-row">
                            <span class="accordion-detail-label">Core Facilities:</span>
                            <span class="accordion-detail-value">
                                {% for facility_name in cap.core_facility_names %}
                                    {{ facility_name }}
                                    {% if not forloop.last %},{% endif %}
                                {% endfor %}
                            </span>
                        </div>
                    {% endif %}
                    <div class="accordion-detail-row">
                        <span class="accordion-detail-label">Charge Types:</span>
                        <span class="accordion-detail-value">
                            {% for charge_type in cap.billable_charge_types %}
                                {{ charge_type.friendly_display_name }}
                                {% if not forloop.last %},{% endif %}
                            {% endfor %}
                        </span>
                    </div>
                    <div class="accordion-detail-row">
                        <span class="accordion-detail-label">Cap Tiers:</span>
                        <span class="accordion-detail-value">
                            {% for tier in cap.capdiscounttier_set.all %}
                                > {{ tier.amount|floatformat:2 }} → {{ tier.discount|floatformat:2 }}%
                                {% if not forloop.last %}<br />{% endif %}
                            {% endfor %}
                        </span>
                    </div>
                    <div class="accordion-detail-row">
                        <span class="accordion-detail-label">Resets:</span>
                        <span class="accordion-detail-value">{{ cap.get_recurrence_interval_display }}</span>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
    <!-- Desktop Table View for CAPS -->
    <div class="table-responsive desktop-table">
        <table class="table table-align-middle table-bordered table-condensed table-hover thead-light">
            <thead>
                <tr>
                    <th class="text-center col-md-3"></th>
                    {% if core_facilities_exist %}<th class="text-center col-md-2">Core Facilities</th>{% endif %}
                    <th class="text-center col-md-3">Charge types</th>
                    <th class="text-center col-md-3">Cap Limits</th>
                    <th class="text-center col-md-2">Discount %</th>
                    <th class="text-center col-md-2">Resets</th>
                </tr>
            </thead>
            <tbody>
                {% for cap in caps_data %}
                    <tr>
                        <td class="text-center">{{ cap.rate_category.name }}</td>
                        {% if core_facilities_exist %}
                            <td>
                                {% for facility_name in cap.core_facility_names %}
                                    {{ facility_name }}
                                    {% if not forloop.last %}<br />{% endif %}
                                {% endfor %}
                            </td>
                        {% endif %}
                        <td class="text-center">
                            {% for charge_type in cap.billable_charge_types %}
                                {{ charge_type.friendly_display_name }}
                                {% if not forloop.last %}<br />{% endif %}
                            {% endfor %}
                        </td>
                        <td class="text-center">
                            {% for tier in cap.capdiscounttier_set.all %}
                                > {{ tier.amount|floatformat:2|default:"0.00" }}
                                <br />
                            {% endfor %}
                        </td>
                        <td class="text-center">
                            {% for tier in cap.capdiscounttier_set.all %}
                                {{ tier.discount|floatformat:2|default:"0.00" }}%
                                <br />
                            {% endfor %}
                        </td>
                        <td class="text-center">{{ cap.get_recurrence_interval_display }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
{% else %}
    <div class="row">
        <div class="col-xs-12">
            <p class="text-center text-muted">No CAP configurations are currently defined.</p>
        </div>
    </div>
{% endif %}
