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

{% block body %}


<!-- BEGIN PAGE BAR -->
    <div class="page-bar">
        
        <!-- BEGIN BREADCRUMB -->
        <ul class="page-breadcrumb">
            <li>
                <a href="{{ path('homepage') }}">Accueil</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <a href="#">Mon profile</a>
                <i class="fa fa-circle"></i>
            </li>
        </ul>
        <!-- END BREADCRUMB -->
    </div>

    <h1 class="page-title">Mon profile</h1>

	<div class="row">
		<div class="col-md-6">
			<div class="portlet light bordered">
				<div class="portlet-title">
					<div class="caption">
						<i class="icon-settings font-dark"></i>
						<span class="caption-subject font-dark sbold uppercase">Mon profile</span>
					</div>
				</div>
				<div class="portlet-body form">
					<div class="form-body">
						<table width="100%">
							<tbody>
								<tr>
									<th>Nom</th>
									<td>{{ utilisateur.nom }}</td>
								</tr>
								<tr>
									<th>Prénom</th>
									<td>{{ utilisateur.prenom }}</td>
								</tr>
								<tr>
									<th>Username</th>
									<td>{{ utilisateur.username }}</td>
								</tr>
								<tr>
									<th>Email</th>
									<td>{{ utilisateur.email }}</td>
								</tr>
								<tr>
									<th>Téléphone</th>
									<td>{{ utilisateur.telephone }}</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="form-actions">
						<a href="{{ path('homepage') }}" class="btn default"><i class="fa fa-arrow-left"></i> Retour</a>
						<a href="#modal-change-pass" class="btn default blue" id="btn-change-pass" data-toggle="modal">Changer le mot de passe</a>
					</div>
				</div>
			</div>
		</div>
		
    </div>

	
	
	<div class="modal fade" id="modal-change-pass">
		
		<div class="modal-dialog">
		<form action="{{ path('utilisateur_password_change') }}" method="post" class="form-horizontal" role="form" id="form-change-pass">
			<div class="modal-content">
				<!-- Modal Header -->
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title">Changer le mot de passe</h4>
				</div>
				<!-- Modal body -->
				<div class="modal-body">
					
						<div class="row">
							<div class="col-md-12 form-body">
								<div class="form-group">
									<label class="col-md-3 control-label" for='pass1'>Nouveau mot de passe</label>
									<div class="col-md-9">
										<input type="password" id="pass1" name="pass1" class="form-control"/>
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label" for='pass2'>Retaper le mot de passe</label>
									<div class="col-md-9">
										<input type="password" id="pass2" name="pass2" class="form-control"/>
									</div>
								</div>
							</div>
						</div>
					
				</div>
				<!-- Modal footer -->
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
					<input type="submit" value="Enregister" class="btn blue update-document" id="btn-change-pass-save">
				</div>
			</div>
		</form>
		</div>
	</div>

    
{% endblock %}

{% block javascripts %}
    <script type="text/javascript">
		$(document).ready(function()
		{
			$("#btn-change-pass-save").click(function(e){
			   e.preventDefault();
			   var pass1 = $("#pass1").val();
			   var pass2 = $("#pass2").val();
			   if(pass1 != "" && pass2 != "" && pass1==pass2) $("#form-change-pass").submit();
			   else alert("Veuillez enter un mot de passe correcte !");
			 });
		});
	</script>
{% endblock %}