{% extends 'admin/base.html.twig' %}

{% block title %}Guides{% endblock %}

{% block body %}

    <div class="d-flex justify-content-between align-items-center mb-4 text-light">
        <div>
            <h1 class="h3 mb-0"><i class="bi bi-mortarboard-fill"></i> How-To & Leitfäden</h1>
            <small class="text-muted">
                {{ guides|length }} Guide{{ guides|length == 1 ? '' : 's' }} verfügbar
            </small>
        </div>
    </div>

    <div class="card bg-black border-secondary shadow-sm text-light">
        <div class="card-body p-0">

            {% if guides is empty %}
                <div class="p-4 text-center text-light">
                    Keine Guides vorhanden.
                </div>
            {% else %}

                <div class="list-group list-group-flush">
                    {% for guide in guides %}
                        <a href="{{ path('admin_guides_view', {slug: guide.slug}) }}"
                           class="list-group-item list-group-item-action bg-black border-secondary guide-item">

                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="fw-semibold text-light">
                                        {{ guide.title }}
                                    </div>
                                    <small class="text-light">
                                        {{ guide.slug }}
                                    </small>
                                </div>

                                <span class="text-muted small">
                                →
                            </span>
                            </div>

                        </a>
                    {% endfor %}
                </div>

            {% endif %}

        </div>
    </div>

{% endblock %}