<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<%@taglib prefix="a4j" uri="http://richfaces.org/a4j"%>
<%@taglib prefix="rich" uri="http://richfaces.org/rich"%>

<%@taglib prefix="p" uri="http://primefaces.prime.com.tr/ui"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<f:subview id="users_admin">
    <html>
        <body>

            <h:form id="userForm">
                <p:growl id="msg" showDetail="true"/>
                <div id="qb-menu" class="unselectable">
                    <ul>
                        <li onclick="javascript: newUserDialog.show();">
                            <a>
                                <h:graphicImage value="../images/toSystem.png" width="18" height="18"
                                                style="position: relative; top: 3px;"/>
                                <rich:spacer width="2px" />
                                <h:outputText value="  #{msg.add}" styleClass="unselectable" />
                            </a>
                        </li>
                        <li onclick="javascript: confirmationUser.show();">
                            <a>
                                <h:graphicImage value="../images/bin.png" width="18" height="18"
                                                style="position: relative; top: 3px;"/>
                                <rich:spacer width="2px" />
                                <h:outputText value="#{msg.remove}" styleClass="unselectable" />
                            </a>
                        </li>
                    </ul>
                </div>

                <rich:tree style="width:340px"
                           id="userTree"
                           nodeSelectListener="#{user.usersTree.processSelection}"
                           switchType="client" ajaxSubmitSelection="true"
                           value="#{user.usersTree.tree}" ajaxKeys="#{null}"
                           icon="/images/users.png" reRender="info"
                           iconLeaf="/images/person.png">
                </rich:tree>
                <div style="position: absolute; right: 0px; top: 0px;">
                    <p:panel header="Informacie o užívateľovi" id="info"
                             style="width: 600px; height: 400px;">

                        <h:panelGrid columns="1">
                            <h:outputText value="#{msg.username}:" style="font-weight:bold;"/>
                            <h:outputText value="#{user.usersTree.selectedNode.username}"/>

                            <h:outputText id="emailInfo"
                                          value="#{msg.email}:" style="font-weight:bold;" />
                            <h:outputText value="#{user.usersTree.selectedNode.email}"/>
                        </h:panelGrid>
                    </p:panel>
                    <p:tooltip for="emailInfo" value="Na tento email budu zasielane upozornenia."
                               style="cream"/>
                </div>
            </h:form>

            <h:form>
                <%-- Dialog pre pridanie uzivatela --%>
                <p:dialog id="addUserDialog"
                          header="Pridať nového užívateľa" widgetVar="newUserDialog"
                          resizable="false" closable="true"
                          width="400" styleClass="dialogIcon toSystem">
                    <h:panelGrid columns="1">

                        <h:outputText value="#{msg.username}:" />
                        <h:inputText value="#{userBean.user.username}" styleClass="form-login"
                                     title="Username" size="30" maxlength="2048" />

                        <h:outputText value="#{msg.password}:" />
                        <h:inputSecret value="#{userBean.user.password}" styleClass="form-login"
                                       size="30" maxlength="2048"/>

                        <h:outputText value="#{msg.email}:" />
                        <h:inputSecret value="#{userBean.user.email}" styleClass="form-login"
                                       size="30" maxlength="2048"/>

                        <a4j:commandLink actionListener="#{userBean.addUser}"
                                         onclick="javascript: newUserDialog.hide();"
                                         reRender="userForm"
                                         style="margin-left:90px;">
                            <h:graphicImage value="images/ok-btn.png" width="103"
                                            height="42" style="margin-left:70px; margin-top: 20px;" />
                        </a4j:commandLink>
                    </h:panelGrid>
                </p:dialog>
                <%-- END: Dialog pre pridanie uzivatela --%>

                <%-- Potvrdzovaci dialog pre znamazanie uzivatela --%>
                <p:confirmDialog message="#{msg.areYouSureUser}: #{user.usersTree.selectedNode.username}?"
                                 header="#{msg.deleteUser}" severity="alert" widgetVar="confirmationUser">
                    <a4j:commandLink
                        onclick="confirmationUser.hide();"
                        reRender="userForm"
                        style="margin-left:20px;">
                        <h:graphicImage value="images/nie-btn.png" width="103"
                                        height="42" />
                    </a4j:commandLink>

                    <a4j:commandLink actionListener="#{user.usersTree.removeSelectedUser}"
                                     onclick="confirmationUser.hide();"
                                     reRender="userForm"
                                     style="margin-left:20px;">
                        <h:graphicImage value="images/ano-btn.png" width="103"
                                        height="42"/>

                    </a4j:commandLink>
                </p:confirmDialog>
                <%-- END: Potvrdzovaci dialog pre znamazanie uzivatela--%>
            </h:form>
        </body>
    </html>
</f:subview>
