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

{% block title %}Administration{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('styles/globals/bulles.css') }}">
    <link rel="stylesheet" href="{{ asset('styles/administration/users/index.css') }}">
{% endblock %}

{% block titlePage %}
    <div class="bulle-container">
        <div class="bulle bulle-all-col bulle-nohover bulle-header">
            <h1 class="bulle-title">Administration : Users</h1>
        </div>
    </div>
{% endblock %}

{% block main %}
    <div class="bulle-container">

        {# ADD BUTTON #}
        <a href="{{ path("app_admin_users_add") }}" class="bulle bulle-all-col user-card">
            <span class="pp-svg-wrapper">
                 <svg width="15" height="15" viewBox="0 0 24 24"
                      fill="none" stroke="currentColor" stroke-width="2"
                      stroke-linecap="round" stroke-linejoin="round" class="pp-svg">
                     <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                     <circle cx="12" cy="7" r="4"/>
                 </svg>
            </span>
            <div class="user-pseudo">
                Ajouter un utilisateur
            </div>
        </a>
        {% for user in users %}
            <a {% if app.user and app.user.isAncestorOf(user) %} href="{{ path("app_admin_users_edit", {'iduser':user.id}) }}" {% endif %}
                class="bulle bulle-all-col user-card">
                {% if user.uripp %}
                    <img src="{{ user.globalURLPP }}" alt="photo" class="pp-img">
                {% else %}
                    <span class="pp-svg-wrapper">
                         <svg width="15" height="15" viewBox="0 0 24 24"
                              fill="none" stroke="currentColor" stroke-width="2"
                              stroke-linecap="round" stroke-linejoin="round" class="pp-svg">
                             <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                             <circle cx="12" cy="7" r="4"/>
                         </svg>
                    </span>
                {% endif %}
                <div class="user-pseudo">
                    {{ user.pseudo }}
                </div>
                <div class="user-space"></div>
                <div class="user-role">
                    {% if user.admin %}
                        admin
                    {% else %}
                        user
                    {% endif %}
                </div>
                <div
                    class="user-editable {% if not (app.user and app.user.isAncestorOf(user)) %}non-modifiable{% endif %}">
                    {% if app.user and app.user.isAncestorOf(user) %}
                        modifiable
                    {% else %}
                        non modifiable
                    {% endif %}
                </div>
            </a>
        {% endfor %}
    </div>
{% endblock %}