{% extends 'role/member/member_template.html.twig' %}

{% block title %}
    Page profil individuel Univertuel 
{% endblock %}

{% block stylesheets %}
	{{ parent() }}  
	
        #form-container {
            display: flex;
            flex-direction: row;
            gap: 20px; /* espace entre les champs */
            align-items: flex-start; /* aligne les champs en haut */
            
        }

        .form-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            border: solid 1px;
            height: 350px;
			margin: 20px;
           border-radius: 20px;
        }
		
{% endblock %}

{% block breadcrumbs %}
	{{ parent() }}	
        <a href="{{ path('member_profile_edit', {'userid': app.user.id}) }}"> espace membre </a>      
        <a href="">></a>
        <a href="{{ path('member_profile_edit', {'userid': app.user.id}) }}">profil</a>	
{% endblock %}


{% block member_template_layout %}
    {{ form_start(form) }}
    
	    <div id="form-container">
	        <div class="form-item input-wrapper">
	            {{ form_row(form.username) }}
	            {{ form_row(form.email) }}
	        </div>
	
	        <div class="form-item">
	            {{ form_row(form.description) }}
	        </div>
	        <div class="form-item">
	           {{ form_row(form.avatar) }}
	           {% set avatar_name = form.avatar.vars.value %}
	            <img style="height:300px;width:300px" alt="profil" src="{{ asset('uploads/avatars/'~ profile.avatar) }}">
	        </div>
	    </div>
    {{ form_end(form) }}

{% endblock %}


{% block javascript %}
	{{ parent() }}
{% endblock %}