<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich" %>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j" %>
<%@ taglib uri="http://labs.jboss.com/jbossrichfaces/ui/extendedDataTable" prefix="extdt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<f:view>
    <html>  
    <head>
        <title>
            <h:outputText value="#{msg['demo.title']}">
            </h:outputText>
        </title>
        <style type="text/css">
        
            .leftColumn {
                width: 50%;
                height: 100%;
            }
            
            .rightColumn {
                width: 50%;
                height: 100%;
            }
            
            #mainPanel {
                width: 100%;
                height: 100%;
            }
        
            #leftPanel {
                width: 100%;
                height: 100%;
            }
            
            #rightPanel {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>

<body>
    <h:panelGrid columns="2" id="mainPanel" columnClasses="leftColumn, rightColumn">
    <rich:panel id="leftPanel">
    <h:form>
        <extdt:extendedDataTable id="demoTable"
                value="#{extendedDataTableBean.dataModel}"
                var="patient"
                rows="#{extendedDataTableControlBean.rowsNumber}"
                width="#{extendedDataTableControlBean.width}"
                height="#{extendedDataTableControlBean.height}"
                selectedClass="dataTableSelectedRow"
                footerClass="demo-footer"
                sortMode="#{extendedDataTableControlBean.sortMode}"
                selectionMode="#{extendedDataTableControlBean.selectionMode}"
                selection="#{extendedDataTableBean.selection}"
                rowKeyVar="rkvar"
                tableState="#{extendedDataTableBean.tableState}">
            <rich:column id="firstName"
                    headerClass="dataTableHeader"
                    width="150"
                    label="#{msg['patient.firstName']}"
                    sortable="true"
                    sortBy="#{patient.firstName}"
                    filterBy="#{patient.firstName}"
                    filterEvent="onkeyup">
                <f:facet name="header">
                    <h:outputText value="#{msg['patient.firstName']}" />
                </f:facet>
                <h:outputText value="#{patient.firstName}" />
            </rich:column>
            <rich:column id="lastName"
                    headerClass="dataTableHeader"
                    width="150"
                    label="#{msg['patient.lastName']}"
                    sortable="true"
                    sortBy="#{patient.lastName}"
                    filterBy="#{patient.lastName}"
                    filterEvent="onkeyup">
                <f:facet name="header">
                    <h:outputText value="#{msg['patient.lastName']}" />
                </f:facet>
                <h:outputText value="#{patient.lastName}" />
            </rich:column>
            <rich:column id="admissionDate"
                    headerClass="dataTableHeader"
                    width="150"
                    label="#{msg['patient.admissionDate']}"
                    sortable="true"
                    sortBy="#{patient.admissionDate}">
                <f:facet name="header">
                    <h:outputText value="#{msg['patient.admissionDate']}" />
                </f:facet>
                <h:outputText value="#{patient.admissionDate}" />
            </rich:column>
        </extdt:extendedDataTable>
        <rich:datascroller
            style="width: #{extendedDataTableControlBean.width}"
            rendered="#{extendedDataTableControlBean.paginated}"
            for="demoTable">
        </rich:datascroller>
    </h:form>
    </rich:panel>
    <rich:panel id="rightPanel">
    <h:form>
        <h:panelGrid columns="2">
            <h:outputLabel value="#{msg['table.width']}" for="tableWidthInput" />
            <h:inputText 
                id="tableWidthInput" 
                value="#{extendedDataTableControlBean.width}" />
            <h:outputLabel value="#{msg['table.height']}" for="tableHeightInput" />
            <h:inputText 
                id="tableHeightInput" 
                value="#{extendedDataTableControlBean.height}" />
            <h:outputLabel value="#{msg['table.patientsNumber']}" for="tablePatientsNumberInput" />
            <h:inputText 
                id="tablePatientsNumberInput" 
                value="#{extendedDataTableBean.patientsNumber}" />
            <h:outputLabel value="#{msg['table.sortMode']}" for="tableSortModeSelect" />
            <h:selectOneMenu
                    id="tableSortModeSelect"
                    value="#{extendedDataTableControlBean.sortMode}"
                >
                <f:selectItems value="#{extendedDataTableControlBean.sortModeSelectItems}"/>
            </h:selectOneMenu>
            <h:outputLabel value="#{msg['table.selectionMode']}" for="tableSelectionModeSelect" />
            <h:selectOneMenu
                    id="tableSelectionModeSelect"
                    value="#{extendedDataTableControlBean.selectionMode}"
                >
                <f:selectItems value="#{extendedDataTableControlBean.selectionModeSelectItems}"/>
            </h:selectOneMenu>
            <h:outputLabel value="#{msg['table.paginated']}" for="paginatedChecxbox" />
            <h:selectBooleanCheckbox 
                id="paginatedCheckbox"
                value="#{extendedDataTableControlBean.paginated}" />
            <h:outputLabel value="#{msg['table.rowsNumber']}" for="tableRowsNumberInput" />
            <h:inputText 
                id="tableRowsNumberInput" 
                value="#{extendedDataTableControlBean.rowsNumber}" />
        </h:panelGrid>
        <a4j:commandButton value="#{msg['table.update']}" reRender="mainPanel">
        </a4j:commandButton>
        <a4j:commandButton value="#{msg['table.testComponentState']}"
                action="stateTest"
            >
        </a4j:commandButton>
        <rich:messages>
        </rich:messages>
    </h:form>
    </rich:panel>
    </h:panelGrid>
</body>
</html>
</f:view>