<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">

<head th:replace="~{layouts/common.html :: head}"></head>

<link th:href="@{/js/gijgo/css/gijgo.min.css}" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css"/>

<body id="page-top">

	<!-- Navigation -->
	<nav th:replace="~{layouts/common.html :: navbar}"></nav>
 
 	<!-- Content -->
	<div class="content uv-content d-flex" id="uv-wrapper">
		<div class="bg-light border-right" id="uv-sidebar-wrapper" th:replace="~{layouts/sidebar.html :: sidebar}"></div>
		
		<div class="container uv-home-section navVisible" id="uv-content-wrapper">
			<div class="uv-loading-spinner" th:text="#{global.loading}"></div>
			<div class="col-sm-12"></div>
			<div class="uv-container">	
				<div class="uv-table-group-procedure-info" style="margin-bottom:20px;margin-top:30px;cursor:auto;">
					<div class="uv-table-title">
						<h6 class="uv-table-header-h6" th:text="'Manual de usuario'"></h6>
						<hr class="uv-procedure-hr">
					</div>
				</div>
				<div class="uv-table-group-procedure row" style="padding:20px;">
					<div class="col-lg-3">  
                    	<div id="treeDocuments"></div>      
                    </div>
                    <div class="col-lg-9">  
                    	<textarea id="documentViewer" style="padding:10px;height:600px;max-height:600px;border-style:solid;border-width:1px;border-color: #ccc;"></textarea>      
                    </div>
				</div>
			</div>
		</div>
	</div>
	
	<!-- contactModal -->
	<div th:replace="~{layouts/common.html :: contactModal}"></div>
	
	<!-- Footer -->
	<footer class="uv-footer uv-footer-text" th:replace="~{layouts/common.html :: footer}"></footer>

	<script th:src="@{/js/jquery/jquery.min.js}"></script>
	<script th:src="@{/js/popper.js}"></script>
	<script th:src="@{/js/bootstrap/bootstrap.min.js}"></script>
	<script th:src="@{/js/fa/all.js}"></script>
	<script th:src="@{/js/jquery/jquery.dataTables.min.js}"></script>
	<script th:src="@{/js/jquery/jquery.dataTables.responsive.min.js}"></script>
	<script th:src="@{/js/jquery/jquery.dataTables.rowReorder.min.js}"></script>
	<script th:src="@{/js/bootstrap/dataTables.bootstrap4.min.js}"></script>
	<script th:src="@{/js/jquery-easing/jquery.easing.min.js}"></script>
	<script th:src="@{/js/saic.js}"></script>
	<script th:src="@{/js/gijgo/gijgo.min.js}"></script>
	<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
	
	
	<script type="text/javascript">

		var locale = '[[${#locale.language}]]';
		var treeDocuments;
		var viewer = new EasyMDE({ element:document.getElementById('documentViewer'),
								   toolbar: false,
								   status: false});
		
		$(document).ready(function(){ 
			layout = new Layout("");
			layout.initTableLayout({paging:false});
			layout.closeLoadingSpinner(".uv-loading-spinner");
			
			treeDocuments = $('#treeDocuments').tree({
				  cascadeSelection: false,
				  cascadeCheck: false,
				  selectionType: 'single',
				  dataSource: [{text:'Manual de Usuario', children:[{text:'<a href="#wiki_user_procedimientos">Procedimientos y tareas</a>'}]}, 
					  		   {text:'Manual UQ', children:[{text:'<a href="#wiki_uq_procedimientos">Gestión de procedimientos</a>'}, 
					  			   							{text:'<a href="#wiki_uq_tareas">Tareas y revisión</a>'}, 
					  			   							{text:'<a href="#wiki_uq_importacion">Importación de datos</a>'}]},
					  		   {text:'Manual de administración', children:[{text:'<a href="#wiki_admin_procedimientos">Procedimientos</a>'}, 
															  			   {text:'<a href="#wiki_admin_plantillas">Plantillas</a>'}, 
															  			   {text:'<a href="#wiki_admin_importacion">Importación de datos</a>'}, 
															  			   {text:'<a href="#wiki_admin_integracion">Integración de datos</a>'}]}]
			});
			
			window.addEventListener('hashchange', function() {
				$.get('/wiki/text/'+$(location).attr('hash').substr(1), function(data){
					viewer.value(data.text);
					if(!viewer.isPreviewActive()){
						viewer.togglePreview();	
					}
				});
			});
			
		});
		
	</script>

</body>

</html>
