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

{% block title %}Profil{% endblock %}

{% block body %}

{% include 'include/menu.html.twig' %}
<div class="container-fluid height-75-per">
            <section class="h-100 p-2" id="dashboard-profil">
                <div class="row">
                    <div class="col-12">
                        <div class="row">
                            <!-- left menu section -->
                            <div class="col-md-3 mb-2 mb-md-0 pills-stacked">
                                <ul class="nav nav-pills flex-column">
                                    <li class="nav-item">
                                        <a class="nav-link d-flex align-items-center {{ isSelected == "general" ? "active" : "" }}" id="account-pill-general" data-toggle="pill"
                                           href="#account-vertical-general" aria-expanded="true">
                                            <i class="bx bx-user mr-50"></i>
                                            <span>Profil</span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link d-flex align-items-center {{ isSelected == "changePassword" ? "active" : "" }}" id="account-pill-password" data-toggle="pill"
                                           href="#account-vertical-password" aria-expanded="false">
                                            <i class="bx bx-lock mr-50"></i>
                                            <span>Mot de passe</span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link d-flex align-items-center {{ isSelected == "account" ? "active" : "" }}" id="account-pill-password" data-toggle="pill"
                                           href="#account-vertical-account" aria-expanded="false">
                                            <i class="bx bx-cog mr-50"></i>
                                            <span>Configuration</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <!-- right content section -->
                            <div class="col-md-9">
                                <div class="card">
                                    <div class="card-content">
                                        <div class="card-body">
                                            <div class="tab-content">
                                                <div role="tabpanel" class="tab-pane {{ isSelected == "general" ? "active" : "" }}" id="account-vertical-general"
                                                     aria-labelledby="account-pill-general" aria-expanded="true">
                                                    <div class="media">
                                                        <a href="javascript: void(0);">
                                                            <img src="../../../app-assets/images/portrait/small/avatar-s-11.jpg"
                                                                 class="rounded mr-75" alt="profile image" height="64" width="64">
                                                        </a>
                                                        <div class="media-body mt-25">
                                                            <div
                                                                    class="col-12 px-0 d-flex flex-sm-row flex-column justify-content-start">
                                                                <button id="select-files"
                                                                        class="btn btn-sm btn-light-primary ml-50 mb-50 mb-sm-0">Nouvelle photo</button>
                                                                <form hidden action="#" class="dropzone dropzone-area"
                                                                      id="dpz-btn-select-files">
                                                                    <!-- <div class="dz-message">Drop Files Here To Upload</div> -->
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <hr>
                                                    {{ form_start(userForm) }}
                                                        <div class="row">
                                                            <div class="col-12">
                                                                <div class="form-group">
                                                                    <div class="controls">
                                                                        {{ form_row(userForm.username) }}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-12">
                                                                <div class="form-group">
                                                                    <div class="controls">
                                                                        {{ form_row(userForm.lastname) }}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-12">
                                                                <div class="form-group">
                                                                    <div class="controls">
                                                                        {{ form_row(userForm.email) }}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                           <!-- <div class="col-12">
                                                                <div class="alert bg-rgba-warning alert-dismissible mb-2"
                                                                     role="alert">
                                                                    <button type="button" class="close" data-dismiss="alert"
                                                                            aria-label="Close">
                                                                        <span aria-hidden="true">×</span>
                                                                    </button>
                                                                    <p class="mb-0">
                                                                        Your email is not confirmed. Please check your inbox.
                                                                    </p>
                                                                    <a href="javascript: void(0);">Resend confirmation</a>
                                                                </div>
                                                            </div> -->
                                                            <div class="col-12 d-flex flex-sm-row flex-column justify-content-end">
                                                                {{ form_row(userForm.save) }}
                                                            </div>
                                                        </div>
                                                    {{ form_end(userForm) }}

                                                </div>
                                                <div class="tab-pane {{ isSelected == "changePassword" ? "active" : "" }}" id="account-vertical-password" role="tabpanel"
                                                     aria-labelledby="account-pill-password" aria-expanded="false">
                                                    {% if passwordForm.vars.errors is not empty %}
                                                        <div class="alert alert-danger alert-dismissible mb-2" role="alert">
                                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                                <span aria-hidden="true">&times;</span>
                                                            </button>
                                                            <div class="d-flex align-items-center">
                                                                <span>
                                                                    {{ passwordForm.vars.errors }}
                                                                </span>
                                                            </div>
                                                        </div>
                                                    {% endif %}
                                                    {{ form_start(passwordForm) }}
                                                        <div class="row">
                                                            <div class="col-12">
                                                                <div class="form-group">
                                                                    <div class="controls">
                                                                        {{ form_row(passwordForm.old_password) }}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-12">
                                                                <div class="form-group">
                                                                    <div class="controls">
                                                                        {{ form_row(passwordForm.new_password) }}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-12">
                                                                <div class="form-group">
                                                                    <div class="controls">
                                                                        {{ form_row(passwordForm.retype_new_password) }}

                                                                      <!--  <label>Retype new Password</label>
                                                                        <input type="password" name="con-password"
                                                                               class="form-control" required
                                                                               data-validation-match-match="password"
                                                                               placeholder="New Password"
                                                                               data-validation-required-message="The Confirm password field is required"
                                                                               minlength="6"> -->
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-12 d-flex flex-sm-row flex-column justify-content-end">
                                                                {{ form_row(passwordForm.save) }}
                                                            </div>
                                                        </div>
                                                    {{ form_end(passwordForm) }}
                                                </div>
                                                <div class="tab-pane {{ isSelected == "account" ? "active" : "" }}" id="account-vertical-account" role="tabpanel"
                                                     aria-labelledby="account-pill-account" aria-expanded="false">
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label></label>
                                                                   <!-- <a class="btn btn-danger">Delete account</a> -->
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
</div>
{% endblock %}
{% block javascripts %}
{% endblock %}