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

{% block headline %}Rollenspiele{% endblock %}

{% block body %}
    <div class="d-flex">
        <div class="bg-main my-5 flex-fill p-5">
            <h2>Was ist ein Rollenspiel?</h2>
            <p>Ein Rollenspiel ist eine fiktive Geschichte, die du zusammen mit anderen Spielern entwickelst.
                Dabei wird
                zu Anfang ein Setting vorgegeben, in dem die Figuren leben. Das kann zum Beispiel eine einsame
                Insel
                sein, auf der ihr gestrandet seid. Aufbauend auf dem Setting liegt es dann an euch, Leben in das
                Rollenspiel zu bringen: Meist wird es von ganz alleine spannend, sobald die Figuren anfangen
                miteinander
                zu interagieren.</p>
            <p>Die Interaktion findet dabei in Textform statt. Wie in einem Roman beschreibt der Autor, was die
                Figur
                tut und erlebt. Doch anstatt dass ein Autor die Gewalt über alle Figuren hat, spielt im
                Rollenspiel
                jeder nur seine eigenen Figuren. Dadurch kann man nicht voraussehen, was passieren wird und die
                Geschichte entwickelt sich wie von selbst.</p>

            <h2 class="mt-5">Neues Rollenspiel</h2>
            <p>Um ein neues Rollenspiel zu erstellen, klicke auf den Button.</p>
            <a class="btn btn-primary p-3" href="{{ path('roleplay_new') }}">Neues Rollenspiel erstellen</a>

            <h2 class="mt-5">Meine Rollenspiele</h2>
            <p>Hier siehst du eine Übersicht deiner Rollenspiele.</p>
            <div class="d-block">
                <table class="table table-light table-borderless align-middle">
                    <tr>
                        <th>Name</th>
                        <th>Genre</th>
                        <th>Ort</th>
                        <th>Zeit</th>
                        <th>Bearbeiten</th>
                        <th>Öffnen</th>
                    </tr>
                    {% for roleplay in myRoleplays %}
                        <tr>
                            <td>{{ roleplay.getName() }}</td>
                            <td>{{ roleplay.getGenre().getName() }}</td>
                            <td>{{ roleplay.getLocation() }}</td>
                            <td>{{ roleplay.getTime() }}</td>
                            <td>
                                <a href="{{ path('roleplay_new', {'id': roleplay.getId()}) }}">
                                    <i class="fas fa-edit"></i>
                                </a>
                            </td>
                            <td>
                                <a href="{{ path('roleplay_display', {'id': roleplay.getId()}) }}">
                                    <i class="fas fa-door-open"></i>
                                </a>
                            </td>
                        </tr>
                    {% endfor %}
                </table>
            </div>

            <h2 class="mt-5">Alle Rollenspiele</h2>
            <p>Hier siehst du eine Übersicht aller Rollenspiele.</p>
            <div class="table-responsive d-block">
                <table class="table table-light table-borderless align-middle">
                    <tr>
                        <th>Name</th>
                        <th>Genre</th>
                        <th>Ort</th>
                        <th>Zeit</th>
                        {% if app.user.isAdmin %}
                            <th>Bearbeiten</th>
                        {% endif %}
                        <th>Öffnen</th>
                    </tr>
                    {% for roleplay in allRoleplays %}
                        <tr>
                            <td>{{ roleplay.getName() }}</td>
                            <td>{{ roleplay.getGenre().getName() }}</td>
                            <td>{{ roleplay.getLocation() }}</td>
                            <td>{{ roleplay.getTime() }}</td>
                            {% if app.user.isAdmin %}
                                <td>
                                    <a href="{{ path('roleplay_new', {'id': roleplay.getId()}) }}">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                </td>
                            {% endif %}
                            <td>
                                <a href="{{ path('roleplay_display', {'id': roleplay.getId()}) }}">
                                    <i class="fas fa-door-open"></i>
                                </a>
                            </td>
                        </tr>
                    {% endfor %}
                </table>
            </div>
        </div>
    </div>
{% endblock %}