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

{% block title %}Modifier mon mot de passe{% endblock %}

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

{% block url %}mon_compte/infos_perso{% endblock %}
{% block m_url %}mon_compte/info_perso{% 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">Modifier mon mot de passe</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">Mot de Passe</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

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

            <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 }}">
                            </div>
                        </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" href="{{ path('app_account_data') }}">Modifier mes informations personnelles</a></li>
                            <li class="nav-item"><a class="nav-link text-3 text-light active" href="">Modifier mon mot de passe</a></li>
                        </ul>
                    </aside>
                </div>

                <div class="col-lg-9">
                            {{ form_start(form) }}
                            <div class="form-group row">
                                {{ form_row(form.old_password) }}
                                {{ form_row(form.new_password) }}
                            </div>

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

        </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 %}