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

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

<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;">
					<div class="uv-table-title">
						<h6 class="uv-table-header-h6">Editor de plantillas</h6>
						<hr class="uv-procedure-hr">
					</div>
				</div>
				
				
				<div class="uv-table-group" id="formFields">
					
				</div>
				
				<div class="uv-table-group">
					<textarea id="editor" name="evidencia_text" th:text="${text}"></textarea>
				</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/datepicker/bootstrap-datepicker.min.js}"></script>
	<script th:src="@{/js/bootstrap-select/bootstrap-select.js}"></script>
	<script th:src="@{/js/bootstrap-select/i18n/defaults-es_ES.js}" th:if="${#locale.language} == 'es'"></script>
	<script th:src="@{/js/bootstrap-select/i18n/defaults-ca_CA.js}" th:if="${#locale.language} != 'es'"></script>
  
	<script type="text/javascript">
		
	
		var action;
		var locale = "[[${#locale.language}]]";
	
		$( document ).ready(function(){ 
			layout = new Layout("");
			layout.initTableLayout({paging:false});
			layout.closeLoadingSpinner(".uv-loading-spinner");
			
			tinymce.init({ 
				selector: '#editor',
				language: locale,
				plugins: 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists charmap quickbars checklist',
				menubar: 'file edit',
				toolbar: 'save | undo redo | bold italic underline strikethrough | forecolor backcolor removeformat | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | charmap | topdf | fullscreen ',
				table_advtab: false,
				table_row_advtab: false,
				table_cell_advtab: false,
				table_toolbar: 'tableinsertrowbefore tableinsertrowafter tabledeleterow',
				content_style: "body { font-size: 10pt; }",
				body_class: 'mceNonEditable',
				setup: (editor) => {
					
					editor.on('keydown', function(e) {
						if (e.keyCode == 8 || e.keyCode == 46) { //backspace and delete keycodes
		                    try {
		                        var elem = tinymce.activeEditor.selection.getNode(); //current caret node
		                        console.log(elem);
		                        if (elem.classList.contains("mceNonEditable")) {
		                        	e.preventDefault();
	                                return false;
		                        }
		                    } catch (e) {console.log(e);}
		                }
					});		
					
					editor.ui.registry.addIcon('save', '<i style="font-size:125%;" class="fas fa-save"></i>')
						
					editor.ui.registry.addButton('topdf', {
						icon: 'print',
						tooltip: 'Imprimir a PDF',
				      	onAction: function(_){ 
				      		print_to_pdf(editor.getContent());
				      	}
				    });	
					
					editor.on('FullscreenStateChanged', function () {
						if(tinymce.activeEditor.plugins.fullscreen.isFullscreen()){
							var e = '<span id="exitFullScreen" class="btn btn-primary pointer" style="position:absolute;display:none;float:right;right:15px;top:25px;color:white;background-color:#007bff;padding:8px;cursor:pointer;" onclick="tinymce.activeEditor.execCommand('+"'mceFullScreen'"+');">Volver a SAIC <i class="fas fa-compress-arrows-alt"></i></span>';
							$(e).appendTo($($('.tox-editor-container').get(0)));
							$('#exitFullScreen').show();
						}
						else{
							$('#exitFullScreen').remove();	
							
						}
					});	
				},
				save_onsavecallback: function(){return false;},
				content_langs: [
				    {title: 'Español', code: 'es'},
				    {title: 'Català', code: 'ca'}],
				image_advtab: true,
				importcss_append: true,
				height: 700,
				image_caption: true,
				quickbars_selection_toolbar: '',
				toolbar_mode: 'sliding',
				contextmenu: ''
			});
			
		});
		
		function print_to_pdf(content){
			$('<form id="tmpDownloadForm" method="post" action="/pdf/preview" target="_blank">' +
			  	'<textarea id="tmpDownloadContent" type="hidden" name="content">' +
			  		tinymce.activeEditor.getContent() +
			  	'</textarea>' +
			  '</form>')
			.appendTo('body')
			.submit()
			.remove();	
		}
			
	</script>

</body>

</html>
