<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/layout/template.xhtml">
    <ui:define name="title">
        #{msg['distribution.page.etablissement']}
    </ui:define>

    <ui:define name="breadcrumb">
        <f:metadata>
            <f:viewParam name="homeOutcome" value="/favorites/dashboard" />
            <f:viewParam name="value" value="Groupes et Fonctionnalités" />
        </f:metadata>
    </ui:define>
    <ui:define name="content">
        <h:form>
            <div class="card">
                <p:tabView id="tabview" scrollable="true">
                    <p:tab title="#{msg['distribution.page.groupes']}">
                        <p:dataTable id="dataTable" var="groupe"
                                     rows="30" paginator="true" draggableColumns="true"
                                     value="#{groupBean.listeGroupe}" 
                                     selection="#{groupBean.groupeSelected}"
                                     paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                                     rowsPerPageTemplate="20,30,40,60,80,100"
                                     emptyMessage="#{msg['distribution.page.groupe.liste.message.non'] }"
                                     selectionMode="single"
                                     rowKey="#{groupe.id}" >
                            <f:facet name="header">
                                <div class="flex justify-content-between align-items-center">
                                    <div>
                                    </div>
                                    <div>
                                        <p:commandButton title="#{msg['distribution.page.groupe.ajoutergroupe']}" icon="pi pi-plus" styleClass="ui-button-success mr-2" action="#{groupBean.ajouterGroupe()}"  />
                                    </div>
                                </div>
                            </f:facet>

                            <p:column style=" text-align: center;" headerText="#{msg['distribution.page.groupe.nom']}"  filterBy="#{groupe.nomGroupe}" filterMatchMode="contains" sortBy="#{groupe.nomGroupe}"  >  
                                <h:outputText value="#{groupe.nomGroupe}" />  
                            </p:column>

                            <p:column style="width:130px; text-align: center;" exportable="false" visible="true" draggable="false" toggleable="false"> 

                                <p:commandButton  id="buttonSelect" style="height:30px; text-align: center"  action="#{groupBean.voirGroupe(groupe)}" icon="pi pi-search" title="#{msg['distribution.page.consulter']}">
                                </p:commandButton>

                            </p:column> 
                        </p:dataTable> 
                    </p:tab>
                    <p:tab title="#{msg['distribution.page.fonctionnalite']}">
                        <p:dataTable id="dataTable1" var="fonction"
                                     rows="30" paginator="true" draggableColumns="true"
                                     value="#{groupBean.listeFonctionnalite}" 
                                     paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                                     rowsPerPageTemplate="20,30,40,60,80,100"
                                     emptyMessage="#{msg['distribution.page.groupe.liste.message.non'] }"
                                     selectionMode="single"
                                     rowKey="#{fonction.id}" >

                            <p:column style=" text-align: center;" headerText="#{msg['distribution.page.fonctionalite.nom']}"  filterBy="#{fonction.nom}" filterMatchMode="contains" sortBy="#{fonction.nom}"  >  
                                <h:outputText value="#{fonction.nom}" />  
                            </p:column>
                        </p:dataTable> 
                    </p:tab>
                </p:tabView>
            </div>
        </h:form>
    </ui:define>
</ui:composition>