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

{% block headline %}{{ user.getUsername }}{% endblock %}

{% block body %}
    <div class="d-flex flex-column flex-md-row">
        <div class="bg-main mt-5 p-5 flex-fill text-center">
            <img class="protagonist" alt="Vorschau"
                 src="{% if user.getImage %}{{ asset('uploads/images/' ~ user.getImage) }}{% else %}{{ asset('images/other/user-default.png') }}{% endif %}"
            >
            {% if user is same as(app.user) %}
                <a href="{{ path('user_image') }}" class="btn btn-primary p-3 image-edit">
                    <i class="fa-solid fa-edit fa-2x"></i>
                </a>
            {% endif %}
        </div>

        {% if entries_count_service.countEntries(user) > 100 or user.isAdmin %}
            <div class="bg-main mt-5 p-5 text-center flex-fill">
                {% include 'badges/all.html.twig' %}
            </div>
        {% endif %}
    </div>

    <div class="d-flex mt-5 mb-5 mb-md-0 flex-column flex-md-row">
        <div class="bg-main p-5 flex-fill">
            <p>Mitglied seit:<br>
                <strong>{{ user.getCreationDate.format('d. n. Y') }}</strong>
            </p>
            <p class="mt-5">Anzahl Einträge:<br>
                <strong>{{ entries_count_service.countEntries(user) }}</strong>
            </p>
        </div>

        {% if user.getAdministratedRoleplays.count > 0 %}
            <div class="bg-main p-5 flex-fill">
                <p class="fs-5 text-primary">Ist Administrator von</p>
                <ul>
                    {% for roleplay in user.getAdministratedRoleplays %}
                        <li class="mt-1">
                            <a href="{{ path('roleplay_display', {'id': roleplay.getId}) }}">
                                {{ roleplay.getName }}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        {% endif %}

        {% if user.getRoleplays.count > 0 %}
            <div class="bg-main p-5 flex-fill">
                <p class="fs-5 text-primary">Nimmt teil in</p>
                <ul>
                    {% for roleplay in user.getRoleplays %}
                        <li class="mt-1">
                            <a href="{{ path('roleplay_display', {'id': roleplay.getId}) }}">
                                {{ roleplay.getName }}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        {% endif %}

        {% if user.getRoleplays.count is same as(0) and user.getAdministratedRoleplays.count is same as(0) %}
            <div class="bg-main p-5 flex-fill">
                Dieses Mitglied hat noch keine Rollenspiele.
            </div>
        {% endif %}
    </div>
    </div>

{% endblock %}