<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 dialogue de formulaire réutilisable et responsive - DRY/WOU
        
        Usage :
        <ui:decorate template="/templates/components/dialogs/form-dialog.xhtml">
            <ui:param name="dialogId" value="dlgNouvelle" />
            <ui:param name="header" value="Nouvelle Organisation" />
            <ui:param name="widgetVar" value="dlgNouvelle" />
            <ui:param name="formId" value="formNouvelle" />
            <ui:param name="width" value="900" />
            <ui:param name="height" value="600" />
            <ui:param name="maximizable" value="true" />
            <ui:param name="fitViewport" value="true" />
            <ui:define name="content">
                Contenu du formulaire ici
            </ui:define>
            <ui:define name="footer">
                Boutons du footer ici
            </ui:define>
        </ui:decorate>
        
        Paramètres :
        - dialogId : ID unique du dialogue (requis)
        - header : Titre du dialogue (requis)
        - widgetVar : Variable JavaScript pour contrôler le dialogue (requis)
        - formId : ID du formulaire (requis)
        - width : Largeur (défaut: 600)
        - height : Hauteur (optionnel)
        - maximizable : Permet de maximiser (défaut: false)
        - fitViewport : Ajuste au viewport (défaut: true)
        - modal : Modal ou non (défaut: true)
        - resizable : Redimensionnable (défaut: false)
        - draggable : Déplaçable (défaut: true)
        - closable : Bouton fermer (défaut: true)
        - showEffect : Effet d'ouverture (défaut: fade)
        - hideEffect : Effet de fermeture (défaut: fade)
    -->

    <h:form id="#{formId}">
        <p:dialog id="#{dialogId}"
                  header="#{header}"
                  widgetVar="#{widgetVar}"
                  modal="#{empty modal ? true : modal}"
                  resizable="#{empty resizable ? false : resizable}"
                  width="#{empty width ? '600' : width}"
                  height="#{height}"
                  responsive="true"
                  closable="#{empty closable ? true : closable}"
                  draggable="#{empty draggable ? true : draggable}"
                  maximizable="#{not empty maximizable and maximizable}"
                  fitViewport="#{empty fitViewport ? true : fitViewport}"
                  showEffect="#{empty showEffect ? 'fade' : showEffect}"
                  hideEffect="#{empty hideEffect ? 'fade' : hideEffect}"
                  dynamic="true"
                  styleClass="#{styleClass}">

            <div class="ui-fluid">
                <div class="grid">
                    <ui:insert name="content">
                        <!-- Contenu du formulaire -->
                    </ui:insert>
                </div>
            </div>

            <f:facet name="footer">
                <div class="flex justify-content-end gap-2">
                    <ui:insert name="footer">
                        <!-- Footer par défaut : bouton Annuler -->
                        <p:commandButton value="#{empty cancelLabel ? 'Annuler' : cancelLabel}"
                                       icon="pi pi-times"
                                       type="button"
                                       onclick="PF('#{widgetVar}').hide();"
                                       styleClass="ui-button-secondary" />
                    </ui:insert>
                </div>
            </f:facet>
        </p:dialog>
    </h:form>
</ui:composition>


