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

{% block title %}Fiche utilisateur{% endblock %}

{% block body %}
<script>
    $(document).ready(function () {
        $(".page-title h1").text("Fiche utilisateur");
        //$(".bandeau-img img").attr("src","assets/icons/icon_office.png");

    })
</script>
<!--begin::Main-->
<div class="app-main flex-column flex-row-fluid " id="kt_app_main">
	<!--begin::Content wrapper-->
	<div class="d-flex flex-column flex-column-fluid">       
		<!--begin::Toolbar-->
		<div id="kt_app_toolbar" class="app-toolbar  py-3 py-lg-6 ">
            <!--begin::Toolbar container-->
        	<div id="kt_app_toolbar_container" class="app-container  container-xxl d-flex flex-stack ">
				<!--begin::Page title-->
				<div class="page-title d-flex flex-column justify-content-center flex-wrap me-3 ">
					<!--begin::Title-->
					<h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Multipurpose</h1>
					<!--end::Title-->
					<!--begin::Breadcrumb-->
					<ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
							<a href="/" class="text-muted text-hover-primary">
                                Accueil                            
							</a>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
						<li class="breadcrumb-item">
							<span class="bullet bg-gray-500 w-5px h-2px"></span>
						</li>
                    	<!--end::Item--> 
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
                            <a href="/users" class="text-muted text-hover-primary">
                                Utilisateurs                            
							</a>                          
						</li>
                        <!--end::Item-->     
                        <!--begin::Item-->
						<li class="breadcrumb-item">
							<span class="bullet bg-gray-500 w-5px h-2px"></span>
						</li>
                    	<!--end::Item-->     
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
                            Fiche utilisateur                                 
						</li>
                        <!--end::Item-->   
                    </ul>
        			<!--end::Breadcrumb-->
    			</div>
				<!--end::Page title-->
				<!--begin::Actions-->
				<!--div class="d-flex align-items-center gap-2 gap-lg-3">
            		<a href="/uploads/projects/digistack-logo-6599e5052c381.png#" class="btn btn-sm fw-bold btn-secondary" data-bs-toggle="modal" data-bs-target="#kt_modal_create_app">Rollover</a>
					<a href="/user/add" class="btn btn-sm fw-bold btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_new_target">
						Ajouter un utilisateur
					</a>
				</div-->
			<!--end::Actions-->
			</div>
		<!--end::Toolbar container-->
		</div>
		<!--end::Toolbar-->                                        
                    
		<!--begin::Content-->
		<div id="kt_app_content" class="app-content  flex-column-fluid ">
			<!--begin::Content container-->
			<div id="kt_app_content_container" class="app-container  container-xxl ">
                <div class="digi-card card-flush">
                    <!--div class="card-body pt-0">
                        <div class="detail-form-container" style="position: relative;"-->
                            <div class="digi-block-title">
                                <div class="detail-form-section-title">{{ viewedUser.displayName }}</div>
                                <div style="color: #06668C; float: right; display: none;"><i class="fa-solid fa-envelope fs-2"></i></div>
                            </div>
                            <hr class="sep-rounded">
                            <div class="user-detail-info">
                                <div class="user-detail-photo">
                                    <img src="/uploads/users/{{ viewedUser.userPhoto }}" class="img-user" alt="">
                                </div>
                                <div class="user-detail-text">
                                    <div class="form-label">NOM AFFICHE : &nbsp;<span>{{ viewedUser.displayName }}</span></div>
                                    <div class="form-label">NOM : &nbsp;<span>{{ viewedUser.nom }}</span></div>
                                    <div class="form-label">PRENOM : &nbsp;<span>{{ viewedUser.prenom }}</span></div>
                                    <div class="form-label">MAIL : &nbsp;<span>{{ viewedUser.email }}</span></div>
                                    <div class="form-label">TELEPHONE : &nbsp;<span>{{ viewedUser.telephone }}</span></div>
                                    {% if viewedUser.job is not null %}
                                        <div class="form-label">POSTE : &nbsp;<span>{{ viewedUser.job.jobName }}</span></div>
                                    {% else %}
                                        <div class="form-label">POSTE : &nbsp;<span>-</span></div>
                                    {% endif %}
                                    <div class="form-label">MEMBRE DEPUIS : &nbsp;<span>{{ created }}</span></div>
                                    <div class="form-label">SOCIETE : &nbsp;<span>{{ viewedUser.company.companyName }}</span></div>
                                    <div class="form-label">SITE : &nbsp;<span>{{ viewedUser.company.companyCity }}</span></div>
                                </div>
                            </div>
                            <button class="btn-glossy btn-action-details"><a style="" target="_blank" href="/user/{{ viewedUser.id }}/edit/">Modifier la fiche</a></button>
                        </div>

                    <br>
                    <!--div class="card-body pt-0">
                        <div class="detail-form-container" style="position: relative;"-->
                    <div class="digi-card card-flush">
                            <div class="detail-form-section-title">STATISTIQUES</div>
                            <hr class="sep-rounded">
                            <div class="row">
                                <div class="col">
                                    <div class="form-label">NOMBRE DE CLIENTS : &nbsp;<span>{{ viewedUser.myComments|length }}</span></div>
                                    <div class="form-label">NOMBRE DE PROJETS : &nbsp;<span>{{ viewedUser.projects|length }}</span></div>
                                    <div class="form-label">NOMBRE DE TICKETS ASSIGNES : &nbsp;<span>{{ viewedUser.assignees|length }}</span></div>
                                    <div class="form-label">NOMBRE DE TACHES : &nbsp;<span>{{ viewedUser.tasks|length }}</span></div>
                                    <div class="form-label">NOMBRE DE MESSAGES POSTES : &nbsp;<span>{{ viewedUser.myComments|length }}</span></div>
                                </div>
                            </div>
                            <button class="btn-glossy btn-action-details"><a style="" target="_blank" href="/user/{{ viewedUser.id }}/edit/">Modifier la fiche</a></button>
                        <div>
                </div>
			</div>
		</div>
	</div>
</div>
<!--end::Row-->  
{% endblock %}