<div class="col-md-3 mb-3 mb-md-0">
    <div class="card card-{{ status }}-esi-endpoints">
        <div class="card-header text-bg-{% if status == 'Down' %}danger{% elif status == 'Degraded' %}warning{% elif status == 'Recovering' %}info{% else %}success{% endif %}">
            <div class="card-title text-center mb-0">
                {{ title|title }}

                <sup>
                    <i
                        class="fa-solid fa-info-circle cursor-pointer"
                        data-bs-tooltip="aa-esi-status"
                        title="{{ explanation }}"
                    ></i>
                </sup>
            </div>
        </div>

        <div class="card-body text-center">
            <b class="fs-4">{{ data.count }}</b><br>

            <span>
                {{ data.percentage }}
            </span>
        </div>

        {% if with_details is not False %}
            <div class="card-footer">
                {% if data.count > 0 %}
                    {% for category, endpoints in data.endpoints.items %}
                        <div class="card card-default border-0">
                            <div
                                class="card-header border-0 cursor-pointer"
                                data-bs-toggle="collapse"
                                href="#{{ category|slugify }}-{{ status }}"
                                aria-expanded="false"
                                aria-controls="{{ category|slugify }}-{{ status }}"
                            >
                                <p class="card-title h6">
                                    {{ category }}
                                </p>
                            </div>

                            <div id="{{ category|slugify }}-{{ status }}" class="card-body collapse">
                                {% for endpoint in endpoints %}
                                    <p class="small">
                                        {{ endpoint.method }}<br>
                                        {{ endpoint.path }}
                                    </p>
                                {% endfor %}
                            </div>
                        </div>
                    {% endfor %}
                {% endif %}
            </div>
        {% endif %}
    </div>
</div>
