<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <body>

        <ui:composition template="./template/Principal.xhtml">

            <ui:define name="top">
                SISTEMA DE INVENTARIO

            </ui:define>

            <ui:define name="left">

            </ui:define>

            <ui:define name="right">

            </ui:define>

            <ui:define name="content">
                <f:view>


                    <h:form>
                        <p:growl id="growl" showDetail="true" for="MensajePais"/>

                        <h1><h:outputText value="#{demoBeanPais.titulo}"/></h1>
                        <h:panelGrid columns="3">

                            <p:outputLabel value="Nombre:" for="nombre" />
                            <p:inputText id="nombre" value="#{demoBeanPais.pais.nombre}" 
                                         title="Nombre"
                                         required="true"
                                         requiredMessage="El campo nombre es obligatorio"
                                         validatorMessage="El campo nombre no debe incluir números, debe incluir mínimo 3 letras y máximo 15 letras">
                                <f:validateRegex pattern="[a-zA-Z ]+" />
                                <f:validateLength minimum="3" maximum="15" />
                            </p:inputText>
                            <p:message for="nombre" />
                        </h:panelGrid>
                        <p:commandButton action="#{demoBeanPais.agregarPais()}" 
                                         icon="pi pi-fw pi-check"
                                         style="padding: 2px 8px; font-size: 13px; font-weight: bold; color: #3366FF; background-color: #fff; border: 2px solid #3366FF; border-radius: 8px; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease ; margin-right: 6px;"

                                         rendered="#{demoBeanPais.nuevo}"
                                         value="Agregar" 
                                         update="growl"
                                         ajax="false"/>

                        <p:commandButton action="Pais.xhtml" 
                                         actionListener="#{demoBeanPais.editarPais()}"
                                         icon="pi pi-fw pi-pencil"
                                         style="padding: 2px 8px; font-size: 13px; font-weight: bold; color: #3366FF; background-color: #fff; border: 2px solid #3366FF; border-radius: 8px; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease ; margin-right: 6px;"

                                         rendered="#{!demoBeanPais.nuevo}"
                                         value="Editar"
                                         update="growl"
                                         ajax="false"/>

                        <p:commandButton action="Pais.xhtml" icon="pi pi-fw pi-times"
                                         value="Cancelar"
                                         style=" padding: 2px 8px; font-size: 13px; font-weight: bold; color: #990000; background-color: #fff; border: 2px solid #FF0000; border-radius: 8px; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; margin-right: 6px;"

                                         immediate="true"
                                         ajax="false"/>
                    </h:form>
                </f:view>

            </ui:define>

            <ui:define name="bottom">

            </ui:define>

        </ui:composition>

    </body>
</html>