{extends file="views/layout.tpl"}

{block name="content"}
<!-- Page : Inscription -->


<main class="container py-5">

        <!-- Centrage horizontal du formulaire -->
    <div class="row justify-content-center position-relative">
        <div class="col-12 col-md-10 col-lg-6">

                            <!-- Carte contenant le formulaire d'inscription -->
            <div class="card shadow-sm border-0 rounded-4 p-4 p-lg-5">

                            <!-- Titre principal de la page -->
                <h1 class="h3 fw-bold mb-1">Modification du profil</h1>

                {if (isset($arrError) && count($arrError) > 0) }
	            	<div class="alert alert-danger">
	            	{foreach $arrError as $strError}
	            		<p>{$strError}</p>
	            	{/foreach}
	            	</div>
	            {/if}
                        <!-- Formulaire d'inscription -->
                <!-- Les données seront traitées côté serveur en PHP via la méthode POST -->
                <form method="POST" enctype="multipart/form-data">

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label" for="user_firstname">
                                                    Prénom 
                            </label>
                            <input
                                                    class="form-control"
                                                    type="text"
                                                    id="user_firstname"
                                                    name="user_firstname"
                                                    value="{$objUser->getFirstname()}"
                                                     >
                        </div>

                        <div class="col-md-6">
                            <label class="form-label" for="user_name">
                                                    Nom 
                            </label>
                            <input
                                                    class="form-control"
                                                    type="text"
                                                    id="user_name"
                                                    name="user_name"
                                                    value="{$objUser->getName()}"
                                                    
                            >
                        </div>

                        <div class="col-12">
                            <label class="form-label" for="user_pseudo">
                                                    Pseudo
                            </label>
                            <div class="input-group">
                            <span class="input-group-text">@</span>
                            <input
                                                        class="form-control"
                                                        type="text"
                                                        id="user_pseudo"
                                                        name="user_pseudo"
                                                         value="{$objUser->getPseudo()}"
                                                        
                            >
                        </div>
                    </div>
                    <div class="col-12">
                    <label class="form-label" for="image">Photo de profil</label>

                    <div class="d-flex align-items-center gap-4 mb-3">
                        <!-- Avatar preview -->
                        <img
                            id="preview-avatar"
                            src="{if $objUser->getImage()}{$smarty.env.IMG_USER_PATH}{$objUser->getImage()}{else}assests/img/images.jpg{/if}"
                            alt="Photo de profil"
                            class="rounded-circle border"
                            style="width:80px; height:80px; object-fit:cover;"
                        >
                            
                        <!-- Actions à droite de l'avatar -->
                        <div class="d-flex flex-column gap-2">
                            <label for="image" class="btn btn-outline-secondary btn-sm mb-0">
                                <i class="fa-solid fa-upload me-1"></i> Changer la photo
                            </label>
                            {if $objUser->getImage() != "images.jpg"}
                                <button type="button" class="btn btn-outline-danger btn-sm" id="btn-delete-image">
                                    <i class="fa-solid fa-trash me-1"></i> Supprimer la photo
                                </button>
                            {/if}
                        </div>
                    </div>
                        
                    <!-- Input file caché, déclenché par le label -->
                    <input
                        class="d-none"
                        type="file"
                        id="image"
                        name="image"
                        accept="image/jpeg, image/png, image/webp"
                    >
                    <input type="hidden" name="delete_image" id="delete_image" value="0">
                    <div class="form-text">Formats acceptés : JPG, PNG, WEBP. Laisser vide pour ne pas changer.</div>
                </div>
                    <div class="col-12">
                        <label class="form-label" for="user_mail">
                                                Adresse e-mail 
                        </label>
                        <input
                                                class="form-control"
                                                type="email"
                                                id="user_mail"
                                                name="user_mail"
                                                value="{$objUser->getMail()}"
                                                
                        >
                    </div>

                                    
                    <div class="col-12">
                        <label class="form-label" for="user_phone">
                                                Téléphone
                        </label>
                        <input
                                                class="form-control"
                                                type="text"
                                                id="user_phone"
                                                name="user_phone"
                                                value="{$objUser->getPhone()}"
                        >
                    </div>

                                    
                    <div class="col-12">
                        <label class="form-label" for="user_work">
                                                Profession
                        </label>
                        <input
                                                class="form-control"
                                                type="text"
                                                id="user_work"
                                                name="user_work"
                                                value="{$objUser->getWork()}"
                        >
                    </div>

                                   
                    <!-- Champ optionnel : localisation de l'utilisateur -->
						<div class="col-12">
							<label class="form-label" for="user_location">
								Localisation
							</label>
							<div class="position-relative">
								<input
									class="form-control"
									type="text"
									id="user_location"
									name="user_location"
									value="{$objUser->getLocation()}"
									autocomplete="off"
									placeholder="Ex : Paris, Lyon..."
								>
								<!-- Liste déroulante des suggestions -->
								<ul
									id="location-suggestions"
									class="list-group position-absolute w-100 shadow-sm"
									style="z-index: 1000; display: none; max-height: 220px; overflow-y: auto; top: 100%; left: 0;"
								></ul>
							</div>
						</div>

                                    
                    <div class="col-12">
                        <label class="form-label" for="user_description">
                                                Phrase d'accroche
                        </label>
                        <textarea
                                                class="form-control"
                                                id="user_description"
                                                name="user_description"
                                                rows="3"
                        >
                        {$objUser->getDescription()}
                        </textarea>
                    </div>
                    <div class="col-12 d-grid mt-2">
                        <button type="submit" class="btn btn-primary btn-lg rounded-3">
                                            Confirmer
                        </button>
                    </div>

                        
                </form>

            </div>
                

        </div>

    </div>
</div>
</main>
{include file="views/_partial/delphoto.tpl"}
{include file="views/_partial/apigeo.tpl"}
{/block}