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

{% block headline %}Genres{% endblock %}

{% block body %}
    <div class="d-flex">
        <div class="bg-main my-5 flex-fill p-5">
            <h2>Das Genre im Rollenspiel</h2>
            <p>Das Genre beschreibt welche atmosphärische Richtung dein Rollenspiel einschlägt. Wenn es spannend wird,
                wählst du womöglich "Krimi" aus, soll der Fokus auf Romantik liegen, dann trifft "Liebesgeschichte" es
                besser. Was für einem Genre dein Rollenspiel angehört, hängt nicht unbedingt von deinem Setting ab. Zum
                Beispiel kann sich in einer Zombieapokalypse durchaus Romeo und Julia 2.0 abspielen. Das Setting kann
                allerdings ein Hinweis auf das Genre sein und kann auch dazu dienen, eine bestimmte Zielgruppe
                anzusprechen.</p>

            {% if app.user.isAdmin %}
                <h2 class="mt-5">Neues Genre</h2>
                <p>Als Administrator kannst du neue Genres hinzufügen. Dabei gibt es ein paar Regeln zu beachten:</p>
                <ul>
                    <li>Der Anfangsbuchstabe muss groß, alle anderen Buchstaben müssen klein sein.</li>
                    <li>Bevor du ein Genre anlegst, sieh nach ob es vielleicht schon existiert.</li>
                    <li>Versuche dich an gängige literarische Genres zu halten, wenn möglich.</li>
                </ul>
                <a class="btn btn-primary p-3" href="{{ path('genre_new') }}">Neues Genre anlegen</a>
            {% endif %}

            <h2 class="mt-5">Übersicht</h2>
            <p>Hier siehst du eine Übersicht aller Genres in alphabetischer Reihenfolge.</p>
            <div class="row">
            {% for genre in genres %}
                <a class="col-6 col-md-4 col-lg-3 col-xxl-2 p-0" href="{% if app.user.isAdmin %}{{ path('genre_new', {'id': genre.getId}) }}{% endif %}">
                    <div class="panel {% if app.user.isAdmin %}panel-edit{% endif %} p-4">
                        {{ genre.getName() }}
                    </div>
                </a>
            {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}