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

<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" th:text="#{managers.title}"></h6>
						<hr class="uv-procedure-hr">
						<span th:text="#{managers.subtitle}"></span>
					</div>
				</div>
				<form enctype='multipart/form-data' method="POST" action="/admin/mailing">
					<div class="uv-table-group" th:if="${centres != null}">
						<label th:text="#{admin.mailing.center}">Centre(s)</label>
						<select class="selectpicker" id="centerSelector" name="centres[]" multiple data-live-search="true" data-width="100%" data-actions-box="true" th:attr="data-none-selected-text=#{global.selectors.noData}" required>
					        <option th:each="item : ${centres}" th:text="${#locale.language} == 'es' ? ${item.nomCas}:${item.nomVal}" th:attr="value=${item.lugar}"></option>
					    </select>
					</div>
					<div class="uv-table-group">
						<label th:text="#{admin.mailing.role}" th:if="${rols != null}">Rol</label>
						<select class="selectpicker" id="roleSelector" name="idRol" data-live-search="true" data-width="100%" data-actions-box="true" required>
					        <option th:each="item : ${rols}" th:text="${#locale.language} == 'es' ? ${item.descripcioCas}:${item.descripcioVal}" th:attr="value=${item.idRol}"></option>
					    </select>
					</div>
					<div class="uv-table-group" th:if="${sent != null}">
						<br>
						<span class="alert alert-success uv-admin-instance-success" th:if="${sent}" role="alert">
							<button type="button" class="close" data-dismiss="alert" aria-label="Close">
							  <span aria-hidden="true">&times;</span>
							</button>
							<span th:text="#{admin.mailing.sent.success}"></span>
						</span>
						<span class="alert alert-danger uv-admin-instance-error" th:if="${!sent}" role="alert">
							<button type="button" class="close" data-dismiss="alert" aria-label="Close">
							  <span aria-hidden="true">&times;</span>
							</button>
							<span th:text="#{admin.mailing.sent.error}"></span>
						</span>
						<br>
					</div>
					<div class="uv-table-group">
						<div class="form-group">
							<label th:text="#{admin.mailing.subject}">Asunto</label>
							<input class="form-control" name="subject" type="text" value="">
						</div>
						<div class="form-group">
							<label th:text="#{admin.mailing.body}">Mensaje</label>
							<textarea class="form-control" name="body" rows="10"></textarea>
						</div>
					</div>
					<div class="uv-table-group-procedure" style="margin-top:50px;cursor: auto;">
						<button type="submit" class="btn btn-primary">Enviar</button>
					</div>
				</form>
			</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">

		$( document ).ready(function(){ 
			layout = new Layout("");
			layout.initTableLayout({paging:false});
			layout.closeLoadingSpinner(".uv-loading-spinner");	
			$('#roleSelector').val('').trigger('change');
		});	
	</script>

</body>

</html>
