<!doctype html>
<html lang="en"	xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="common/css/bootstrap.cerulean.min.css" />
<!-- Icons CSS -->
<link rel="stylesheet" href="common/css/fontawesome-all.min.css">

<style type="text/css">
.table > tbody > tr > td { vertical-align : middle !important; }
.card > .table           { margin-bottom  : 0 !important;      }
fieldset > legend        { font-size      : 1.2rem !important; }
.overlaydiv {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10000;
    visibility: hidden;
}

.grayRectangle {
    position: absolute;
    background-color: black;
    opacity:0.6;
    top: 30%;
    left: 40%;
    width: 20%;
    height: 20%;
    z-index: 100;
    border-radius: 15px;
}

.text-deleted {
	color: gray !important;
	text-decoration: line-through !important;
}

.btn-link {
	text-align: left !important;
}

.table-noborder td, .table-noborder th {
	border: none !important; 
}

</style>


<title th:text="${sysconf.title}"></title>

</head>

<body ng-app="orgs" sec:authorize="isAuthenticated()">

	<div id="spinnerdiv" class="overlaydiv">
		<span class="grayRectangle"><!--The spinner is added on loading here--></span>
	</div>
	
	<nav class="navbar navbar-expand-lg navbar-dark bg-primary" ng-controller="menuCtrl">
		<a class="navbar-brand" href="#"><img src="resources/images/openaire_logo_small.png" width="30" height="30" alt="OpenAIRE logo"><span th:text="${sysconf.title}"></span></a>

		<button class="navbar-toggler" type="button" data-toggle="collapse"	data-target="#navbarSupportedContent"><span class="navbar-toggler-icon"></span></button>

		<div class="collapse navbar-collapse w-100 order-1" id="navbarSupportedContent">
			<ul class="navbar-nav mr-auto">
				<li class="nav-item dropdown">
					<a class="nav-link dropdown-toggle" href="javascript:void(0)" data-toggle="dropdown">Search</a>
					<div class="dropdown-menu">
						<a class="dropdown-item" href="#!/search">Simple search</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="#!/countries/1" sec:authorize="hasRole('ROLE_OPENORGS_ADMIN') or hasRole('ROLE_OPENORGS_NATIONAL_ADMIN')">Browse by country</a>
						<a class="dropdown-item" href="#!/countries/0" sec:authorize="hasRole('ROLE_OPENORGS_USER')">Browse by country</a>
						<a class="dropdown-item" href="#!/types/1" sec:authorize="hasRole('ROLE_OPENORGS_ADMIN') or hasRole('ROLE_OPENORGS_NATIONAL_ADMIN')">Browse by type</a>
						<a class="dropdown-item" href="#!/types/0" sec:authorize="hasRole('ROLE_OPENORGS_USER')">Browse by type</a>
					</div>
				</li>
				<li class="nav-item dropdown" sec:authorize="hasRole('ROLE_OPENORGS_ADMIN') or hasRole('ROLE_OPENORGS_NATIONAL_ADMIN')">
					<a class="nav-link dropdown-toggle" href="javascript:void(0)" data-toggle="dropdown">Curation</a>
					<div class="dropdown-menu">
						<advanced-menu-item menu="Suggested organizations" description="Organizations that have been suggested  by an User or  by the Dedup OpenAIRE Workflow" url="#!/pendings/_" badge="{{info.data.total.nPendingOrgs}}" first="1"></advanced-menu-item>
						<advanced-menu-item menu="Organizations with new duplicates" description="Organizations that presents duplicates suggested by the Dedup OpenAIRE Workflow" url="#!/duplicates/_" badge="{{info.data.total.nDuplicates}}"></advanced-menu-item>
						<advanced-menu-item menu="Potential conflicts" description="Approved Organizations that need to be merged" url="#!/conflicts/_" badge="{{info.data.total.nConflicts}}"></advanced-menu-item>
					</div>
				</li>
				<li class="nav-item dropdown" sec:authorize="hasRole('ROLE_OPENORGS_ADMIN') or hasRole('ROLE_OPENORGS_NATIONAL_ADMIN')">
					<a class="nav-link dropdown-toggle" href="javascript:void(0)" data-toggle="dropdown">Create</a>
					<div class="dropdown-menu">
						<a class="dropdown-item" href="#!/new">A new organization</a>
					</div>
				</li>
				<li class="nav-item dropdown" sec:authorize="hasRole('ROLE_OPENORGS_USER')">
					<a class="nav-link dropdown-toggle" href="javascript:void(0)" data-toggle="dropdown">Curation</a>
					<div class="dropdown-menu">
						<advanced-menu-item menu="Organizations with new duplicates" description="Organizations that presents duplicates suggested by the Dedup OpenAIRE Workflow" url="#!/duplicates/_" badge="{{info.data.total.nDuplicates}}" first="1"></advanced-menu-item>
					</div>
				</li>
				<li class="nav-item dropdown" sec:authorize="hasRole('ROLE_OPENORGS_USER')">
					<a class="nav-link dropdown-toggle" href="javascript:void(0)" data-toggle="dropdown">Suggest</a>
					<div class="dropdown-menu">
						<a class="dropdown-item" href="#!/new">A new organization</a>
					</div>
				</li>
			</ul>
			<ul class="navbar-nav ml-auto">
				<li class="nav-item dropdown" sec:authorize="hasRole('ROLE_OPENORGS_ADMIN') or hasRole('ROLE_OPENORGS_NATIONAL_ADMIN')">
					<a class="nav-link dropdown-toggle" href="javascript:void(0)" data-toggle="dropdown"><i class="fa fa-cog"></i></a>
					<div class="dropdown-menu dropdown-menu-right">
						<a class="dropdown-item" href="#!/sysconf" sec:authorize="hasRole('ROLE_OPENORGS_ADMIN')">System configuration</a>
						<a class="dropdown-item" href="#!/utils" sec:authorize="hasRole('ROLE_OPENORGS_ADMIN')">System utilities</a>
						<a class="dropdown-item" href="#!/lastImport" sec:authorize="hasRole('ROLE_OPENORGS_ADMIN')">Last import of suggestions</a>
						<div class="dropdown-divider" sec:authorize="hasRole('ROLE_OPENORGS_ADMIN')"></div>	
						<a class="dropdown-item" href="#!/persistentOrgs">Configure persistent organizations</a>
						<div class="dropdown-divider" sec:authorize="hasRole('ROLE_OPENORGS_ADMIN')"></div>	
						<a class="dropdown-item" href="#!/users">Manage users</a>
					</div>
				</li>
				<li class="nav-item dropdown">
					<a class="nav-link dropdown-toggle" href="javascript:void(0)" data-toggle="dropdown"><i class="fa fa-user"></i></a>
					<div class="dropdown-menu dropdown-menu-right">
						<p class="px-4 pt-2 text-muted small">
							<b>Logged as:</b><br /><span th:text="${email}" id="current_user"></span><br />
							<b>Role:</b><br />
							<span sec:authorize="hasRole('ROLE_OPENORGS_ADMIN')">Super Admin</span>
							<span sec:authorize="hasRole('ROLE_OPENORGS_NATIONAL_ADMIN')">National Admin</span>
							<span sec:authorize="hasRole('ROLE_OPENORGS_USER')">Simple User</span>
						</p>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" th:href="@{/logout}">Logout</a>
					</div>
				</li>
				<li class="nav-item dropdown">
					<a class="nav-link dropdown-toggle" href="javascript:void(0)" data-toggle="dropdown"><i class="fa fa-question-circle"></i></a>
					<div class="dropdown-menu dropdown-menu-right">
						<a class="dropdown-item" th:href="${sp.value}" th:each="sp : ${supportPages}" th:text='${sp.key}' target="_blank"></a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="doc" target="_blank">APIs (swagger)</a>
						<a class="dropdown-item" href="dbmodel/index.html" target="_blank">Description of the database</a>
					</div>
				</li>
			</ul>
		</div>
		
	</nav>
	
	<div class="alert alert-danger text-center" th:if="${sysconf.readonly}">The portal is running in READ-ONLY mode.</div>


	<div class="container-fluid small mt-4" ng-view></div>
	
	<script sec:authorize="hasRole('ROLE_OPENORGS_ADMIN')">
		function superAdminMode() { return true; }
	</script>
	<script sec:authorize="!hasRole('ROLE_OPENORGS_ADMIN')">
		function superAdminMode() { return false; }
	</script>
	<script sec:authorize="hasRole('ROLE_OPENORGS_ADMIN') or hasRole('ROLE_OPENORGS_NATIONAL_ADMIN')">
		function adminMode() { return true; }
	</script>
	<script sec:authorize="!hasRole('ROLE_OPENORGS_ADMIN') and !hasRole('ROLE_OPENORGS_NATIONAL_ADMIN')">
		function adminMode() { return false; }
	</script>

	<script>
		function currentUser() { return document.getElementById('current_user').textContent; }
	</script>

	<script src="common/js/jquery.min.js"></script>
	<script src="common/js/popper.min.js"></script>
	<script src="common/js/bootstrap.min.js"></script>
	<script src="common/js/angular.min.js"></script>
	<script src="common/js/angular-route.min.js"></script>
	<script src='common/js/checklist-model.js'></script>
	<script src="common/js/spin.js"></script>

	<script src="resources/js/organizations.js"></script>
	
	<script>
		// Spinner show/hide methods ~ Andrea Mannocci
		var spinnerOpts = {
			lines: 15,
			length: 16,
			width: 5,
			radius: 25,
			color: '#eeeeee',
			className: 'spinner',
			top: '40%'
		};
		
		var spinnerTarget = document.getElementById('spinnerdiv');
		
		var spinner;
	
		function showSpinner() {
			spinner = new Spinner(spinnerOpts).spin(spinnerTarget);
			spinnerTarget.style.visibility = 'visible';
		}
	
		function hideSpinner()  {
			spinnerTarget.style.visibility = 'hidden';
			spinner.stop();
		}

		function call_http_get($http, url, onSuccess) {
			showSpinner();
			
			$http.get(url).then(function successCallback(res) {
				hideSpinner();
				if((typeof res.data) == 'string') {
					alert("Session expired !"); location.reload(true); 
				} else {
					onSuccess(res);
				}
			}, function errorCallback(res) {
				hideSpinner();
				alert('ERROR: ' + res.data.error + ' (' + res.data.message + ')');
			});
		}
		
		function force_http_post($http, url, obj, onSuccess) {
			showSpinner();
			$http.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8";
			$http.post(url, obj).then(function successCallback(res) {
				hideSpinner();
				if ((typeof res.data) == 'string') {
					alert("Session expired !"); location.reload(true); 
				} else {
					onSuccess(res);
				}
			}, function errorCallback(res) {
				hideSpinner();
				alert('ERROR: ' + res.data.error + ' (' + res.data.message + ')');
			});
		}
		
	</script>
	

	<script th:if="${sysconf.readonly}">	
		function call_http_post($http, url, obj, onSuccess) {
			alert("Method not permitted in READ-ONLY mode !")
		}
		
		function call_http_delete($http, url, onSuccess) {
			alert("Method not permitted in READ-ONLY mode !")
		}
	</script>	

	
	<script th:if="${!sysconf.readonly}">	
		function call_http_post($http, url, obj, onSuccess) {
			showSpinner();
			$http.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8";
			$http.post(url, obj).then(function successCallback(res) {
				hideSpinner();
				if ((typeof res.data) == 'string') {
					alert("Session expired !"); location.reload(true); 
				} else {
					onSuccess(res);
				}
			}, function errorCallback(res) {
				hideSpinner();
				alert('ERROR: ' + res.data.error + ' (' + res.data.message + ')');
			});
		}
		
		function call_http_delete($http, url, onSuccess) {
			showSpinner();
			$http.delete(url).then(function successCallback(res) {
				hideSpinner();
				if ((typeof res.data) == 'string') {
					alert("Session expired !"); location.reload(true); 
				} else {
					onSuccess(res);
				}
			}, function errorCallback(res) {
				hideSpinner();
				alert('ERROR: ' + res.data.error + ' (' + res.data.message + ')');
			});
		}
	</script>	
</body>

</html>