<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">

    <!--
        Composant réutilisable: Photo de profil avec upload
        Paramètres:
        - photoId: ID du panelGroup pour la photo (requis)
        - photoUrl: URL de la photo (optionnel)
        - initiales: Initiales à afficher si pas de photo (requis)
        - formId: ID du formulaire pour l'upload (requis)
        - listener: Méthode bean pour gérer l'upload (requis)
        - update: Composants à mettre à jour après upload (requis)
        - size: Taille de la photo en px (optionnel, défaut: 120)
    -->
    
    <ui:param name="size" value="120" />
    
    <h:panelGroup id="#{photoId}">
        <div class="border-circle overflow-hidden" style="width: #{size}px; height: #{size}px;">
            <h:graphicImage value="#{photoUrl}" 
                          style="width: 100%; height: 100%; object-fit: cover;"
                          rendered="#{photoUrl != null}" />
            <div class="bg-primary text-white flex align-items-center justify-content-center w-full h-full"
                 rendered="#{photoUrl == null}">
                <span style="font-size: #{size / 2}px;">#{initiales}</span>
            </div>
        </div>
    </h:panelGroup>
    <h:form id="#{formId}" enctype="multipart/form-data">
        <p:fileUpload mode="simple" skinSimple="true" 
                    label="Changer photo" chooseLabel="Modifier"
                    accept="image/*" maxFileSize="2000000"
                    listener="#{listener}"
                    update="#{update}"
                    styleClass="mt-2 w-full" />
    </h:form>
</ui:composition>

