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

{% block title %}Modification des informations personnelles{% endblock %}

{% block stylesheet %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('assets/vendor/circle-flip-slideshow/css/component.css') }}">
{% endblock %}

{% block url %}mon_compte/modifier_mon_mot_de_passe{% endblock %}
{% block m_url %}mon_compte/modifier_mon_mot_de_passe{% endblock %}

{% block main %}
    <div role="main" class="main">

        <section class="page-header page-header-modern bg-color-light-scale-1 page-header-lg">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 align-self-center p-static order-2 text-center">
                        <h1 class="font-weight-bold text-dark">Informations Personnelles</h1>
                    </div>
                    <div class="col-md-12 align-self-center order-1">
                        <ul class="breadcrumb d-block text-center">
                            <li><a href="{{ path('app_home') }}">Accueil</a></li>
                            <li class="active">Informations Personnelles</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <div class="container pt-3 pb-2">
            {% include 'widget/alert.html.twig' %}

            {{ form_start(form) }}
            <div class="row pt-2">
                <div class="col-lg-3 mt-4 mt-lg-0">


                    <div class="d-flex justify-content-center mb-4">
                        <div class="profile-image-outer-container">
                            <div class="profile-image-inner-container bg-color-primary">
                                <img src="../assets/uploads/user/{{ app.user.profilePicture }}">
                                <span class="profile-image-button bg-color-dark">
                                    <i class="fas fa-camera text-light"></i>
                                </span>
                            </div>
                            {{ form_row(form.profilePicture) }}
                        </div>
                    </div>

                    <aside class="sidebar mt-2" id="sidebar">
                        <ul class="nav nav-list flex-column mb-5" id="v-pills-tab" role="tablist">
                            <li class="nav-item"><a class="nav-link text-3" href="{{ path('app_account') }}">Mon Profil</a></li>
                            <li class="nav-item"><a class="nav-link text-3 text-light active" href="#">Modifier mes informations personnelles</a></li>
                            <li class="nav-item"><a class="nav-link text-3" href="{{ path('app_account_password') }}">Modifier mon mot de passe</a></li>
                        </ul>
                    </aside>

                </div>

                <div class="col-lg-9">
                    <div class="form-group row">
                        <p class="small">Pour modifier votre photo de profil, merci de choisir une nouvelle image et de valider le formulaire.</p>
                    </div>

                            <div class="form-group row">
                                {{ form_row(form.username) }}
                                {{ form_row(form.firstname) }}
                                {{ form_row(form.lastname) }}
                                {{ form_row(form.email) }}
                            </div>

                            <div class="form-group row">
                                <div class="form-group">
                                    {{ form_row(form.submit) }}
                                </div>
                            </div>

                </div>
            </div>
            {{ form_end(form) }}

        </div>

    </div>
{% endblock %}

{% block scripts %}
    <!-- Vendor -->
    <script src="{{ asset('assets/vendor/plugins/js/plugins.min.js') }}"></script>

    <!-- Theme Base, Components and Settings -->
    <script src="{{ asset('assets/js/theme.js') }}"></script>

    <!-- Theme Custom -->
    <script src="{{ asset('assets/js/custom.js') }}"></script>

    <!-- Theme Initialization Files -->
    <script src="{{ asset('assets/js/theme.init.js') }}"></script>
{% endblock %}