<%@ include file="/jsp/init.jsp" %>

<%@ include file="/jsp/admin/includes/menu-lateral-principal.jspf" %>

<div class="span10 context-pane">

	<%@ include file="/jsp/admin/includes/carregar-dados-wizard.jspf" %>

	<liferay-ui:success key="mensagem-gravada-aguardar-workflow" message="mensagem-gravada-aguardar-workflow"/>
	<liferay-ui:success key="mensagem-gravada-aprovada-workflow" message="mensagem-gravada-aprovada-workflow"/>
	
	
	<aui:model-context bean="<%= template %>" model="<%= Template.class %>" />

	<div id="selecao-template-wrapper">
		<liferay-ui:success key="template-sucesso-gravar" message="template.sucesso-gravar"/>
		<liferay-ui:success key="sucesso-excluir" message="template.sucesso-excluir"/>
	
		<liferay-ui:header title="template.header.listagem"/>
				
		<aui:form name="fmSearchTemplate" action="#" cssClass="search-terms grupo-campos-busca">
			<div>
				<aui:input name="nomeTemplateSearch" 
						value="${param.nomeTemplateSearch}" 
						type="text" 
						inlineField="true" 
						inlineLabel="left"
						label="template.busca.campo.nome"
						cssClass="span10"
						wrapperCssClass="span5"/>			
						
				<aui:button cssClass="pesquisa inline" type="submit" value="search"/>		
				<div class="clearfix"></div>
			</div>
		</aui:form>
	
		<liferay-portlet:renderURL var="proximaPaginaURL">
			<liferay-portlet:param name="mvcPath" value="/jsp/admin/mensagem/formulario.jsp"/>
			<liferay-portlet:param name="wizard" value="true"/>
			<liferay-portlet:param name="passoAtual" value="2"/>
			<liferay-portlet:param name="exibirProximoPasso" value="true"/>
			<liferay-portlet:param name="rascunho" value="${param.rascunho}"/>
		</liferay-portlet:renderURL>
		
		<liferay-portlet:actionURL var="processarPassoURL">
			<liferay-portlet:param name="<%= ActionRequest.ACTION_NAME %>" value='WizardTemplate'/>
			<liferay-portlet:param name="mvcPath" value="/jsp/admin/template/listagem.jsp"/>
			<liferay-portlet:param name="rascunho" value="${param.rascunho}"/>
		</liferay-portlet:actionURL>	
		
		<aui:form name="fmWizard" action="${processarPassoURL}" method="post">
			 <aui:input name="redirect" value="${proximaPaginaURL}" type="hidden"/>
			 
			<aui:field-wrapper required="true">
				<div id="slider-templates-wrapper" class="">
					<div class="lista-templates owl-carousel owl-theme" id="templates-scroll">
						
						<c:set var="indexTemplateSel" value="-1"/>
						<c:set var="listaTemplates" value="<%=TemplateSearch.pesquisar(renderRequest)%>" />
						<c:forEach var="templateItem" items="${listaTemplates}" varStatus="status">
							<%
								Template templateItem = (Template)pageContext.getAttribute("templateItem");
							%>
							<c:if test="${templateItem.templateId eq template.templateId }">
								<c:set var="indexTemplateSel" value="${status.index}"/>
							</c:if>
							<liferay-portlet:renderURL var="pesquisaURL">
								<liferay-portlet:param name="mvcPath" value="/jsp/admin/template/listagem.jsp"/>
							</liferay-portlet:renderURL>
							 <liferay-portlet:actionURL varImpl="removerModeloURL">
          						<liferay-portlet:param name="<%= ActionRequest.ACTION_NAME %>" value='TemplateExcluir'/>
            				    <liferay-portlet:param name="redirect" value="${pesquisaURL}" />
             				    <liferay-portlet:param name="templateId" value="<%= String.valueOf(templateItem.getTemplateId()) %>" />
       						 </liferay-portlet:actionURL>
							
							<div class="item">
								<div class="miniatura-preview-template" >
									<div class="conteudo">
										<img alt="${templateItem.nome}" src='<%=ImagemUtil.getUrlThumbnailTemplate(renderRequest, templateItem.getThumbnailURL())%>'>
									</div>
									<aui:input name="templateId" 
												value="${templateItem.templateId}" 
												label="${templateItem.nome }" 
												type="radio" 
												inlineField="true"
												checked="${templateItem.templateId eq template.templateId }">
										<aui:validator 
												name="required" 
												errorMessage="template.validacao.erro.selecionar"/>
									</aui:input>
									<c:if test='<%=permissionChecker.hasPermission(scopeGroupId, "br.mp.mprj.portal.portlet.gestaomensagens.service.model", scopeGroupId, "ADICIONAR_TEMPLATE") %>'>
									<div align="center">
										<liferay-portlet:renderURL var="editarModeloURL">
										<liferay-portlet:param name="mvcPath" value="/jsp/admin/template/edicao.jsp"/>
										<liferay-portlet:param name="templateId" value="${templateItem.templateId}"/>
										</liferay-portlet:renderURL>
										<a href="${editarModeloURL}"><liferay-ui:message key="wizard.navegacao.botao.template.editar"/></a>
									</div>
									</c:if>
									<c:if test='<%=permissionChecker.hasPermission(scopeGroupId, "br.mp.mprj.portal.portlet.gestaomensagens.service.model", scopeGroupId, "ADICIONAR_TEMPLATE") %>'>
									<div align="center">
										<a href="${removerModeloURL}" ><liferay-ui:message key="wizard.navegacao.botao.template.remover"/></a>
									</div> 
									</c:if>
								</div>
							</div>
						</c:forEach>
					</div>	
				</div>
			</aui:field-wrapper>
		</aui:form>
		
		<div class="botoes-acao-wizard-wrapper clearfix">
		    <c:set var="proximoDisabled" value="${empty listaTemplates}"/>
            <div class="botao-wizard-wrapper">
		    <c:choose>
                <c:when test="${proximoDisabled}">
                    <a href="javascript:" id="<portlet:namespace/>btProximoDisabled" class="botao-wizard proximo disabled" >
                </c:when>
                <c:otherwise>
                    <a href="javascript:" id="<portlet:namespace/>btProximo" class="botao-wizard proximo" >
                </c:otherwise>
            </c:choose>
				    <liferay-ui:message key="wizard.navegacao.botao.mensagem.preencher-dados"/>
				    <i class="icon-circle-arrow-right"></i>
                </a>
			</div>
			<c:if test='<%=permissionChecker.hasPermission(scopeGroupId, "br.mp.mprj.portal.portlet.gestaomensagens.service.model", scopeGroupId, "ADICIONAR_TEMPLATE") %>'>
				<div class="botao-wizard-wrapper link-novo-template clearfix">
					<liferay-portlet:renderURL var="novoModeloURL">
						<liferay-portlet:param name="mvcPath" value="/jsp/admin/template/formulario.jsp"/>
						<liferay-portlet:param name="wizard" value="true"/>
						<liferay-portlet:param name="passoAtual" value="1"/>
						<liferay-portlet:param name="rascunho" value="${param.rascunho}"/>
						<liferay-portlet:param name="novoTemplate" value="true"/>
					</liferay-portlet:renderURL>
					<a href="${novoModeloURL}" class="botao-wizard proximo"><liferay-ui:message key="wizard.navegacao.botao.template.novo"/></a>
				</div>
			</c:if>		
			
		</div>
	</div>
</div>

<aui:script use="node">
	A.one("#<portlet:namespace/>btProximo").on('click', function() {
		submitForm(document.<portlet:namespace/>fmWizard);
	});
	
    $(document).ready(function() {
        //container para os itens do carousel
        var owl = $("#templates-scroll");
        
        owl.owlCarousel({
          slideSpeed : 300,
          paginationSpeed : 400,
          items: 5,
          autoPlay: false,
          stopOnHover: true,
          pagination: false,
          paginationNumbers: false,
          autoHeight: false,
          transitionStyle: "fade",
          navigation: true,
          navigationText: [
	          "<i class='icon-chevron-left icon-white'></i>",
	          "<i class='icon-chevron-right icon-white'></i>"
          ],
          itemsScaleUp: false,
          afterInit: function(elem) {
        	  ajustarMargemSlider($(".owl-controls").css("display") == 'block');
        	  
        	  var indexTemplate = parseInt('${indexTemplateSel}',10); 
        	  if (indexTemplate >= 0) {
        		  owl.trigger("owl.goTo", indexTemplate);
              }
          },
          afterUpdate: function(elem) {
        	  ajustarMargemSlider($(".owl-controls").css("display") == 'block');
          }
        });

        //remove a margem do container do carousel caso as setas de navegacao
        //nao estejam sendo exibidas, evitando problemas esteticos
        function ajustarMargemSlider(possuiNavegacao) {
			var sliderWrapper = $("#slider-templates-wrapper");
			var nomeCss = 'sem-navegacao';
			if (!possuiNavegacao) {
				if (!sliderWrapper.hasClass(nomeCss)) {
					sliderWrapper.addClass(nomeCss);
				}
			}
			else {
				sliderWrapper.removeClass(nomeCss);
			}
        }

        //redefinir tamanho da fonte das miniaturas para o tamanho padrao
        $(".miniatura-preview-template .conteudo span").css("font-size", "8px");
      });
</aui:script>

<script type="text/javascript">
    document.getElementById("<portlet:namespace />nomeTemplateSearch").focus();
</script>