<!-- table.html -->
{% extends 'frontend/base.html' %}

{% block content %}
    <h1>{{ site.title }}</h1>
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
        {% for app_name, app in meta.cards.items %}
            {% for model in app.models %}
                <div class="col d-flex justify-content-center">
                    <div class="card h-100" style="width: 18rem;">
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex justify-content-center align-items-center" style="height: 150px;">
                                <i class="bi bi-bootstrap" style="font-size: 3rem;"></i>
                            </div>
                            <div class="card-body">
                                <h5 class="card-title">{{ app.verbose_name }} - {{ model.verbose_name }}</h5>
                                <p class="card-text">{{ model.description }}</p>
                                <a href="{% url 'frontend' app_name=app_name model_name=model.name %}" class="btn btn-primary  mt-auto">Go to {{ model.verbose_name }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        {% endfor %}
    </div>
{% endblock %}
