{% extends 'base.html.twig' %}
{% set menu = 'resources' %}

{% block body %}

<h1 class="display-4 d-flex fw-lighter justify-content-between">{{ "title.users_and_resources"|trans }}<a href="{{ path('user_create') }}" class="btn btn-sm btn-success mb-auto mt-auto">+ {{ "users.new"|trans }}</a></h1>

<div class="list-group mt-4">
{% for principal in principals %}
    <div class="list-group-item p-3">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="me-auto">{{ principal.displayName }} <a href="mailto:{{ principal.email }}">&lsaquo;{{ principal.email }}&rsaquo;</a></h5>

            <div class="me-0 text-right d-lg-block d-none">
                <a href="{{ path('user_delegates',{username: principal.username}) }}" class="btn btn-sm btn-outline-secondary mb-1">💁&nbsp;{{ "users.delegates"|trans }}</a>
                <a href="{{ path('calendar_index',{username: principal.username}) }}" class="btn btn-sm btn-outline-secondary mb-1">🗓&nbsp;{{ "users.calendars"|trans }}</a>
                <a href="{{ path('addressbook_index',{username: principal.username})}}" class="btn btn-sm btn-outline-secondary ms-1 mb-1">📖&nbsp;{{ "users.addressbooks"|trans }}</a>
                <a href="{{ path('user_edit',{username: principal.username})}}" class="btn btn-sm btn-outline-primary ms-1 mb-1">✎&nbsp;{{ "edit"|trans }}</a>
                <a href="#" 
                    data-bs-toggle="modal" data-bs-target="#deleteModal-users"
                    data-href="{{ path('user_delete',{username: principal.username})}}" 
                    class="btn btn-sm btn-outline-danger ms-1 mb-1" 
                    data-flavour="users"
                >⚠&nbsp;{{ "delete"|trans }}</a>
            </div>
        </div>
        <p class="mb-1">{{ "users.username"|trans }} : <code>{{ principal.username }}</code></p>
        <small>{{ "users.uri"|trans }} : <code>{{ principal.uri }}</code>{% if principal.isAdmin %} — <span class="badge bg-primary">{{ "users.administrator"|trans }}</span>{% endif %}</small>
        <div class="btn-group btn-group-sm mt-3 d-flex d-lg-none" role="group">
            <a href="{{ path('user_delegates',{username: principal.username}) }}" class="btn btn-outline-secondary flex-fill w-100"><span class="d-none d-sm-inline">💁&nbsp;</span>{{ "users.delegates"|trans }}</a>
            <a href="{{ path('calendar_index',{username: principal.username}) }}" class="btn btn-outline-secondary flex-fill w-100"><span class="d-none d-sm-inline">🗓&nbsp;</span>{{ "users.calendars"|trans }}</a>
            <a href="{{ path('addressbook_index',{username: principal.username})}}" class="btn btn-outline-secondary flex-fill w-100"><span class="d-none d-sm-inline">📖&nbsp;</span>{{ "users.addressbooks"|trans }}</a>
            <a href="{{ path('user_edit',{username: principal.username})}}" class="btn btn-outline-primary flex-fill flex-shrink-1"><span class="d-none d-sm-inline">✎&nbsp;</span>{{ "edit"|trans }}</a>
            <a href="#" 
                data-bs-toggle="modal" data-bs-target="#deleteModal-users"
                data-href="{{ path('user_delete',{username: principal.username})}}" 
                class="btn btn-outline-danger flex-fill flex-shrink-1" 
                data-flavour="users"
            ><span class="d-none d-sm-inline">⚠&nbsp;</span>{{ "delete"|trans }}</a>
        </div>
    </div>
{% else %}
    <div id="no-user" class="my-5 py-5 d-flex justify-content-center align-items-center text-muted">{{ "no.users.yet"|trans }}</div>
{% endfor %}
</div>

{% include '_partials/delete_modal.html.twig' with {flavour: 'users'} %}

{% endblock %}