<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"
                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">

    <!--
        Composant réutilisable: Champ Formulaire Utilisateur (WOU/DRY Pattern)
        
        Auteur: Lions User Manager
        Version: 1.0.0
        Description: Champ de formulaire générique pour utilisateur
        
        Paramètres:
        - id: String (requis) - ID du champ
        - label: String (requis) - Label du champ
        - value: Object (requis) - Valeur du champ
        - type: String (défaut: "text") - Type: "text", "email", "password", "number", "textarea", "select", "checkbox", "calendar"
        - required: Boolean (défaut: false) - Champ requis
        - readonly: Boolean (défaut: false) - Mode lecture seule
        - placeholder: String (optionnel) - Placeholder
        - helpText: String (optionnel) - Texte d'aide
        - styleClass: String (optionnel) - Classes CSS supplémentaires
        - selectItems: List (optionnel) - Items pour select
        - rows: Number (optionnel, défaut: 3) - Nombre de lignes pour textarea
        
        Exemples d'utilisation:
        
        1. Champ texte:
        <ui:include src="/templates/components/shared/forms/user-form-field.xhtml">
            <ui:param name="id" value="username" />
            <ui:param name="label" value="Nom d'utilisateur" />
            <ui:param name="value" value="#{user.username}" />
            <ui:param name="required" value="true" />
        </ui:include>
        
        2. Champ email:
        <ui:include src="/templates/components/shared/forms/user-form-field.xhtml">
            <ui:param name="id" value="email" />
            <ui:param name="label" value="Email" />
            <ui:param name="value" value="#{user.email}" />
            <ui:param name="type" value="email" />
            <ui:param name="required" value="true" />
        </ui:include>
        
        3. Champ select:
        <ui:include src="/templates/components/shared/forms/user-form-field.xhtml">
            <ui:param name="id" value="statut" />
            <ui:param name="label" value="Statut" />
            <ui:param name="value" value="#{user.statut}" />
            <ui:param name="type" value="select" />
            <ui:param name="selectItems" value="#{userBean.statutOptions}" />
        </ui:include>
    -->
    
    <c:set var="type" value="#{empty type ? 'text' : type}" />
    <c:set var="required" value="#{empty required ? false : required}" />
    <c:set var="readonly" value="#{empty readonly ? false : readonly}" />
    <c:set var="rows" value="#{empty rows ? 3 : rows}" />
    
    <div class="field">
        <p:outputLabel for="#{id}" value="#{label}#{required ? ' *' : ''}" />
        
        <c:choose>
            <!-- Champ texte -->
            <c:when test="#{type == 'text' or type == 'email'}">
                <p:inputText 
                    id="#{id}" 
                    value="#{value}" 
                    required="#{required}"
                    readonly="#{readonly}"
                    placeholder="#{placeholder}"
                    type="#{type == 'email' ? 'email' : 'text'}"
                    styleClass="w-full #{styleClass}" />
            </c:when>
            
            <!-- Champ mot de passe -->
            <c:when test="#{type == 'password'}">
                <p:password 
                    id="#{id}" 
                    value="#{value}" 
                    required="#{required}"
                    readonly="#{readonly}"
                    placeholder="#{placeholder}"
                    feedback="#{not empty feedback ? feedback : false}"
                    styleClass="w-full #{styleClass}" />
            </c:when>
            
            <!-- Champ nombre -->
            <c:when test="#{type == 'number'}">
                <p:inputNumber 
                    id="#{id}" 
                    value="#{value}" 
                    required="#{required}"
                    readonly="#{readonly}"
                    placeholder="#{placeholder}"
                    styleClass="w-full #{styleClass}" />
            </c:when>
            
            <!-- Champ textarea -->
            <c:when test="#{type == 'textarea'}">
                <p:inputTextarea 
                    id="#{id}" 
                    value="#{value}" 
                    required="#{required}"
                    readonly="#{readonly}"
                    placeholder="#{placeholder}"
                    rows="#{rows}"
                    styleClass="w-full #{styleClass}" />
            </c:when>
            
            <!-- Champ select -->
            <c:when test="#{type == 'select'}">
                <p:selectOneMenu 
                    id="#{id}" 
                    value="#{value}" 
                    required="#{required}"
                    readonly="#{readonly}"
                    styleClass="w-full #{styleClass}">
                    <f:selectItem itemLabel="Sélectionner..." itemValue="" />
                    <f:selectItems value="#{selectItems}" />
                </p:selectOneMenu>
            </c:when>
            
            <!-- Champ checkbox -->
            <c:when test="#{type == 'checkbox'}">
                <p:selectBooleanCheckbox 
                    id="#{id}" 
                    value="#{value}" 
                    readonly="#{readonly}" />
            </c:when>
            
            <!-- Champ calendar -->
            <c:when test="#{type == 'calendar'}">
                <p:calendar 
                    id="#{id}" 
                    value="#{value}" 
                    required="#{required}"
                    readonly="#{readonly}"
                    pattern="dd/MM/yyyy"
                    styleClass="w-full #{styleClass}" />
            </c:when>
            
            <!-- Par défaut: champ texte -->
            <c:otherwise>
                <p:inputText 
                    id="#{id}" 
                    value="#{value}" 
                    required="#{required}"
                    readonly="#{readonly}"
                    placeholder="#{placeholder}"
                    styleClass="w-full #{styleClass}" />
            </c:otherwise>
        </c:choose>
        
        <c:if test="#{not empty helpText}">
            <small class="text-color-secondary text-xs">#{helpText}</small>
        </c:if>
    </div>
    
</ui:composition>

