{% extends 'base.html.twig' %}
{% block title %}Profilo | WebArchi{% endblock %}

{% block body %}
{% include 'partials/navbar.html.twig' %}
<div class="container" style="max-width: 50vw">
    <h1 class="is-size-1 mt-2 has-text-centered">Profilo utente</h1>

    <div class="container mt-6">
        <div class="card">
            <div class="card-content">
                <div class="media">
                    <div class="media-left">
                        <span class="icon is-large is-size-4">
                            <i class="bi bi-person-circle"></i>
                        </span>
                    </div>
                    <div class="media-content">
                        <p class="title is-4">{{ app.user.useridentifier }}</p>
                        <p class="subtitle is-6">
                            <span class="icon is-small">
                                <i class="bi bi-envelope"></i>
                            </span>
                            {{ app.user.email ?? 'no email' }}
                        </p>
                    </div>
                </div>
                <div class="content">
                    <p class="is-size-4 pl-3">
                        <strong>Ruolo utente:</strong>
                        {% if 'ROLE_ADMIN' in app.user.roles %}
                        Amministratore
                        {% elseif 'ROLE_REVISOR' in app.user.roles %}
                        Revisore
                        {% else %}
                        Utente
                        {% endif %}
                    </p>
                    <article class="message is-info">
                        <div class="message-header">
                            <p>
                                <span class="icon is-small is-size-5 mr-3">
                                    <i class="bi bi-info-circle"></i>
                                </span>
                                Permessi
                            </p>
                        </div>
                        <div class="message-body">
                            {% if 'ROLE_ADMIN' in app.user.roles %}
                            <p>
                                Gli amministratori possono creare e modificare utenti in WebArchi,
                                cambiare password e ruoli utente, e disabilitare account.
                            </p>
                            {% elseif 'ROLE_REVISOR' in app.user.roles %}
                            <p>Revisors can perform all actions (create, view, edit, delete) on all records and vocabs.</p>
                            {% elseif 'ROLE_EDITOR' in app.user.roles %}
                            <p>
                                Editors can view vocabs, view and search all records, create new records with "draft" or "complete" status, 
                                edit their own records and those created by other editors; they can only delete their own records, as long as the status
                                is "draft" or "complete".
                            </p>
                            {% else %}
                            <p>
                                Readers can view and search records that are either published, excluded or unindexed (draft and complete records cannot be viewed).
                            </p>
                            {% endif %}
                        </div>
                      </article>
                </div>
            </div>
        </div>

        <div class="card content">
            {% for message in app.flashes('error') %}
                <article class="message is-danger">
                    <div class="message-body">{{ message }}</div>
                </article>
            {% endfor %}
            {% for message in app.flashes('notice') %}
                <article class="message is-success">
                    <div class="message-body">{{ message }}</div>
                </article>
            {% endfor %}
            <form class="card-content" id="change-password" method="post" action="">
                <div class="field">
                    <h3 class="is-size-4 has-text-centered">Modifica password</h3> 
                </div>
                <div class="field">
                    <label class="label">Password attuale</label>
                    <p class="control">
                        <input class="input" name="_current_pass" required type="password" placeholder="Current password">
                    </p>
                </div>
                <div class="field">
                    <label class="label">Nuova password</label>
                    <p class="control">
                        <input class="input" name="_new_pass" required type="password" placeholder="New password">
                    </p>
                </div>
                <div class="field">
                    <label class="label">Conferma password</label>
                    <p class="control">
                        <input class="input" name="_confirm_pass" required type="password" placeholder="Confirm password">
                    </p>
                </div>
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
                <div class="field mt-5">
                    <p class="control" id="submit">
                        <button class="button is-link is-fullwidth" type="submit">
                            Invio
                        </button>
                    </p>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}