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

{% block headline %}Rassen{% endblock %}

{% block body %}
    <div class="d-flex">
        <div class="bg-main my-5 flex-fill p-5">
            <h2>Was sind Rassen im Rollenspiel?</h2>
            <p>Eine Rasse beschreibt zu welcher Art deine Rollenspiel-Figur gehört. Das kann ein Mensch, ein Tier oder
                auch ein Fantasywesen sein. Wenn du eine Rasse für deine Figur brauchst, die es noch nicht gib, setze
                dich mit einem Administrator in Verbindung.</p>

            {% if app.user.isAdmin %}
                <h2 class="mt-5">Neue Rasse</h2>
                <p>Als Administrator kannst du neue Rassen 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>Benutze die Einzahl. Korrekt wäre also <b>"Mensch"</b> vs inkorrekt <s>"Menschen"</s></li>
                    <li>Bevor du eine Rasse anlegst, sieh nach ob sie vielleicht schon existiert.</li>
                    <li>Versuche spezifisch zu sein, aber übertreib nicht. <s>"Mustang"</s> wäre zu spezifisch,
                        <s>"Säugetier"</s>
                        dagegen zu unspezifisch. Die Mitte wäre in diesem Fall <b>"Pferd"</b>.
                    </li>
                </ul>
                <a class="btn btn-primary p-3" href="{{ path('race_new') }}">Neue Rasse anlegen</a>
            {% endif %}

            <h2 class="mt-5">Übersicht</h2>
            <p>Hier siehst du eine Übersicht aller Rassen in alphabetischer Reihenfolge.</p>

            <div class="row mb-5">
                {% for race in races %}
                    <a class="col-6 col-md-4 col-lg-3 col-xxl-2 p-0"
                       href="{% if app.user.isAdmin %}{{ path('race_new', {'id': race.getId}) }}{% endif %}">
                        <div class="panel {% if app.user.isAdmin %}panel-edit{% endif %} p-4">
                            {{ race.getName() }}
                        </div>
                    </a>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}