UV-APPS
/
UV_SAIC_GUI


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

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

<style>
	svg[id^="mermaid-"] { min-width: 100%; font-size: 10px;}
	polygon.label-container {
		max-height: 50px !important;
	}
	g.node{
		max-height: 50px !important;
	}

	svg[aria-roledescription="flowchart-v2"]{
		-moz-transform: scale(0.75);
		-webkit-transform: scale(0.75);
		transform: scale(0.75);
		transform-origin: top center;
		top:0;
		margin-top:0px;
		margin-bottom:0px;
	}

	div.mermaid {
		margin-left: 0 !important;
		text-align: center;
		resize:both;
		overflow:auto;
		margin-bottom: 2px;
		position:relative;
		max-height: 600px;
		max-width: 100%;
	}
</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">
					<div class="uv-table-title">
						<span>
							<strong id="procedure_code" th:text="${instance.nomProces}"></strong>
							<strong th:text="${#locale.language} == 'es' ? ${instance.titolCas}:${instance.titolVal}"></strong>
						</span>
						<br>
						<span><strong th:text="#{procedures.center}"></strong>: <span th:text="${#locale.language} == 'es' ? ${instance.centreCas}:${instance.centreVal}"></span></span>
						<br>
						<span th:if="${instance.ruct != null}"><strong th:text="#{procedures.titulation}"></strong>: <a th:href="${'/dashboard/'+instance.ruct}"><span th:text="${#locale.language} == 'es' ? ${instance.titulacioCas}:${instance.titulacioVal}"></span></a></span>
						<span th:if="${instance.ruct == null}"><strong th:text="#{procedures.titulation}"></strong>: <span th:text="${#locale.language} == 'es' ? ${instance.titulacioCas}:${instance.titulacioVal}"></span></span>
						<br>
						<span><strong th:text="#{procedures.year.eval}"></strong>: <span><span th:text="${instance.cursAvaluat-1}"></span> - <span th:text="${instance.cursAvaluat}"></span></span></span>
						(<span th:text="#{procedures.year.act}"></span> <span th:text="${instance.cursActivacio-1}"></span> - <span th:text="${instance.cursActivacio}"></span>)
						<br>
						<p th:text="${#locale.language} == 'es' ? ${instance.descripcioCas}:${instance.descripcioVal}"></p>
					</div>
					<hr class="uv-procedure-hr">
					<div class="uv-table-group" th:if="${#authentication.principal.isAdmin() or #authentication.principal.isGranted()}" style="text-align: right;">
						<div class="btn-toolbar" role="toolbar" style="margin-bottom:-30px;">
							<div class="btn-group mr-2 w-auto ml-auto" role="group" aria-label="First group">
								<button form="formInstanceClear" class="btn btn-secondary pointer" style="width:38px; height:38px;" th:title="#{admin.action.reloadInstance}"><i class="fas fa-redo"></i></button>
								<button form="formInstanceClose" class="btn btn-secondary pointer" style="width:38px; height:38px;" th:title="#{admin.action.closeInstance}"><i class="fas fa-lock"></i></button>
								<button form="formInstanceDelete" class="btn btn-danger pointer" style="width:38px; height:38px;" th:title="#{admin.action.deleteInstance}"><i class="fas fa-trash"></i></button>
							</div>
						</div>
						<form enctype='multipart/form-data' id="formInstanceClear" method="POST" action="/admin/instance/clear" style="display: inline;">
							<input type="hidden" name="idInstancia" th:value="${instance.idInstancia}">
						</form>
						<form enctype='multipart/form-data' id="formInstanceClose" method="POST" action="/admin/instance/close" style="display: inline;">
							<input type="hidden" name="idInstancia" th:value="${instance.idInstancia}">
						</form>
						<form enctype='multipart/form-data' id="formInstanceDelete" method="POST" action="/admin/instance/delete" style="display: inline;" th:if="${#authentication.principal.isAdmin()}">
							<input type="hidden" name="idInstancia" th:value="${instance.idInstancia}">
						</form>
					</div>
				</div>
				<div class="uv-table-group">
					<div class="col-sm-12 uv-table-section">
						<div class="uv-table-header">
							<h6 class="uv-table-header-h6"><span th:text="#{procedures.title.tasks}"></span>&nbsp;&nbsp;&nbsp;(<a href="javascript:void(0)" th:text="#{procedures.title.flow}" onclick="showFlowDiagram();">ver flujo</a>)</h6>
							<hr class="uv-table-header-hr">
							<div class="col">
								<span class="legend-active"><span th:text="#{procedures.legend.active}">Activa</span></span>
								<span class="legend-active-other"><span th:text="#{procedures.legend.other}">No corresponde</span></span>
								<span class="legend-expired"><span th:text="#{procedures.legend.expired}">Atrasada</span></span>
								<span class="legend-blocked"><span th:text="#{procedures.legend.blocked}">No procede</span></span>
								<span class="legend-done"><span th:text="#{procedures.legend.done}">Realizada</span></span>
							</div>
						</div>
					</div>
					<div id="flowDiagramContainer" class="flowDiagramContainer" style="display: none;">
						<button type="button" class="close" onclick="hideFlowDiagram();" style="margin-top:-50px;">
							<span aria-hidden="true" style="font-size:125%;"><i class="fas fa-window-close"></i></span>
						</button>
						<div class="btn-toolbar mermaid-tools" role="toolbar" style="float:left;">
							<div class="btn-group w-auto ml-auto pointer" role="group" aria-label="downloadDiagram">
								<span class="btn btn-secondary pointer" style="width:38px; height:38px; padding:6px" onclick="downloadFlowDiagram();"><i class="fas fa-download"></i></span>
							</div>
						</div>
						<div class="mermaid" th:text="${flow}"></div>
					</div>
				</div>
				<div class="uv-accordion" style="margin-top:20px;text-align:center;">
					<div id="accordion">
						<div class="card" th:each="item,i : ${tasks}">
							<input type="hidden" id="activeOptions" th:if="${item.estat == 'A'}" th:value="${item.opcions}">
							<div class="card-header pointer" 
								th:classappend="${(item.estat == 'A' and item.isAssignedToUser?'card-header-active ':'') + (item.estat == 'A' and not item.isAssignedToUser?'card-header-active-other ':'') + (item.isExpired and item.estatInstancia == 'A' and item.estat == 'A'?'card-header-expired ':'') + (item.estat == null?'card-header-blocked ':'')}" 
								th:attr="id='heading'+${i.index},data-target='#collapse'+${i.index},aria-controls='#collapse'+${i.index}, data-toggle=${item.estat != null or #authentication.principal.isAdmin() or #authentication.principal.isGranted() ? 'collapse' : ''}" 
								aria-expanded="true" onclick="showComments();">
								<span style="float:left;font-size: 21px; margin-left:-10px;margin-top:-10px;" th:if="${item.estat != null or #authentication.principal.isAdmin() or #authentication.principal.isGranted()}"><i class="fas fa-caret-down"></i></span>
								<h6 style="text-align:left; margin-left:15px;">
									<strong th:text="${i.index+1}+'/'+${#lists.size(tasks)}"></strong><strong> - </strong>
									<span th:text="${#locale.language} == 'es' ? ${item.titolCas}:${item.titolVal}"></span>
									<br>
									<span th:text="#{procedures.status}"></span>: 
									<span th:if="${item.estat == 'A'}" th:text="#{procedures.status.a}"></span>
									<span th:if="${item.estat == 'S'}" th:text="#{procedures.status.s}"></span>
									<span th:if="${item.estat == 'N'}" th:text="#{procedures.status.n}"></span>
									<span th:if="${item.estat == 'E'}" th:text="#{procedures.status.e}"></span>
									<span th:if="${item.estat == 'F'}" th:text="#{procedures.status.f}"></span>
									<span th:if="${item.estat == null}" th:text="#{procedures.status.i}"></span>
									<span>
										<br>
										<span th:text="#{procedures.assignedTo}"></span>: 
										<span th:text="${#locale.language} == 'es' ? ${item.descripcioRolCas}:${item.descripcioRolVal}"></span>
									</span>
									<br>
									
									<span th:if="${item.estat == 'A' or item.estat == null}"><span th:text="#{procedures.dateLimit}"></span>: <span th:text="${item.dataLim}"></span></span>
									<span style="float: right; margin-top:-5px;" th:if="${item.estat == 'A' and item.isAssignedToUser}" th:attr="title=#{procedures.status.title.a}"><i class="fa fa-play-circle"></i></span>
									<span style="float: right; margin-top:-5px;" th:if="${item.estat == 'A' and not item.isAssignedToUser}" th:attr="title=#{procedures.status.title.o}"><i class="fa fa-exclamation-triangle"></i></span>
									<span style="float: right; margin-top:-5px;" th:if="${item.estat == null}"><i class="fa fa-lock" th:attr="title=#{procedures.status.title.p}"></i></span>
									<span style="float: right; margin-top:-5px;" th:if="${item.estat != null and item.estat != 'A'}" th:attr="title=#{procedures.status.title.r}"><i class="fa fa-check"></i></span>
									<span style="float: right; margin-top:-5px; margin-right:10px;" th:if="${(item.estat != 'A' and item.estat != null and #lists.contains({1, 11, 12, 13, 14, 15, 21, 22}, item.tipus)) or (item.estat == 'A' and item.evidencia != null)}">
										<a th:href="${'/download/'+item.idInstanciaTasca}" target="_blank"><i class="fas fa-file-pdf" style="font-size:200%;margin-top:-10px;"></i></a>
									</span>
								</h6>
							</div>
							<div th:attr="id='collapse'+${i.index},aria-labelledby='heading'+${i.index}" class="collapse" data-parent="#accordion">
								<div class="card-body uv-card-body">
									<div id="taskAdminActions" th:if="${#authentication.principal.isAdmin() or #authentication.principal.isGranted()}" style="margin-bottom: 20px;">
										<div class="btn-toolbar" role="toolbar" style="margin-top:-15px; margin-bottom:-15px;">
											<div class="btn-group mr-2 w-auto ml-auto" role="group" aria-label="First group">
												<button type="submit" th:attr="form=${'formTaskReload'+item.idInstanciaTasca}" class="btn btn-secondary pointer" style="width:38px; height:38px;" th:title="#{admin.action.reloadTask}"><i class="fas fa-redo"></i></button>
												<button type="submit" th:attr="form=${'formTaskReactivate'+item.idInstanciaTasca}" class="btn btn-secondary pointer" style="width:38px; height:38px;" th:title="#{admin.action.reactivate}" th:if="${item.estat != 'A' and item.estat != null}"><i class="fas fa-lock-open"></i></button>
												<button type="submit" th:attr="form=${'formTaskEdit'+item.idInstanciaTasca}" class="btn btn-secondary pointer" style="width:38px; height:38px;" th:title="#{admin.action.edit}" th:if="${item.estat != 'A' and item.estat != null and #lists.contains({11, 15}, item.tipus)}"><i class="fas fa-edit"></i></button>
												<button type="submit" th:attr="form=${'formShowDrafts'+item.idInstanciaTasca}" class="btn btn-secondary pointer" style="width:38px; height:38px;" th:title="'Ver borradores'" th:if="${item.estat != null and #authentication.principal.isAdmin() and #lists.contains({11, 15}, item.tipus)}"><i class="fas fa-code-branch"></i></button>
												<button th:attr="id=${'filepicker-creator'+item.idInstanciaTasca}" class="btn btn-secondary pointer" style="width:38px; height:38px;" th:title=#{admin.action.attach} th:onclick="'createFilepicker(\''+${instance.idInstancia}+'\', \''+${item.idInstanciaTasca}+'\')'" th:if="${item.estat != 'A' and item.estat != null and #lists.contains({1, 11, 12, 13, 14, 15}, item.tipus)}"><i class="fas fa-file-upload"></i></button>
											</div>
										</div>				
										<form th:id="${'formTaskReload'+item.idInstanciaTasca}" enctype='multipart/form-data' method="POST" action="/admin/instance/task/reload" style="display: inline;">
											<input type="hidden" name="idInstanciaTasca" th:value="${item.idInstanciaTasca}">
										</form>
										<form th:id="${'formTaskReactivate'+item.idInstanciaTasca}" enctype='multipart/form-data' method="POST" action="/admin/instance/task/reactivate" style="display: inline;" th:if="${item.estat != 'A'}">
											<input type="hidden" name="idInstanciaTasca" th:value="${item.idInstanciaTasca}">
										</form>
										<form th:id="${'formTaskEdit'+item.idInstanciaTasca}" enctype='multipart/form-data' method="POST" action="/admin/instance/task/edit" style="display: inline;" th:if="${item.estat != 'A' and #lists.contains({11, 15}, item.tipus)}">
											<input type="hidden" name="idInstanciaTasca" th:value="${item.idInstanciaTasca}">
										</form>
										<form th:id="${'formShowDrafts'+item.idInstanciaTasca}" enctype='multipart/form-data' method="GET" onsubmit="target_popup(this);" th:action="${'/procedure/drafts/'+item.idInstanciaTasca}" target="_blank" style="display: inline;" th:if="${#authentication.principal.isAdmin() and #lists.contains({11, 15}, item.tipus)}">
										</form>
									</div>					
									<div class="row" style="margin-bottom:20px;text-align: left;width: 90%;">
										<span th:text="${#locale.language} == 'es' ? ${item.descripcioCas}:${item.descripcioVal}"></span>
									</div>
									<div class="row" th:if="${item.estat == 'A'}">
										<script>
											var typeActive = "[[${item.tipus}]]";
											var idInstanciaTasca = "[[${item.idInstanciaTasca}]]";
										</script>
										<div class="card-body-inner-action" th:if="${item.isAssignedToUser or #authentication.principal.isAdmin() or #authentication.principal.isGranted()}">
											<form enctype='multipart/form-data' method="POST" th:action="${'/procedure/'+instance.idInstancia}">
												<input class="active-task" type="hidden" name="taskid" th:value="${item.idInstanciaTasca}">
												<input class="active-task" type="hidden" name="procid" th:value="${instance.idInstancia}">
												
												<div class="card-body-inner-action" th:if="${item.tipus == 4}"> </div>
												
												<div class="card-body-inner-action" th:if="${item.tipus == 2}">
													<span id="action_y" class="btn btn-y pointer" th:text="#{procedures.btn.yes}" onclick="click_y();"></span> <span style="margin-left:10px;margin-right:10px;"></span>
													<span id="action_n" class="btn btn-n pointer" th:text="#{procedures.btn.no}" onclick="click_n();"></span>
													<input id="response" name="response" value="" required style="opacity: 0;">
												</div>
												
												<div class="card-body-inner-action" th:if="${item.tipus == 11 or item.tipus == 15}">
													<textarea id="editor" name="evidencia_text" th:text="${item.text}"></textarea>
													<div style="text-align: left;">
														<small style="text-align: left;font-weight: bold;"><span th:text="#{procedures.autosave.lastdate}">Última modificación</span>: <span th:if="${item.dataMod != null}" id="lastmoddate" th:text="${item.dataMod}"></span><span th:if="${item.dataMod == null}" id="lastmoddate" th:text="#{procedures.autosave.none}"></span></small>
													</div>
												</div>
												
												<div class="card-body-inner-action" th:if="${#lists.contains({1, 12, 13, 14}, item.tipus)}">
													<div class="row">
														<div class="col" style="text-align: left;margin-bottom:20px;" th:if="${!#strings.equals(item.codiEvidencia, '0')}">
															<span th:text="#{procedures.template}"></span>: 
															<a th:href="${'/download/template/'+item.idInstanciaTasca}" target="_blank">
																<strong th:text="${item.codiEvidencia}"></strong> <span th:text="${#locale.language} == 'es' ? ${item.nomEvidenciaCas}:${item.nomEvidenciaVal}"></span>
																<i class="fas fa-file-pdf"></i>
															</a>
														</div>
													</div> 
													<div class="file-loading">
													    <input id="filepicker" multiple type="file" name="evidencias">
													</div>
													<br>
													<div class="row card-body-up-btn" th:if="${item.oldEvidences != null}">
														<a data-toggle="collapse" th:attr="href='#collapseEvidences'+${item.idInstanciaTasca}, aria-controls='#collapseEvidences'+${item.idInstanciaTasca}" 
															role="button" aria-expanded="false" th:text="#{procedures.olderEvidences}">
														    Evidencias generadas en el proceso anteriormente
														</a>
														<div class="collapse" th:attr="id='collapseEvidences'+${item.idInstanciaTasca}" style="width:95%;">
															<div class="card card-body" th:each="ev : ${item.oldEvidences}">
																<a th:href="${'/download/'+ev.idTascai}" target="_blank"><span></span> <span th:text="${ev.codiEvidencia}"></span> <span th:text="${#locale.language} == 'es' ? ${ev.nomEvidenciaCas}:${ev.nomEvidenciaVal}"></span> [<span th:text="${#locale.language} == 'es' ? 'Curso evaluado ':'Curs avaluat '"></span><span th:text="${ev.curs-1}"></span> - <span th:text="${ev.curs}"></span>]</a>
															</div>
														</div>
													</div>
												</div>
												<div class="row card-body-up-btn">
													<span class="btn btn-primary pointer" th:if="${#lists.contains({11, 15}, item.tipus)}" style="margin-right:10px;" onclick="saveEditorWithConfirmation();"><i class="fas fa-save"></i> <span th:text="#{procedures.btn.draft}">Guardar borrador</span></span>
													<button class="btn btn-success" th:if="${not #lists.contains({1, 11, 12, 13, 14, 15}, item.tipus)}">Confirmar</button>
													<button class="btn btn-success" th:if="${#lists.contains({11, 15}, item.tipus)}" data-toggle="confirmation" th:attr="data-title=#{procedures.editor.confirm}"><i class="fas fa-file-import"></i> Enviar</button>
													<span class="btn btn-success pointer" th:if="${#lists.contains({1, 12, 13, 14}, item.tipus)}" onclick="$('#filepicker').fileinput('upload');">Confirmar</span>
												</div>
											</form>
										</div>
									</div>
									<div class="row" th:if="${item.estat != 'A' and item.estat != null and (#lists.contains({1, 12, 13, 14, 22}, item.tipus)) and (#authentication.principal.isGranted() or #authentication.principal.isAdmin())}">
									    <!-- Añadir más evidencias (solo uq y admin) -->
										<form class="col" enctype='multipart/form-data' method="POST" th:action="${'/procedure/'+instance.idInstancia}">
											<input type="hidden" name="taskid" th:value="${item.idInstanciaTasca}">
											<input type="hidden" name="procid" th:value="${instance.idInstancia}">
											<div class="additional-file-container" th:attr="id='additionalFileContainer'+${item.idInstanciaTasca}"></div>
										</form>
									</div>
									<div class="row" th:unless="${item.estat == 'A'}">
										<form enctype='multipart/form-data' method="POST" action="/admin/instance/task/clear" style="display:inline; margin-right:20px;" th:if="${item.estat != null and (#authentication.principal.isAdmin())}">
											<input type="hidden" name="idInstanciaTasca" th:value="${item.idInstanciaTasca}">
											<div class="btn-toolbar" role="toolbar" style="margin-top:20px;">
												<div class="btn-group w-auto ml-auto" role="group" aria-label="First group" style="margin-left:0px;">
													<button class="btn btn-danger pointer" style="width:30px; height:30px; padding:0;" th:title="#{admin.action.deleteTask}"><i class="fas fa-trash"></i></button>
												</div>
											</div>											
										</form>
										<span style="text-align:left;" th:if="${item.estat != null}">
											<span th:if="${item.tipus == 4}"> <!-- avanzar -->
												<span th:text="#{procedures.done.response}"></span>: <span th:text="#{procedures.status.f}"></span>
											</span>
											<span th:if="${item.tipus == 2 and item.estat == 'S'}"> <!-- pregunta resp si -->
												<span th:text="#{procedures.done.response}"></span>: <span th:text="#{procedures.done.response.s}"></span>
											</span>
											<span th:if="${item.tipus == 2 and item.estat == 'N'}"> <!-- pregunta resp no -->
												<span th:text="#{procedures.done.response}"></span>: <span th:text="#{procedures.done.response.n}"></span>
											</span>
											<span th:if="${#lists.contains({1, 11, 12, 13, 14, 15, 21, 22}, item.tipus)}"> <!-- evidencia -->
												<span th:text="#{procedures.done.evidence}"></span>: 
												<a th:href="${'/download/'+item.idInstanciaTasca}" target="_blank">
													<strong th:text="${item.codiEvidencia}"></strong> <span th:text="${#locale.language} == 'es' ? ${item.nomEvidenciaCas}:${item.nomEvidenciaVal}"></span>
													<i class="fas fa-file-pdf"></i>
												</a>
											</span>
											<br>
											<span><span th:text="#{procedures.done.user}"></span>: <span th:text="${item.usuariFet}"></span></span>
											<br>
											<span><span th:text="#{procedures.done.date}"></span>: <span th:text="${item.dataFet}"></span></span>
										</span>
									</div>
									<div class="container" th:if="${item.versions != null}" style="margin-top:25px;text-align:left;margin-left: 0px;">
										<strong th:if="${#lists.size(item.versions) > 0}" th:text="#{procedures.otherActions}">Acciones realizadas anteriormente</strong>
										<br>
										<div class="row" style="text-align:left;" th:if="${#lists.size(item.versions) > 0}" th:each="version,i : ${item.versions}">
											<hr class="uv-procedure-hr" style="width:100%;text-align:left;margin-left: 0px;">
											<div class="col-1" th:if="${#authentication.principal.isAdmin() or #authentication.principal.isGranted()}" style="flex:0 0 0;width:50px !important;padding:0;">
												<form enctype='multipart/form-data' method="POST" action="/admin/instance/task/remove" style="display: inline;">
													<input type="hidden" name="idInstanciaTasca" th:value="${version.idInstanciaTasca}">
													<div class="btn-toolbar" role="toolbar" style="margin-top:20px;">
														<div class="btn-group w-auto ml-auto" role="group" aria-label="First group" style="margin-left:0px;">
															<button class="btn btn-danger pointer" style="width:30px; height:30px; padding:0;" th:title="#{admin.action.deleteTask}"><i class="fas fa-trash"></i></button>
														</div>
													</div>
												</form>
											</div>
											<div class="col-11">
												<span th:if="${version.tipus == 4}"> <!-- avanzar -->
													<span th:text="#{procedures.done.response}"></span>: <span th:text="#{procedures.status.f}"></span>
												</span>
												<span th:if="${version.tipus == 2 and version.estat == 'S'}"> <!-- pregunta resp si -->
													<span th:text="#{procedures.done.response}"></span>: <span th:text="#{procedures.done.response.s}"></span>
												</span>
												<span th:if="${version.tipus == 2 and version.estat == 'N'}"> <!-- pregunta resp no -->
													<span th:text="#{procedures.done.response}"></span>: <span th:text="#{procedures.done.response.n}"></span>
												</span>
												<span th:if="${version.tipus == 1 or version.tipus == 11 or version.tipus == 15}"> <!-- evidencia -->
													<span th:text="#{procedures.done.evidence}"></span>: 
													<a th:href="${'/download/'+version.idInstanciaTasca}" target="_blank">
														<strong th:text="${version.codiEvidencia}"></strong> <span th:text="${#locale.language} == 'es' ? ${version.nomEvidenciaCas}:${version.nomEvidenciaVal}"></span>
														<i class="fas fa-file-pdf"></i>
													</a>
												</span>
												<br>
												<span><span th:text="#{procedures.done.user}"></span>: <span th:text="${version.usuariFet}"></span></span>
												<br>
												<span><span th:text="#{procedures.done.date}"></span>: <span th:text="${version.dataFet}"></span></span>
											</div>
											<br>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div> 
				<div class="uv-table-group procedure-status" th:if="${instance.estat == 'F'}">
					<strong th:text="#{procedures.closed}"></strong>
				</div>
				<div class="uv-table-group procedure-status" th:if="${instance.estat == 'C'}">
					<strong th:text="#{procedures.cancelled}"></strong>
				</div>
				<div class="uv-table-group procedure-status" th:if="${location == 'supervision'}">
					<a href="/supervision/search" class="btn btn-primary pointer" th:text="#{procedures.back}">Volver</a>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="flowDiagramModal" tabindex="-1" role="dialog" aria-labelledby="flowDiagramModal" aria-hidden="true">
		<div class="modal-dialog modal-xl" >
		  <div class="modal-content">
			  <div class="modal-header">
				  <h5 class="modal-title">Flujo del procedimiento</h5>
				  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
					  <span aria-hidden="true">&times;</span>
				  </button>
			  </div>
			  <div class="modal-body">
				<div class="mermaid-def" th:text="${flow}" style="display:none;"></div>
				<div id="flowDiagram" class="mermaid"></div>
			  </div>
			  <div class="modal-footer">
				  <button type="button" class="btn btn-secondary" data-dismiss="modal" th:text="#{global.cancel}">Cerrar</button>
			  </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/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/fileinput/js/fileinput.min.js}"></script>
	<script th:src="@{/js/fileinput/themes/fas/theme.js}"></script>
	<script th:src="@{/js/fileinput/js/locales/es.js}" th:if="${#locale.language == 'es'}"></script>
	<script th:src="@{/js/fileinput/js/locales/ca.js}" th:if="${#locale.language != 'es'}"></script>	
	<script th:src="@{/js/confirmation/bootstrap-confirmation.js}"></script>
	<script src="https://cdn.jsdelivr.net/npm/mermaid@11.3.0/dist/mermaid.min.js"></script>

  
  	<script th:inline="javascript" th:if="${#authentication.principal.isAdmin()}">
  		var tinyobjectresizing = true;
  	</script>
    
  	<script th:inline="javascript" th:if="${#authentication.principal.isAdmin() or #authentication.principal.isGranted()}">
	  	if (!window.Worker) {
	  		alert(/*[[#{procedures.nosupported}]]*/);
			window.location = '/';
		}
  		var aliveWorker; 
  		var saveWorker;
	    function confirmDelete(){ }
	    function confirmClear(){ }
	    function setSaveInterval(){ console.log('Autosave disabled'); }
	    function setAliveInterval(){
	    	console.log('KeepAlive enabled');
	    	aliveWorker = new Worker(/*[[@{/js/workers/alive_worker.js}]]*/);
	    	aliveWorker.onmessage = keepalive;
	    }
	    var tinyplugins = '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 tinycomments codeeditor paste';
	    var tinytoolbar = 'save | undo redo | bold italic underline strikethrough forecolor backcolor removeformat | fontfamily fontsize | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist checklist | showcomments | btn-editable btn-noneditable insert-data | codeeditor | topdf fullscreen ';
    	var tinymenu = 'file edit view insert format tools table help';
    	var tinytable = 'table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol';
    	var tinycontextmenu = 'link table useBrowserSpellcheck';
    	var tinytableappearance = true;
    	var tinytableclass = [
    		{title: 'Normal', value: ''},
		    {title: 'Editable', value: 'mceEditable'},
		    {title: 'No editable', value: 'mceNonEditable'},
		    {title: 'Ignorar en el PDF', value: 'mceNonEditable pdfignore'}
		];
    	var tinytableresizebars = true;
    	var tinyadvtab = true;
    	var tinyobjectresizing = false;
		var tinypasteplain = false;
		var tinypasteremovestyles = true;
    	
    	function tinyconfigure(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
                        if (elem.classList.contains("mceNonEditable")) {
                        	e.preventDefault();
                            return false;
                        }
                    } catch (e) {console.log(e);}
                }
			});
			
			editor.on('TableModified', function(e) {
				editor.setContent(editor.getContent());	      
			});
			
			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();	
				}
			});	
			
			editor.ui.registry.addButton('btn-editable', {
				icon: 'unlock',
				tooltip: 'Desbloquear contenido',
		      	onAction: function(_){ 
		      		var ns = $(editor.selection.getSelectedBlocks()).each(function(b){
		      			$(this).removeClass('mceEditable').removeClass('mceNonEditable').addClass('mceEditable')
		      		});
		      		editor.setContent(editor.getContent());	      		
		      	}
		    });
			
			editor.ui.registry.addButton('btn-noneditable', {
				icon: 'lock',
				tooltip: 'Bloquear contenido',
		      	onAction: function(_){ 
		      		var ns = $(editor.selection.getSelectedBlocks()).each(function(b){
		      			$(this).removeClass('mceEditable').removeClass('mceNonEditable').addClass('mceNonEditable')
		      		});
		      		editor.setContent(editor.getContent());
		      	}
		    });
			
			editor.ui.registry.addMenuItem("useBrowserSpellcheck", {
				text: "Use `Ctrl + Click derecho` para acceder al corrector",
				onAction: function () {
					editor.notificationManager.open({
						text:"Para usar el corrector, mantenga pulsada la tecla Control (Ctrl) y haga click derecho sobre la palabra.",
						type: "info",
						timeout: 5000,
						closeButton: true
					});
				}
			});
			
			editor.ui.registry.addContextMenu("useBrowserSpellcheck", {
				update: function (node) {
					return editor.selection.isCollapsed() ? ["useBrowserSpellcheck"] : [];
				}
			});
			
    	}
    </script>
    
    <script th:inline="javascript" th:unless="${#authentication.principal.isAdmin() or #authentication.principal.isGranted()}">
	    if (!window.Worker) {
	    	alert(/*[[#{procedures.nosupported}]]*/);
			window.location = '/';
    	}
    	var aliveWorker; 
		var saveWorker;
    	function confirmDelete(){ }
	    function confirmClear(){ }
	    function setSaveInterval(){
	    	console.log('AutoSave enabled');
	    	saveWorker = new Worker(/*[[@{/js/workers/autosave_worker.js}]]*/);
	    	saveWorker.onmessage = triggerSave;
	    }
	    function setAliveInterval(){
	    	console.log('KeepAlive enabled');
	    	aliveWorker = new Worker(/*[[@{/js/workers/alive_worker.js}]]*/);
	    	aliveWorker.onmessage = keepalive;
	    }
	    var tinyplugins = '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 tinycomments paste';
	    var tinytoolbar = 'save | undo redo | bold italic underline strikethrough removeformat | forecolor backcolor | fontfamily fontsize | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | showcomments | charmap | topdf | fullscreen ';
    	var tinymenu = 'file edit';
    	var tinytable = 'tableinsertrowbefore tableinsertrowafter tabledeleterow';
    	var tinycontextmenu = '';
    	var tinytableappearance = false;
    	var tinytableclass = [];
    	var tinytableresizebars = false;
    	var tinyadvtab = false;
    	var tinyobjectresizing = false;
		var tinypasteplain = false;
		var tinypasteremovestyles = true;

    	function tinyconfigure(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();	
					
				}
			});	
    	}
	</script>
  
	<script type="text/javascript">
		
	var locale = "[[${#locale.language}]]";
	var fileInvalid = "[[#{procedures.extensionAlert}]]";
	var fullname = "[[${#authentication.principal.nom + ' ' + #authentication.principal.cognoms}]]";
	var username = "[[${#authentication.principal.usuari}]]";
	var msgsave = "[[#{procedures.editor.msgsave}]]";
	var expiredTxt = "[[#{procedures.session.expired}]]";
	var layout;
	var lastActiveTime = new Date().getTime();
	var autosaveTriggered = false;

	mermaid.initialize({ startOnLoad: false, theme: "default", flowchart: { diagramPadding: 5, useMaxWidth:false, htmlLabels:true, wrap: true, wrappingWidth: 750 } });
	
	$(document).ready(function(){ 
		
		setAliveInterval();
		setSaveInterval();
		
		layout = new Layout("");
		layout.initTableLayout({paging:false});
		layout.closeLoadingSpinner(".uv-loading-spinner");
		$('#extensionAlert').hide();
				
		var extensions = ($('#activeOptions').val().replace('.','') === '') ? [] : $('#activeOptions').val().replace('.','').split(';');
		if(extensions.length < 1){
			extensions = ['pdf'];
			if (typeof typeActive !== 'undefined') {
				if(typeActive == 12 | typeActive == 14){
			    	extensions = ['pdf', 'doc', 'docx', 'odt'];
				}
			}
		}
		
		$("#filepicker").fileinput({
			uploadUrl: "/procedure/files/"+$('input[name=procid].active-task').val(),
			uploadExtraData: {taskid:$('input[name=taskid].active-task').val()},
		    uploadAsync: true,
			maxAjaxThreads: 1,
		    showUpload: false,
		    required: true,
		    browseOnZoneClick: true,
		    language: locale,
		    allowedFileExtensions: extensions,
		    previewFileIcon: '<i class="fas fa-file"></i>',
		    theme: 'fas',
		    allowedPreviewTypes: null,
		    removeFromPreviewOnError: true,
		    initialPreviewShowDelete: true,
		    msgFileRequired: locale == 'es'?'Debe seleccionar la evidencia':'Ha de seleccionar l\'evidència',
		    previewFileIconSettings: {
		        'pdf': '<i class="fas fa-file-pdf text-danger"></i>',
		    },
		    fileActionSettings: {
		    	showRemove: true,
		    	showZoom: false,
		    	showUpload: false,
		    	showDrag: false,
		    	removeIcon: '<i class="fas fa-trash"></i>'
		    }
		});
		
		$('#filepicker').on('filebatchuploadcomplete', function(event, data, previewId, index) {
            location.reload(); 
        });
		
		tinymce.init({ 
			selector: '#editor',
			language: locale,
			browser_spellcheck: true,
			plugins: tinyplugins,
			menubar: tinymenu,
			toolbar: tinytoolbar,
			table_toolbar: tinytable,
			tinycomments_author: username,
			tinycomments_author_name: fullname,
			tinycomments_mode: 'embedded',
			tinycomments_can_delete: function(req, done, fail){ done({canDelete: true}); },
			table_advtab: tinyadvtab,
			table_row_advtab: tinyadvtab,
			table_cell_advtab: tinyadvtab,
			table_sizing_mode: 'fixed',
			table_default_styles: {
			    width: '297mm'
			},
			content_style: "body { width: 297mm; max-width: 297mm; font-size: 10pt; font-family: Verdana, Geneva, sans-serif; font-style: normal; font-variant: normal;}",
			font_formats: "Arial=arial,helvetica,sans-serif; Verdana=verdana,geneva;", 
			font_size_formats: '8pt 10pt 12pt 14pt 16pt 18pt 24pt',
			setup: tinyconfigure,
			save_onsavecallback: function(){
				if(autosaveTriggered){
					save_content(false);
					autosaveTriggered = false;
				}
				else{
					save_content(true);
				}
			},
			content_langs: [
			    {title: 'Español', code: 'es'},
			    {title: 'Valencià', code: 'ca'}],   
			image_advtab: true,
			importcss_append: true,
			height: 700,
			image_caption: true,
			quickbars_selection_toolbar: '',
			toolbar_mode: 'sliding',
			contextmenu: tinycontextmenu,
			table_appearance_options: tinytableappearance,
			table_class_list: tinytableclass,
			table_resize_bars: tinytableresizebars,
			verify_html: false,
			cleanup: false,
			valid_elements: '+*[*]',
			paste_as_text: tinypasteplain,
			paste_remove_styles: tinypasteremovestyles,
			paste_strip_class_attributes: true
		});
		
		$('[data-toggle=confirmation]').confirmation({
		    rootSelector: '[data-toggle=confirmation]',
		    container: 'body',
		    btnOkClass: 'btn btn-sm btn-success',
		    btnOkLabel: 'Sí',
		    btnCancelClass: 'btn btn-sm btn-danger',
		    btnCancelLabel: 'No',
		  });		
		  		
	});
	
	$('#customFile').on("change", function() {
		var fileName = $(this).val().split("\\").pop();
		$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
		if (fileName.split('.').pop().toLowerCase() == "pdf"){
		    $('#custom-file-label').removeClass('file-invalid');
		}
		else{
			$('#custom-file-label').text(fileInvalid)
			$('#custom-file-label').addClass('file-invalid');
			$('#customFile').val("");
		}

	});
	
	function openProcedure(id){
		window.location.replace('/procedure/'+id);
	}
	
	function click_y(){
		$('#action_n').removeClass('btn-n-active');
		$('#action_y').addClass('btn-y-active');
		$('#response').val(1);
	}
	function click_n(){
		$('#action_y').removeClass('btn-y-active');
		$('#action_n').addClass('btn-n-active');
		$('#response').val(0);
	}
	
	function triggerSave(){
		autosaveTriggered = true;
		tinymce.activeEditor.execCommand('mceSave');
		console.log('Autosave triggered');
	}
	
	function keepalive(){
		$.get("/keepalive")
			.done(function(data){
				if(data != 'alive'){
					alert(expiredTxt.replaceAll("&#39;", "'"));
					saveWorker.terminate();
					aliveWorker.terminate();
					window.location.reload();
				}
			})
			.fail(function() {
				alert(expiredTxt.replaceAll("&#39;", "'"));
				saveWorker.terminate();
				aliveWorker.terminate();
				window.location.reload();
			});
	}
	
	function saveEditorWithConfirmation(){
		tinymce.activeEditor.setDirty(true);
		tinymce.activeEditor.execCommand('mceSave');
		alert(msgsave);
	}
	
	function createFilepicker(procId, taskId){
		$('.additional-file-container').empty();
		$('#additionalFileContainer'+taskId).html('<input class="additional-file-input" id="filepicker'+taskId+'" multiple type="file" name="evidencias">'
			+'<br><span class="btn btn-success pointer" onclick="$(\'#filepicker'+taskId+'\').fileinput(\'upload\');">Confirmar</span><br><br><br>');
		$("#filepicker"+taskId).fileinput({
			uploadUrl: "/procedure/files/"+procId,
			uploadExtraData: {taskid:taskId},
		    uploadAsync: true,
		    showUpload: true,
		    required: true,
		    browseOnZoneClick: true,
		    language: locale,
		    allowedFileExtensions: ['pdf'],
		    previewFileIcon: '<i class="fas fa-file"></i>',
		    theme: 'fas',
		    allowedPreviewTypes: null,
		    removeFromPreviewOnError: true,
		    initialPreviewShowDelete: true,
		    msgFileRequired: locale == 'es'?'Debe seleccionar la evidencia':'Ha de seleccionar l\'evidència',
		    previewFileIconSettings: {
		        'pdf': '<i class="fas fa-file-pdf text-danger"></i>',
		    },
		    fileActionSettings: {
		    	showRemove: true,
		    	showZoom: false,
		    	showUpload: false,
		    	showDrag: false,
		    	removeIcon: '<i class="fas fa-trash"></i>'
		    }
		});
		
		$('#filepicker'+taskId).on('filebatchuploadsuccess', function(event, data) {
		    var form = data.form, files = data.files, extra = data.extra,
		        response = data.response, reader = data.reader;
		    window.location.href = window.location.href;
		});
		
	}
		
	
	function save_content(manualDraftSave){
		$.post("/procedure/save/"+idInstanciaTasca, 
			   {text:tinymce.activeEditor.getContent(),
				manual: manualDraftSave
			})
			.done(function(d){
				$('#lastmoddate').text(d);
				console.log('content saved at'+d);
			});	
	}
	
	function print_to_pdf(content){
		$('<form id="tmpDownloadForm" method="post" action="/download/pdf/preview" target="_blank">' +
			'<input type="text" name="idtascai" value="'+$('input[name="taskid"]').val()+'" />' +
		  	'<textarea id="tmpDownloadContent" type="hidden" name="content">' +
		  		tinymce.activeEditor.getContent() +
		  	'</textarea>' +
		  '</form>')
		.appendTo('body')
		.submit()
		.remove();	
	}
	
	function showComments(){
		setTimeout(function(){
			if(typeActive == 15){
				tinymce.activeEditor.execCommand("ToggleSidebar", false, "showcomments");
			}
		}, 700);	
	}

	function target_popup(form) {
		//window.open('', 'formpopup', 'width=1350,height=800,resizeable,scrollbars');
		window.open('', 'formpopup', 'width=1350,height=800,resizeable');
		form.target = 'formpopup';
	}

	function showFlowDiagram(){
		if($('#flowDiagramContainer').is(":visible")){
			hideFlowDiagram();
		}
		else{
			$('#flowDiagramContainer').show();
			mermaid.run({querySelector:'.mermaid'});
		}
	}

	function hideFlowDiagram(){
		$('#flowDiagramContainer').hide();
	}

	function downloadFlowDiagram() {
		const svgElement = document.querySelector('svg[aria-roledescription="flowchart-v2"]');
		const filename = 'flujo_procedimiento_'+$('#procedure_code').text();

		if(!svgElement) {
			console.error('No se encontró ningún SVG.');
			return;
		}

		const clonedSvg = svgElement.cloneNode(true);
		const width = parseInt(clonedSvg.getAttribute('width') || 800);
		const height = parseInt(clonedSvg.getAttribute('height') || 600);

		// Embebemos los estilos de Mermaid en el SVG
		const style = document.createElement('style');
		style.textContent = Array.from(document.styleSheets)
			.filter(s => !s.href || s.href.startsWith(window.location.origin))
			.map(sheet => {
				try {
					return Array.from(sheet.cssRules).map(rule => rule.cssText).join('\n');
				} catch (e) {
					return '';
				}
			})
			.join('\n');
		clonedSvg.insertBefore(style, clonedSvg.firstChild);
		const svgData = new XMLSerializer().serializeToString(clonedSvg);
		const svgBase64 = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData)));

		const img = new Image();
		img.onload = function () {
			const canvas = document.createElement('canvas');
			canvas.width = width;
			canvas.height = height;
			const ctx = canvas.getContext('2d');
			ctx.fillStyle = '#ffffff';
			ctx.fillRect(0, 0, canvas.width, canvas.height);

			ctx.drawImage(img, 0, 0);

			const pngUrl = canvas.toDataURL('image/png');
			const link = document.createElement('a');
			link.href = pngUrl;
			link.download = filename;
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
		};
		img.src = svgBase64;
	}
		
	</script>

</body>

</html>