{{#features}}
	<li class="item" id="{{feature_ol_uid}}" style="">
		<div class="flip-card flip-card-{{opendata_publie}}">
  			<div class="flip-card-inner">
    			<div class="flip-card-front">
					<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-opendata-{{opendata_publie}}">
						<!-- L'entité utilise le service -->
						<div class="user-service-oui">
							<div class="service-block-actes">
								<div class="col1">
									<div class="icon-block">
										<img class="icon" src="/apps/megalis-services/img/opendata.svg">
									</div>
								</div>
								<div class="service-block-info">
									<p class="service-title">Publication opendata</p>
									<p class="text-feature"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> la collectivité publie des documents en open data</p>
								</div>
							</div>

							<!-- Chiffres clés + graphique -->
							<div class="service-block-number row">
								<div class="col-sm-12">
									<div class="block-grey block-number">
										<img class="icon" src="/apps/megalis-services/img/procedure.svg" style="width: 40px;">
										<span class="number-feature-marches">{{nb_delib_publie}}</span>
										<span class="title-number-feature-marches">délibération(s)</span>
										<div class="subtitle-number-feature">pour l'entité et l'année sélectionnées</div>
										<div class="reuse btn-link-user center">
											<a type="btn" style="cursor: pointer;" onclick="flipCard(this);">Réutiliser</a>
										</div>
									</div>
								</div>
								<div class="col-sm-12">
									<div class="block-grey block-number">
										<img class="icon" src="/apps/megalis-services/img/decp.svg" style="width: 40px;">
										<span class="number-feature-marches">{{nb_decp_publie}}</span>
										<span class="title-number-feature-marches">commande(s) publique(s)</span>
										<div class="subtitle-number-feature">pour l'entité et l'année sélectionnées</div>
										<div class="reuse btn-link-user center">
											<a type="btn" style="cursor: pointer;" href="{{url_marches}}" target="_blank">Réutiliser</a>
										</div>
									</div>
								</div>
								<div id="user-budget-{{budget_publie}}" class="col-sm-12">
									<div class="block-grey block-number">
										<img class="icon" src="/apps/megalis-services/img/budget.svg" style="width: 40px;">
										<span class="title-number-feature-marches">le budget</span>
										<div class="subtitle-number-feature">pour l'entité et l'année sélectionnées</div>
									</div>
								</div>

							</div>

						</div>

						<!-- L'entité n'utilise pas le service -->
						<div class="user-service-non">
							<div class="icon-block-actes">
								<img class="icon" src="/apps/megalis-services/img/flux_actes.svg">
							</div>
							<h2 class="user-title-feature-actes">Oops !</h2>
							<p class="text-feature">Il semble que cette collectivité n'a pas encore publié de données en opendata en {{annee}}.</p>
							<div class="btn-link-user">
								<a href="https://services.megalis.bretagne.bzh/service/opendata-2/" target="_blank">En savoir plus</a>
							</div>
						</div>
					</div>
				</div>

				<div class="flip-card-back">
					<span class="title-feature">Comment réutiliser les données opendata ?</span>
					<div class="mqb-container">
						<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
						<span class="service-title center">la marque blanche intégrable dans votre propre site web</span>
						<div class="center">
							<span id="code_mqb" onclick="showMarqueBlanche(this);"><code>&lt;code/&gt;</code></span>
							<span class="btn-link-user"><a type="btn" style="cursor: pointer;" onclick="flipCard(this);">Retour</a></span>
						</div>

						<div class="card">
							<div class="front-marqueblanche">
								<iframe referrerpolicy="strict-origin-when-cross-origin" style="border:none;" src="{{url_actes}}" title="Marque blanche open data"
									width="100%" height="600">
								</iframe>
							</div>
							<div class="back-marqueblanche">
								<p>Pour intégrer la marque blanche dans votre propre site web, copier le code suivant et coller le dans une page de votre site web</p>
								<div class="code-container">
									<code>&lt;iframe referrerpolicy="strict-origin-when-cross-origin" style="border: 0;" src="{{url_actes}}" title="Marque blanche open data" width="100%" height="600"&gt;&lt;/iframe&gt;</code>
								</div>
								<div class="btn-link-user">
									<a type="btn" style="cursor: pointer;" onclick="showMarqueBlanche(this);">Afficher le résultat</a>
								</div>
							</div>


						</div>
					</div>
				</div>
			</div>
		</div>

	</li>

<style>

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

	.flip-card {
  background-color: transparent;
  width: fit-content;
  height: 100%;
  perspective: 1000px;
  width:100%;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  /*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);*/
}

.service-block-number .col-sm-4 {
	padding-bottom: 15px;
}

.flip-card.flip-card-OUI.hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-OUI.hover .user-service-oui {
	display: none;
}

.flip-card.flip-card-OUI.hover .flip-card-front {
	display: none;
}

.flip-card.flip-card-OUI:not(.hover) .flip-card-back {
	display: none;
}

.mqb-container.code span code {
	display: none;
}


.flip-card-front, .flip-card-back {
  /*position: absolute;*/
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {

}

.flip-card-back {
  transform: rotateY(180deg);
  padding-top: 15px;
}

.code-container {
	border: solid 1px grey;
}

#code-mqb {
	position: absolute;
	right:0px;
}

.arrow-down {
    width: 0;
    height: 0;

    border-right: 16px solid transparent;
    border-left: 16px solid transparent;

    border-top: 20px solid var(--mycolortheme3);
}
.arrow-wrapper {
    display: inline-flex;
    margin: 15px 0 0;
	padding-bottom: 20px;
}

span code {
    font-size: large;
	cursor: pointer;
	color: var(--mycolortheme3);
	position: relative;
}

.mqb-container, .card {
	padding-top: 15px;
}

.back-marqueblanche {
	display:none;
}
.code .front-marqueblanche {
	display:none;
}
.code .back-marqueblanche {
	display:block;
}

.front-marqueblanche {
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}


.back-marqueblanche {
	margin-top: 20px;
	padding-left: 50px;
	padding-right: 50px;
}

:checked + .card {
    transform: rotateX(180deg);
    -webkit-transform: rotateX(180deg);
}*/




	#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;
	}

	.center{
		text-align:center;
	}

	.block-grey {
    	border-radius: 20px;
    	background-color: #e2e2e28f;
    	//height: 250px;
		margin-bottom: 20px;
	}

	.block-number{
		padding: 20px 10px;
	}

	.block-graph{
		padding: 25px 15px;
	}

	/* 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-opendata-OUI .user-service-non {
		display:none;
	}

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

	#user-budget-NON {
		display:none;
	}

	#user-decp-OUI .user-service-non {
		display:none;
	}

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

	#user-delib_NON .user-service-non {
		display:none;
	}

	#user-delib_OUI .user-service-oui {
		display:block;
	}


	/* --- Mise en fome USER-OUI --- */

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

	.service-block-actes {
		background-color: var(--mycolortheme3);
		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;
	}

	span.service-title {
		font-size: 14px;
		font-weight: 600;
	}

	/* Numbers */

	.service-block-number {
		margin-top: 20px;
	}

	.number-feature-actes {
		font-size: 24px;
		font-weight: 600;
		color: var(--mycolortheme3);
		margin: 10px 0px 0px;
	}

	.title-number-feature-actes {
		font-weight: 600;
		color: var(--mycolortheme3);
		margin:0;
	}

	.subtitle-number-feature {
		font-size: 10px;
		font-style: italic;
		padding-left: 94px;
    	margin-top: -14px;
	}

	.block-number img.icon {
    	margin-left: 50px;
	}

	/* Chart */

	p.title-chart-feature {
		font-size: 12px;
		font-weight: 600;
		margin: 0;
	}

	/* Bouton en savoir plus */

	.acces-service-actes {
		text-align: center;
   		margin: 0 auto;
	}

	/* --- Mise en fome USER-NON --- */

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

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

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

	.modal-content .block-grey {
		height: 300px;
	}

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

	.reuse.btn-link-user {
		margin:0px 0px;
		padding-top: 20px;
	}

	.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;
	}

	span#opendata-stats {
		font-size: x-large;
	}

	.mqb-container>.center {
		
		padding-top: 20px;
	}

</style>
<script>
	//_ODStats = mviewer.customControls.services_organisme.getStats("{{siren}}");
</script>

{{/features}}
<script>
var showMarqueBlanche = function(element) {
	element.closest(".mqb-container").classList.toggle("code");
}

var flipCard = function(element) {
	element.closest(".item").querySelector(".flip-card-OUI").classList.toggle('hover');

}

var getStats = function() {
	if (_ODStats && _ODStats.taux_non_publie) {
		document.getElementById("opendata-stats").textContent = `${ parseInt(100 - parseFloat(_ODStats.taux_non_publie))} %` ;
	}

}

//getStats();
</script>