{{#features}}
	<li class="item" id ="templateRight" style="">
		<h3 class="title-feature">{{organisme}}</h3>
		<div id="select-features-list">
			<span class="select-features">{{level}}</span>
			<span class="select-features">{{annee}}</span>
			<span class="select-features">SIREN : {{siren}}</span>
			<!-- Alerte: Chiffres de l'année en cours -->
			<p class="warning warning-info{{annee}}">Les informations affichées représentent l'année en cours</p>
		</div>

		<div id="user-{{service_parapheur}}">

		    <!-- L'entité utilise le service -->
			<div class="user-service-oui">
				<div class="service-block-parapheur">
					<div class="col1">
						<div class="icon-block">
							<img class="icon" src="/apps/megalis-services/img/parapheur.svg">
						</div>
					</div>
					<div class="service-block-info">
						<p class="service-title">Parapheur électronique</p>
						<p class="text-feature"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>  Service utilisé par la collectivité</p>
					</div>
				</div>
				<div class="acces-service-parapheur" style="">
					<div class="btn-link-user">
						<a href="https://services.megalis.bretagne.bzh/service/parapheur-electronique/" target="_blank">En savoir plus</a>
					</div>
				</div>
			</div>

			<!-- L'entité n'utilise pas le service -->
			<div class="user-service-non">
				<div class="icon-block-parapheur">
					<img class="icon" src="/apps/megalis-services/img/parapheur.svg">
				</div>
				<h2 class="user-title-feature-parapheur">Oops !</h2>
				<p class="text-feature">Il semble que cette collectivité n'a pas encore utilisé le service de parapheur électronique cette année.</p>
				<div class="btn-link-user">
					<a href="https://services.megalis.bretagne.bzh/service/parapheur-electronique/" target="_blank">En savoir plus</a>
				</div>

			</div>
		</div>

	</li>
{{/features}}

<style>

	/* Définition des propriétés de style pour le service */
	:root {
		--mycolor:#161A30;
		--mycolortheme6:#F7C750;
		--myfont:'Inter', sans-serif;
	}
	/* */

	#templateRight {
		padding: 10px;
	}

	.title-feature {
		color: var(--mycolor);
	    font-family: var(--myfont);
	    font-size: 19px;
	    line-height: 1.2;
		font-weight: 700;
	}

	.subtitle-feature {
		color: var(--mycolor);
		font-family:var(--myfont);
		font-size:18px;
		margin-top:7%;
		line-height:1;
	}

	.text-feature, p {
		font-family:var(--myfont);
		color:#555;
		font-size:13px;
	}

	/* Critères de selection des entités */

	span.select-features {
		background-color: var(--mycolor);
		padding: 5px 10px;
		color: white;
		font-size: 11px;
		font-family: var(--myfont);
		border-radius: 12px;
	}

	/* Message d'alerte sur la validité des informations */

	p.warning {
		font-size: 11px!important;
		font-style: italic!important;
		font-weight: 500!important;
		margin: 10px 0px;
	}

	.warning-info2019, .warning-info2020 {
		display:none;
	}

	.warning-info2021{
		display:block;
	}

	/* Affichage du contenu selon usagers O/N */
	#user-OUI .user-service-non {
		display:none;
	}

	#user-NON .user-service-oui {
		display:none;
	}

	/* Mise en fome USER-OUI */

	.user-service-oui {
		padding: 20px 0px;
	}

	.service-block-parapheur {
		background-color: var(--mycolortheme6);
		padding: 5%;;
    	border-radius: 20px;
	}

	.service-block-info {
		padding: 0px 0px 0px 90px;
		/* color: white!important; */
	}

	.user-service-oui .icon-block {
		width: 60px;
		padding: 12px;
		background-color: #ffffff33;
		border-radius: 15px;
		position: absolute;
	}

	.service-block-info p {
		color: white;
	}

	p.service-title {
		font-size: 14px;
		font-weight: 600;
		padding: 10px 0px 0px;
		margin: 0;
	}

	.acces-service-parapheur {
		text-align:center;
		position: absolute;
		left: 33%;
		bottom: 15%;
	}

	/* Mise en fome USER-NON */

	.user-service-non {
		text-align:center;
		padding: 50px;
	}

	.user-service-non .icon-block-parapheur {
		background-color: var(--mycolortheme6);
		opacity: 0.8;
		width: 60px;
		border-radius: 15px;
		padding: 12px;
		margin: 0 auto;
	}

	h2.user-title-feature-parapheur {
		font-weight: 600!important;
		color: var(--mycolortheme6);
	}

	.btn-link-user {
		margin:40px 0px;
	}

	.btn-link-user a{
		font-family: var(--myfont);
		border: solid 1px #161A30;
		color: #161A30;
		padding: 8px 12px;
		border-radius: 8px;
		margin: 40px 0px;
	}

	.btn-link-user a:hover {
		background-color: #161A30;
		color: white!important;
		-webkit-transition: background-color 0.5s ease-out;
		-moz-transition: background-color 0.5s ease-out;
		-o-transition: background-color 0.5s ease-out;
		transition: background-color 0.5s ease-out;
	}

</style>