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

{% block headline %}Geschlechter{% endblock %}

{% block body %}
    <div class="d-flex">
        <div class="bg-main my-5 flex-fill p-5">
            <h2>Geschlecht im Rollenspiel</h2>
            <p>Das Geschlecht einer Figur ist selbsterklärend. Da es allerdings nicht nur männlich oder weiblich
                sein
                kann, findest du auf dieser Seite eine Übersicht. Wenn das Geschlecht deiner Figur nicht in der
                Liste
                ist, wende dich bitte an einen Administrator.</p>

            {% if app.user.isAdmin %}
                <h2 class="mt-5">Neues Geschlecht</h2>
                <p>Als Administrator kannst du neue Geschlechter hinzufügen. Dabei gibt es ein paar Regeln zu
                    beachten:</p>
                <ul>
                    <li>Das Geschlecht soll ein Adjektiv sein und wird somit komplett klein geschrieben.</li>
                    <li>Benutze Adjektive, keine Substantive. Korrekt wäre also <b>"männlich"</b> vs inkorrekt
                        <s>"Mann"</s></li>
                    <li>Bevor du ein Geschlecht anlegst, sieh nach ob es vielleicht schon existiert.</li>
                </ul>
                <a class="btn btn-primary p-3" href="{{ path('gender_new') }}">Neues Geschlecht anlegen</a>
            {% endif %}

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