{% extends "project/base.html" %}

{% load i18n %}

{% block content %}

    <div class="bg-body-tertiary p-4 rounded mb-4">
        <h1>{% translate "django-crud-views examples" %}</h1>
        <p class="lead">
            {% blocktranslate trimmed %}One self-contained example app per feature.
            Every page shows the code behind it.{% endblocktranslate %}
        </p>
        <a class="btn btn-primary" href="https://django-crud-views.readthedocs.io/en/latest">
            {% translate "Documentation" %} &raquo;
        </a>
    </div>

    {% for group, features in feature_groups %}
        {% if features %}
            <h2 id="group-{{ group.key }}" class="h4 mt-4 mb-3"><i class="{{ group.icon }}" aria-hidden="true"></i> {{ group.title }}</h2>
            <div class="row row-cols-1 row-cols-md-3 g-3">
                {% for feature in features %}
                    <div class="col">
                        <div class="card h-100">
                            <div class="card-body">
                                <h5 class="card-title">
                                    <i class="{{ feature.icon }}" aria-hidden="true"></i> {{ feature.title }}
                                    {% if feature.badge %}
                                        <span class="badge text-bg-success ms-2">{{ feature.badge }}</span>
                                    {% endif %}
                                </h5>
                                <p class="card-text">{{ feature.description }}</p>
                            </div>
                            <div class="card-footer">
                                <a class="btn btn-sm btn-outline-primary" href="{% url feature.url_name %}">{% translate "Open" %}</a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    {% endfor %}

    <div class="alert alert-info mt-4">
        {% blocktranslate trimmed %}Demo users (created by <code>manage.py seed</code>): <code>alice/alice</code> and
        <code>bob/bob</code> (regular users — bob may only view in Context Buttons and Action Menus, and the Guardian
        example shows them different documents).{% endblocktranslate %}
    </div>

{% endblock content %}