{% extends "admin/base.html.twig" %}

{% trans_default_domain 'security_cms' %}

{% import 'core/src-macro.html.twig' as resources %}

{% block stylesheets %}
    {{ parent() }}
    {{ resources.encore_absolute_link_tags('admin-user-profile', 'admin') }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ resources.encore_entry_js_files('admin-user-profile', 'admin', 'User profile') }}
{% endblock %}

{% block body %}

    <div id="user-profile-card" class="card">

        <div class="card-body">
            <div class="row">

                <div class="col-md-2">
                    <div class="img-user-container d-inline-block">
                        <img src="{{ asset(user.picture.dirname) }}" id="user-picture" class="img-fluid" height="200" width="auto" />
                    </div>
                </div>

                <div class="col-md-10">

                    <h1 class="mb-4">
                        {{ user.username }} <small class="text-italic">{{ user.login }}</small>
                        <a href="{{ path('admin_user_edit', {'website': websiteId(), 'user': user.id}) }}"
                           data-toggle="tooltip" title="{{ "Éditer"|trans|striptags }}"
                           id="edit-user-btn" class="float-right text-dark"><i class="fal fa-pen-alt"></i>
                        </a>
                    </h1>

                    <div class="row">

                        <div class="{% if is_granted('ROLE_INTERNAL') %}col-md-5{% else %}col-12{% endif %}">

                            <h2 class="pb-2 mb-3 border-bottom"><i class="fal fa-info mr-2"></i>{{ "Information"|trans }}</h2>

                            <p><strong class="mr-2">{{ "Dernière connexion :"|trans }}</strong> {{ user.lastLogin|localizeddate('none', 'none', app.request.locale, null, "cccc dd MMMM Y HH:mm") }}</p>
                            <p><strong class="mr-2">{{ "Langue :"|trans }}</strong> <i class="flag-icon flag-icon-{{ user.locale }} mr-2"></i>{{ user.locale|languageName }}</p>
                            <p><strong class="mr-2">{{ "Email :"|trans }}</strong> <a href="mailto:{{ user.email }}">{{ user.email }}</a></p>

                            {% if is_granted('ROLE_INTERNAL') %}
                                <p><strong class="mr-2">{{ "Groupe :"|trans }}</strong> {{ user.group.adminName }}</p>
                            {% endif %}
                        </div>

                        {% if is_granted('ROLE_INTERNAL') %}
                            <div class="col-md-7">
                                <h2 class="pb-2 mb-3 border-bottom"><i class="fal fa-user-tag mr-2"></i>{{ "Rôles"|trans }}</h2>
                                <div class="row">
                                    {% for role in user.group.roles %}
                                        <div class="col-md-6">{{ role.adminName }}</div>
                                    {% endfor %}
                                </div>
                            </div>
                        {% endif %}
                    </div>

                </div>
            </div>
        </div>
    </div>

{#    <div class="container">#}
{#        <div class="row user-menu-container square">#}
{#            <div class="col-md-12 user-details">#}
{#                <div class="row spacepurplebg white">#}
{#                    <div class="col-md-2 no-pad">#}
{#                        <div class="user-image">#}
{#                            <img src="{{ app.user.avatar(200) }}" class="img-responsive thumbnail" />#}
{#                        </div>#}
{#                    </div>#}
{#                    <div class="col-md-10 no-pad">#}
{#                        <div class="user-pad">#}
{#                            <h3>Welcome back, {{ user.firstName }}</h3>#}
{#                            <a class="btn btn-labeled btn-info" href="#">#}
{#                                <span class="btn-label"><i class="fas fa-pencil-alt"></i></span>Update#}
{#                            </a>#}
{#                        </div>#}
{#                    </div>#}
{#                </div>#}
{#                <div class="row overview">#}
{#                    <div class="col-md-4 user-pad text-center">#}
{#                        <h3>COMMENTS</h3>#}
{#                        <h4>184</h4>#}
{#                    </div>#}
{#                    <div class="col-md-4 user-pad text-center">#}
{#                        <h3>ARTICLES READ</h3>#}
{#                        <h4>1,910</h4>#}
{#                    </div>#}
{#                    <div class="col-md-4 user-pad text-center">#}
{#                        <h3>LIKES</h3>#}
{#                        <h4>3,892</h4>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
{#    </div>#}
{% endblock %}