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

{% block headline %}{{ roleplay.getName() }}{% endblock %}

{% block body %}

    <div class="d-flex">
        <div class="bg-main my-5 flex-fill">

            <nav class="nav nav-pills nav-fill" id="roleplay-tabs">
                <a class="nav-link active" id="entries-tab" data-bs-toggle="tab"
                   data-bs-target="#entries" type="button" role="tab" aria-controls="entries"
                   aria-selected="true">Einträge</a>

                <a class="nav-link" id="details-tab" data-bs-toggle="tab"
                   data-bs-target="#details" type="button" role="tab" aria-controls="details" aria-selected="false">Details</a>

                <a class="nav-link" id="protagonists-tab" data-bs-toggle="tab"
                   data-bs-target="#protagonists" type="button" role="tab" aria-controls="protagonists"
                   aria-selected="false">Figuren</a>
            </nav>

            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active p-5" id="entries" role="tabpanel" aria-labelledby="entries-tab">
                    {% include 'roleplay/tabs/entries.html.twig' %}
                </div>
                <div class="tab-pane fade p-5" id="details" role="tabpanel" aria-labelledby="details-tab">
                    {% include 'roleplay/tabs/details.html.twig' %}
                </div>
                <div class="tab-pane fade" id="protagonists" role="tabpanel" aria-labelledby="protagonists-tab">
                    {% include 'roleplay/tabs/protagonists.html.twig' %}
                </div>
            </div>

        </div>
    </div>


    {% for protagonist in roleplay.getProtagonists %}
        {% if protagonist.getImages.count > 1 %}
            <div class="modal fade gallery" id="protagonist-gallery-{{ protagonist.getId }}" tabindex="-1"
                 aria-hidden="true">
                <div class="modal-dialog modal-fullscreen">
                    <div class="modal-content">
                    <span class="ms-auto p-auto close-button" type="button" data-bs-dismiss="modal"
                          aria-label="Close"><i class="fa-solid fa-xmark fa-3x"></i></span>

                        <div class="modal-body">
                            <div id="protagonist-gallery-{{ protagonist.getId }}-controls" class="carousel slide h-100"
                                 data-bs-ride="carousel" data-bs-interval="false">
                                <div class="carousel-inner h-100">
                                    {% for image in protagonist.getImages %}
                                        <div class="carousel-item h-100 {% if loop.index is same as(1) %}active{% endif %} text-center">
                                            <img class="py-5 gallery-image position-relative top-50 translate-middle-y"
                                                 src="{{ asset('uploads/images/' ~ image.getImage) }}"
                                                 alt="{{ protagonist.getName }}">
                                        </div>
                                    {% endfor %}
                                </div>
                                <button class="carousel-control-prev" type="button"
                                        data-bs-target="#protagonist-gallery-{{ protagonist.getId }}-controls"
                                        data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Previous</span>
                                </button>
                                <button class="carousel-control-next" type="button"
                                        data-bs-target="#protagonist-gallery-{{ protagonist.getId }}-controls"
                                        data-bs-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Next</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
    {% endfor %}

{% endblock %}