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

{% block headline %}Figuren{% endblock %}

{% block body %}
    <div class="d-flex">
        <div class="bg-main my-5 flex-fill p-5">
            <h2>Was ist eine Rollenspielfigur?</h2>
            <p>Um an Rollenspielen teilzunehmen, brauchst du eine Rollenspielfigur. Das ist ein ausgedachter Charakter,
                mit dem du später Einträge verfasst. Im Prinzip sind deiner Vorstellungskraft dabei keine Grenzen
                gesetzt. Ob du einen eigenbrötlerischen Detektiv oder eine vorwitzige Fee spielst, ist dir überlassen -
                nur zum Setting des Rollenspiels sollte deine Figur passen.</p>

            <h2 class="mt-5">Neue Figur</h2>
            <p>Du kannst so viele Figuren erstellen wie du willst. Klicke dazu einfach auf den Button.</p>
            <a class="btn btn-primary p-3" href="{{ path('protagonist_new') }}">Neue Figur erstellen</a>

            <h2 class="mt-5">Meine Figuren</h2>
            <p>Hier siehst du eine Übersicht deiner Figuren.</p>
            <div class="d-block">
                <table class="table table-light table-borderless align-middle">
                    <tr>
                        <th>Name</th>
                        <th>Alter</th>
                        <th>Geschlecht</th>
                        <th>Rasse</th>
                        <th>Bearbeiten</th>
                    </tr>
                    {% for protagonist in myProtagonists %}
                        <tr>
                            <td>{{ protagonist.getName() }}</td>
                            <td>{{ protagonist.getAge() }}</td>
                            <td>{{ protagonist.getGender().getName() }}</td>
                            <td>{{ protagonist.getRace().getName() }}</td>
                            <td>
                                <a href="{{ path('protagonist_new', {'id': protagonist.getId()}) }}">
                                    <i class="fas fa-edit"></i>
                                </a>
                            </td>
                        </tr>
                    {% endfor %}
                </table>
            </div>

            <h2 class="mt-5">Alle Figuren</h2>
            <p>Hier siehst du eine Übersicht aller Figuren.</p>
            <div class="d-block">
                <table class="table table-light table-borderless align-middle">
                    <tr>
                        <th>Name</th>
                        <th>Alter</th>
                        <th>Geschlecht</th>
                        <th>Rasse</th>
                        {% if app.user.isAdmin %}
                            <th>Bearbeiten</th>
                        {% endif %}
                    </tr>
                    {% for protagonist in allProtagonists %}
                        <tr>
                            <td>{{ protagonist.getName() }}</td>
                            <td>{{ protagonist.getAge() }}</td>
                            <td>{{ protagonist.getGender().getName() }}</td>
                            <td>{{ protagonist.getRace().getName() }}</td>
                            {% if app.user.isAdmin %}
                                <td>
                                    <a href="{{ path('protagonist_new', {'id': protagonist.getId()}) }}">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                </td>
                            {% endif %}
                        </tr>
                    {% endfor %}
                </table>
            </div>
        </div>
    </div>
{% endblock %}