<div class="col-md-4 mb-3 mb-md-0">
    <div class="card card-{{ status }}-esi-endpoints">
        <div class="card-header bg-{% if status == 'red' %}danger{% elif status == 'yellow' %}warning{% else %}success{% endif %}">
            <div class="card-title text-white text-center mb-0">
                {{ title }}
            </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 }}
                                        {{ endpoint.route }}
                                    </p>
                                {% endfor %}
                            </div>
                        </div>
                    {% endfor %}
                {% endif %}
            </div>
        {% endif %}
    </div>
</div>
