<!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"/>

<style>

	.gj-list-md-active{ background-color:transparent !important; }

</style>

<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">Resumen titulaciones</h6>
						<hr class="uv-procedure-hr">
						<span></span>
					</div>
				</div>
				 <div class="uv-table-group-procedure">
					<table class="table table-striped table-bordered display responsive no-wrap">
					    <thead>
					        <tr>
					        	<th class="uv-table">RUCT</th>
					        	<th class="uv-table">Nombre</th>
					        	<th class="uv-table">Tipo</th>
					        	<th class="uv-table">Centro</th>
					        </tr>
					    </thead>
						<tbody>
							<tr th:each="item,inRowID : ${titulacions}">
								<td>
									<a th:href="${'/dashboard/'+item.ruct}"><span th:text="${item.ruct}"></span></a>
								</td>
								<td>
									<span th:text="${#locale.language} == 'es' ? ${item.nomCas}:${item.nomVal}"></span>
								</td>
								<td>
									<span th:text="${item.tambit == 'M' ? 'Máster' : item.tambit == 'G' ? 'Grado' : 'Doctorado'}"></span>
								</td>
								<td>
									<a th:if="${showCentres}" th:href="${'/dashboard/'+item.organ.ruct}"><span th:text="${#locale.language} == 'es' ? ${item.organ.nomCas}:${item.organ.nomVal}"></span></a>
									<span th:unless="${showCentres}" th:text="${#locale.language} == 'es' ? ${item.organ.nomCas}:${item.organ.nomVal}"></span>
								</td>
							</tr>
						</tbody>
					</table>
				</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 locale = '[[${#locale.language}]]';
		var orderCol1 = [3, 'asc'], orderCol2 = [1, 'asc'];
		var cursorPosition;
		
		$(document).ready(function(){ 
			layout = new Layout("No data to display");
			layout.initTableLayout({
				paging: true, 
				language:{
					"lengthMenu": "[[#{admin.stats.table.lengthMenu}]]", 
		            "zeroRecords": "[[#{admin.stats.table.zeroRecords}]]",
		            "info": "[[#{admin.stats.table.info}]]",
		            "infoEmpty": "[[#{admin.stats.table.infoEmpty}]]",
		            "infoFiltered": "[[#{admin.stats.table.infoFiltered}]]",
		            "paginate": {
		                "previous": "[[#{admin.stats.table.previous}]]",
		                "next": "[[#{admin.stats.table.next}]]"
		              }
				},
				searching: true,
				order:[orderCol1, orderCol2],
				orderCellsTop: true,
				fixedHeader: true,
				info: false,
				responsive: true,
				scrollX: true,
				initComplete: function () {
					var api = this.api();
		        	this.api()
		        	.columns()
	                .eq(0)
	                .each(function (colIdx) {
	                    var cell = $('.filters th').eq(
	                        $(api.column(colIdx).header()).index()
	                    );
	                    var title = $(cell).text();
	                    $(cell).html('<input type="text" placeholder="' + title + '" />');
	                    $('input', $('.filters th').eq($(api.column(colIdx).header()).index()))
	                        .off('keyup change')
	                        .on('change', function (e) {
	                            $(this).attr('title', $(this).val());
	                            var regexr = '({search})'; 
	                            cursorPosition = this.selectionStart;
	                            api.column(colIdx)
	                               .search(   
	                                    this.value != ''
	                                        ? regexr.replace('{search}', '(((' + this.value + ')))')	
	                                        : '',
	                                    this.value != '',
	                                    this.value == ''
	                                )
	                                .draw();
	                        })
	                        .on('keyup', function (e) {
								e.preventDefault();
	                            e.stopPropagation();
	                            $(this).trigger('change');
	                            $(this)
	                                .focus()[0]
	                                .setSelectionRange(cursorPosition, cursorPosition);
	                        });
	                });
	    		}
			});
			layout.closeLoadingSpinner(".uv-loading-spinner");		
		});		
		
	</script>

</body>

</html>
