{% 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 }}
                        </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
                        {% else %}
                        Reader
                        {% endif %}
                        <span class="icon is-small is-size-5 pl-3 has-text-link">
                            <i class="fa fa-question-circle"></i>
                        </span>
                    </p>
                </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 %}