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

    <a href="#" id="layout-config-button" class="layout-config-button">
        <i class="pi pi-cog"/>
    </a>

    <div id="layout-config" class="layout-config">
        <h:form id="config-form" styleClass="layout-config-form">
            <h5 style="margin-top: 0">Type de Menu</h5>
            <p:selectOneRadio value="#{guestPreferences.menuMode}" layout="pageDirection"
                              onchange="PrimeFaces.FreyaConfigurator.changeMenuMode(event.target.value)" >
                <f:selectItem itemLabel="Horizontal" itemValue="layout-horizontal" />
                <f:selectItem itemLabel="Sidebar" itemValue="layout-sidebar" />
                <f:selectItem itemLabel="Slim" itemValue="layout-slim" />
                <p:ajax listener="#{guestPreferences.onMenuTypeChange}" update="config-form" />
            </p:selectOneRadio>

            <hr/>

            <h5>Schéma de Couleur</h5>
            <p:selectOneRadio value="#{guestPreferences.darkMode}" layout="pageDirection"
                              onchange="PrimeFaces.FreyaConfigurator.changeLayout('#{guestPreferences.componentTheme}', event.target.value)"   >
                <f:selectItem itemLabel="Clair" itemValue="light" />
                <f:selectItem itemLabel="Sombre" itemValue="dark" />
                <p:ajax onstart="PrimeFaces.FreyaConfigurator.beforeResourceChange()" update="config-form logolink"/>
            </p:selectOneRadio>

            <p:outputPanel rendered="#{guestPreferences.menuMode eq 'layout-horizontal'}">
                <hr/>
                <h5>Mode Barre Supérieure et Menu</h5>
                <p:selectOneRadio value="#{guestPreferences.topbarTheme}" layout="pageDirection"
                                  onchange="PrimeFaces.FreyaConfigurator.changeSectionTheme(event.target.value , 'layout-topbar');PrimeFaces.FreyaConfigurator.changeSectionTheme(event.target.value , 'layout-menu')"   >
                    <f:selectItem itemLabel="Clair" itemValue="light" itemDisabled="#{guestPreferences.darkMode != 'light'}"  />
                    <f:selectItem itemLabel="Sombre" itemValue="dark" itemDisabled="#{guestPreferences.darkMode != 'light'}"/>
                    <p:ajax update="logolink config-form"/>
                </p:selectOneRadio>
            </p:outputPanel>

            <p:outputPanel rendered="#{guestPreferences.menuMode != 'layout-horizontal'}">
                <hr/>
                <h5>Mode Barre Supérieure</h5>
                <p:selectOneRadio value="#{guestPreferences.topbarTheme}" layout="pageDirection"
                                  onchange="PrimeFaces.FreyaConfigurator.changeSectionTheme(event.target.value , 'layout-topbar')"   >
                    <f:selectItem itemLabel="Clair" itemValue="light" itemDisabled="#{guestPreferences.darkMode != 'light'}"  />
                    <f:selectItem itemLabel="Sombre" itemValue="dark" itemDisabled="#{guestPreferences.darkMode != 'light'}"/>
                    <p:ajax update="logolink config-form"/>
                </p:selectOneRadio>
            </p:outputPanel>

            <p:outputPanel rendered="#{guestPreferences.menuMode != 'layout-horizontal'}">
                <hr/>
                <h5>Mode Menu</h5>
                <p:selectOneRadio value="#{guestPreferences.menuTheme}" layout="pageDirection"
                                  onchange="PrimeFaces.FreyaConfigurator.changeSectionTheme(event.target.value , 'layout-menu')"   >
                    <f:selectItem itemLabel="Clair" itemValue="light" itemDisabled="#{guestPreferences.darkMode != 'light'}"  />
                    <f:selectItem itemLabel="Sombre" itemValue="dark" itemDisabled="#{guestPreferences.darkMode != 'light'}"/>
                    <p:ajax update="logolink config-form"/>
                </p:selectOneRadio>
            </p:outputPanel>

            <hr/>

            <h5>Style d'Entrée</h5>
            <p:selectOneRadio value="#{guestPreferences.inputStyle}" layout="pageDirection"
                              onchange="PrimeFaces.FreyaConfigurator.updateInputStyle(event.target.value)">
                <f:selectItem itemLabel="Contouré" itemValue="outlined" />
                <f:selectItem itemLabel="Rempli" itemValue="filled" />
                <p:ajax />
            </p:selectOneRadio>

            <hr/>

            <h5>Couleurs de Thème</h5>
            <div class="layout-themes">
                <ui:repeat value="#{guestPreferences.componentThemes}" var="componentTheme">
                    <div>
                        <p:commandLink actionListener="#{guestPreferences.setComponentTheme(componentTheme.file)}"
                                       style="background-color: #{componentTheme.color};" title="#{componentTheme.name}"
                                       process="@this"
                                       update="config-form"
                                       onstart="PrimeFaces.FreyaConfigurator.beforeResourceChange()"
                                       oncomplete="PrimeFaces.FreyaConfigurator.changeComponentsTheme('#{componentTheme.file}', '#{guestPreferences.darkMode}')">
                        </p:commandLink>
                    </div>
                </ui:repeat>
            </div>
        </h:form>
    </div>
</ui:composition>