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

{% block headline %}Wilkommen{% endblock %}

{% block body %}

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

            <div class="section-headline">Neuste Einträge</div>

            <div class="p-5">
                <div id="newEntries" class="carousel slide" data-bs-interval="false">
                    <div class="carousel-inner">
                        {% for entry in entries %}
                            <div class="carousel-item {% if loop.index is same as(1) %}active{% endif %}">
                                <div class="entry p-5">
                                    <img class="protagonist float-start me-5"
                                         src="{{ asset('uploads/images/' ~ entry.getProtagonist.getMainImage) }}"
                                         alt="{{ entry.getProtagonist.getName }}">
                                    <div class="entry-content">
                                        <p class="fs-2 text-primary">{{ entry.getProtagonist.getName }}</p>
                                        <p class="small">{{ entry.getCreationDate.format('Y-m-d H:i:s') }}</p>
                                        <p class="d-inline-block">
                                            Author:
                                            <a class="me-3" href="{{ path('user', {'username':entry.getAuthor.getUsername}) }}">
                                                {{ entry.getAuthor.getUsername }}
                                            </a>
                                            {% include 'badges/small/all.html.twig' with {'user': entry.getAuthor} %}
                                        </p>
                                        <hr>
                                        <p class="entry-preview">{{ entry.getContent }}</p>
                                        <a class="float-end mt-3"
                                           href="{{ path('roleplay_display', {'id':entry.getRoleplay.getId}) }}"><i
                                                    class="fas fa-arrow-right"></i> Zum Rollenspiel</a>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#newEntries"
                            data-bs-slide="prev">
                        <i class="fa-xl fa-solid fa-chevron-left"></i>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#newEntries"
                            data-bs-slide="next">
                        <i class="fa-xl fa-solid fa-chevron-right"></i>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
            </div>

        </div>
    </div>

{% endblock %}