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

{% block title %}Profile | ArCOA{% endblock %}

{% block rightpanel %}
<div class="container" style="max-width: 50vw">
    <h1 class="is-size-1 mt-0 has-text-centered">User profile</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">
                            <i class="fa fa-user-circle fa-2x"></i>
                        </span>
                    </div>
                    <div class="media-content">
                        <p class="title is-4">{{ app.user.firstname }} {{ app.user.lastname }}</p>
                        <p class="subtitle is-6">
                            <span class="icon is-small">
                                <i class="fa fa-envelope"></i>
                            </span>
                            {{ app.user.email ?? 'no email' }}
                        </p>
                    </div>
                </div>
                <div class="content">
                    <p class="is-size-4 pl-3">
                        <strong>ArCOA Role:</strong>
                        {% if 'ROLE_ADMIN' in app.user.roles %}
                        Administrator
                        {% elseif 'ROLE_REVISOR' in app.user.roles %}
                        Revisor
                        {% elseif 'ROLE_EDITOR' in app.user.roles %}
                        Editor
                        {% else %}
                        Reader
                        {% endif %}
                    </p>
                    <article class="message is-info">
                        <div class="message-header">
                            <p>
                                <span class="icon is-small is-size-5 mr-3">
                                    <i class="fa fa-info-circle"></i>
                                </span>
                                Role permissions
                            </p>
                        </div>
                        <div class="message-body">
                            {% if 'ROLE_ADMIN' in app.user.roles %}
                            <p>
                                Administrators can create and edit users of the ArCOA data entry system,
                                including changing passwords and user roles, and disabling accounts.
                            </p>
                            <p>
                                They can perform all actions on all records and vocabularies
                                (create, view, edit, delete).
                            </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="{{ path('app_change_passwd') }}">
                <div class="field">
                    <h3 class="is-size-4 has-text-centered">Change password</h3> 
                </div>
                <div class="field">
                    <label class="label">Current password</label>
                    <p class="control">
                        <input class="input" name="_current_pass" required type="password" placeholder="Current password">
                    </p>
                </div>
                <div class="field">
                    <label class="label">New 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">Confirm 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">
                            Submit
                        </button>
                    </p>
                </div>
            </form>
        </div>
    </div>
</div>

{% endblock %}