{% extends "base-gray.html.twig"%}

{%block title%} Modification of the password - {{ parent() }} {%endblock%}

{%block body%}
<div class="container pt-0 pb-0">
    {% if app.request.hasPreviousSession %}
        {% for type, messages in app.session.flashbag.all %}
            {% for message in messages %}
            <div class="al1">
                <div class="alert alert-{{ type }} alert-dismissable mb-0">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                    {{ message|raw }}
                </div>
            </div>
            {% endfor %}
        {% endfor %}
    {% endif %}
</div>
<div class="container" style="margin-top: 2.9rem; margin-bottom: 2rem">
    <div class="row">
        <div class="col-md-3">
            <ul class="nav-dashboard">
            	<li class="active">
                    <a href="{{path('imax_security_parameters',{'username':app.user.username})}}">Parameters</a>
                </li>
                <li>
                    <a href="{{path('imax_security_parameters_password',{'username':app.user.username})}}">Password</a>
                </li>
                <li>
                    <a href="{{path('imax_security_parameters_delete',{'username':app.user.username})}}">Delete my account</a>
                </li>
            </ul>
        </div>
        <div class="col-md-9">
            <div class="card mb-3">
                <div class="card-header bg-white h6">
                    <div style="max-width: 100px; max-height: 100px; float: left;">
                        {%if user.src is not null%}
                        <img src="{{asset(user.getWebPath())}}" alt="{{user.surname}}" width="100%" style="border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%">
                        {%else%}
                        <img src="{{asset('images/avatar.png')}}" alt="" width="100%" style="border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%">
                        {%endif%}
                    </div>
                    <div class="avatar-right">
                    {%if app.user.username%}
                        @{{app.user.username}}
                    {%else%}
                        Empty
                    {%endif%}
                    </div>
                </div>
                <div class="card-body">
                    <div class="form-group row">
                        <label class="col-md-3"><strong>Address e-mail :</strong></label>
                        <div class="col-md-4">
                            <p class="parameters">
                                {%if app.user.email%}{{app.user.email}}{%else%}Empty{%endif%}
                            </p>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3"><strong>Pseudo :</strong></label>
                        <div class="col-md-4">
                            <p class="parameters">{%if app.user.username%}{{app.user.username}}{%else%}Empty{%endif%}</p>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3"><strong>Password :</strong></label>
                        <div class="col-md-4">
                            <p class="parameters">{%for i in range(1,8)%}<i class="fa fa-circle" style="font-size: 12px"></i>{%endfor%}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{%endblock%}