{% extends "_html_tpl_web.html" %}

{% set nonav = 1 %}

{% block head %}
{{ parent() }}
{% endblock %}

{% block content %}
<style type="text/css">
	.my-text-shadow {
		text-shadow: 3px 3px black;
	}

	.my-text-help {
		opacity: 0.70 !important;
	}

	.my-text-title {
		opacity: 0.70 !important;
	}

	@media (min-width: 1160px) {
		body {
			padding-top: 103px;
		}
	}
</style>
<script type="text/javascript">
	$(document).ready(function () {
		/* none */
	});
</script>

<div class="bg-info fixed-top d-lg-block d-none psm-shadow">
	<div class="container">
		<div class="d-flex justify-content-between">
			<a class="py-3" href="/">
				<img src="{{ site.files.dindex[0] ? site.files.dindex[0].urls.hd : 'img/dindex_default.png' }}"
					alt="{{ site ? site.name : cluster.name }}" title="{{ site ? site.name : cluster.name }}"
					loading="lazy">
			</a>
			<div class="py-3">
				<div class="pt-2">
					<form class="form-inline" action="?" method="post" lang="{{ session.language }}">
						<input type="email" class="form-control" name="login[email]" value="{{ login.email }}"
							placeholder="{{ i18n( 'block-welcome::placeholder::email' ) }}"
							autocomplete="current-username" required>
						<input type="password" class="form-control ml-2" size="6" name="login[password]"
							value="{{ login.password }}"
							placeholder="{{ i18n( 'block-welcome::placeholder::password' ) }}"
							autocomplete="current-password" required>
						<button type="submit" class="btn btn-primary ml-2" name="fn_login">{{ i18n(
							"block-welcome::button::connect" ) }}</button>
					</form>
				</div>
				<div class="pt-1 my-text-help h90">
					<a class="text-white" href="/{{ session.language }}/compte/authentification">{{ i18n(
						"block-welcome::button::inscription" ) }}</a>&nbsp;&bull;
					<a class="text-white" href="/{{ session.language }}/compte/mot-de-passe-oublie">{{ i18n(
						"block-welcome::button::lost-password" ) }}</a>&nbsp;&bull;
					<a class="text-white" href="/{{ session.language }}/support">{{ i18n( "block-navbar::link::help" )
						}}</a>
				</div>
			</div>
		</div>
	</div>
</div>

{% if site.file_default.preview is null %}
<div class="d-lg-none d-block carousel slide carousel-fade border border-1 border-dark" data-ride="carousel"
	data-interval="3000">
	<div class="carousel-inner">
		{% if site.files.slide | length == 0 %}
		<div class="carousel-item active">
			<div class="embed-responsive embed-responsive-16by9 position-relative">
				<img class="embed-responsive-item bg-light obj-adapt" alt="{{ cluster.name }}"
					src="img/slide_default.jpg" loading="lazy">
			</div>
		</div>
		{% endif %}
		{% for slide in site.files.slide %}
		<div class="carousel-item {{ loop.first ? 'active' : '' }}">
			<div class="embed-responsive embed-responsive-16by9 position-relative">
				<img class="embed-responsive-item bg-light obj-adapt" alt="{{ cluster.name }}" src="{{ slide.urls.hd }}"
					loading="lazy">
			</div>
		</div>
		{% endfor %}
	</div>
</div>
{% else %}
<div class="container-fluid d-lg-none d-block">
	<div class="row d-flex justify-content-center">
		<div class="col-12 col-md-10 col-lg-9 px-0 py-0">
			<div class="embed-responsive embed-responsive-16by9">
				<video class="embed-responsive-item obj-cover" poster="{{ site.files.slide.0.urls.hd }}"
					controls="controls" playsinline="playsinline" loop="loop">
					<source src="{{ site.file_default.preview.urls.hd }}" type="video/mp4">
				</video>
			</div>
		</div>
	</div>
</div>
{% endif %}

<div class="container my-5 pt-0 pt-md-5 pt-xl-0">

	<div class="my-5 mt-xl-0 pt-5 pt-lg-0 d-lg-block d-none">
		<h1 class="h2 px-2 text-center mt-4 mb-1">{{ site.i18ns.title }}</h1>
		<h2 class="h5 px-2 text-center my-text-title">{{ site.i18ns.description }}</h2>
	</div>

	<div class="row">

		<div class="offset-1 col-10 px-1 d-lg-block d-none">
			{% if site.file_default.preview is null %}
			<div class="carousel slide carousel-fade border border-1 border-dark" data-ride="carousel"
				data-interval="3000">
				<div class="carousel-inner">
					{% if site.files.slide | length == 0 %}
					<div class="carousel-item active">
						<div class="embed-responsive embed-responsive-16by9 position-relative">
							<img class="embed-responsive-item bg-light obj-adapt" alt="{{ cluster.name }}"
								src="img/slide_default.jpg" loading="lazy">
						</div>
					</div>
					{% endif %}
					{% for slide in site.files.slide %}
					<div class="carousel-item {{ loop.first ? 'active' : '' }}">
						<div class="embed-responsive embed-responsive-16by9 position-relative">
							<img class="embed-responsive-item bg-light obj-adapt" alt="{{ cluster.name }}"
								src="{{ slide.urls.hd ?: 'img/slide_default.jpg' }}" loading="lazy">
						</div>
					</div>
					{% endfor %}
				</div>
			</div>
			{% else %}
			<div class="embed-responsive embed-responsive-16by9">
				<video class="embed-responsive-item obj-cover" poster="{{ site.files.slide.0.urls.hd }}"
					controls="controls" playsinline="playsinline" loop="loop">
					<source src="{{ site.file_default.preview.urls.hd }}" type="video/mp4">
				</video>
			</div>
			{% endif %}
		</div>

		<div class="offset-1 col-10 px-2 d-lg-none d-block">
			<div class="h5 text-center mt-0 mb-2">{{ i18n( "block-welcome::text::already-customer" ) }}</div>
			<div class="text-center mb-3 font-weight-bold h100 d-lg-block d-none">
				{{ i18n( "block-welcome::text::i-have-an-account" ) }}
			</div>
			{% if session.user_id is null %}
			<form class="form row" action="?" method="post" lang="{{ session.language }}">
				<input type="hidden" name="redirect" value="{{ redirect }}">
				<div class="col-12 my-2">
					<input type="email" class="form-control" name="login[email]" value="{{ login.email }}"
						placeholder="{{ i18n( 'block-welcome::placeholder::email' ) }}" autocomplete="current-username"
						required>
				</div>
				<div class="col-7 my-2 pr-1">
					<input type="password" class="form-control" name="login[password]" value="{{ login.password }}"
						placeholder="{{ i18n( 'block-welcome::placeholder::password' ) }}"
						autocomplete="current-password" required>
				</div>
				<div class="col-5 my-2 pl-1">
					<button type="submit" class="btn btn-primary btn-block" name="fn_login">{{ i18n(
						"block-welcome::button::connect" ) }}</button>
				</div>
				<div class="col-12 my-2 text-left">
					<a class="mx-1 mb-1" href="/{{ session.language }}/compte/mot-de-passe-oublie">{{ i18n(
						"block-welcome::button::lost-password" ) }}</a>
				</div>
			</form>
			{% endif %}
		</div>

		<div class="col-12 mt-2 px-3 d-block d-lg-none">
			<hr class="psm-hr">
		</div>

	</div>

	<!-- Duplicate login -->

	<div class="row text-center mt-3 mt-lg-5 my-3 px-2">

		<!--<div class="col-12 text-center">
			<i class="fal fa-3x fa-exclamation-circle mb-3"></i>
			<div>{{ i18n( "block-welcome::text::adult" ) }}</div>
		</div>

		<div class="col-12 text-center h100 py-2 mb-3">
			{{ i18n( "block-welcome::text::i-certify-being-legal-age" ) }}&nbsp;
			<a href="/{{ session.language }}/legal/cgu">{{ i18n( "block-footer::link::cgu" ) }}</a>&nbsp;&bull;
			<a href="/{{ session.language }}/legal/privacy">{{ i18n( "block-footer::link::privacy" ) }}</a>&nbsp;&bull;
			<a href="/{{ session.language }}/legal/cookies">{{ i18n( "block-footer::link::cookies" ) }}</a>
		</div>-->

		<div class="col-12 d-lg-none d-block">
			<div class="h5 text-center mb-3">{{ i18n( "block-welcome::text::new-customer" ) }}</div>
		</div>

		<div class="col-6 pr-1 text-right d-lg-block d-none">
			<a class="btn btn-lg btn-primary" href="/{{ session.language }}/compte/authentification">{{ i18n(
				"block-welcome::button::register" ) }}</a>
		</div>
		<div class="col-6 pl-1 text-left d-lg-block d-none">
			<a class="btn btn-lg btn-primary " href="/{{ session.language }}/accueil">{{ i18n(
				"block-welcome::button::enter" ) }}</a>
		</div>
		<div class="offset-1 col-5 pr-1 text-right d-block d-lg-none">
			<a class="btn btn-primary btn-block" href="/{{ session.language }}/compte/authentification">{{ i18n(
				"block-welcome::button::register" ) }}</a>
		</div>
		<div class="col-5 pl-1 text-left d-block d-lg-none">
			<a class="btn btn-primary btn-block" href="/{{ session.language }}/accueil">{{ i18n(
				"block-welcome::button::enter" ) }}</a>
		</div>

		{% if session.country in [ 'FR', 'ES' ] %}
		<div class="col-12 text-center mt-5">
			<div>{{ i18n( "block-welcome::text::parents" ) | nl2br }}</div>
			<a class="font-weight-bold text-dark"
				href="{{ i18n( 'block-welcome::text::parents-' ~  session.country | lower ) }}">{{ i18n(
				"block-welcome::text::parents-" ~ session.country | lower ) }}</a>
		</div>
		{% endif %}

	</div>
</div>

<!-- videos1 -->

<div class="container mb-5 mt-0 mt-lg-4 pt-lg-4">
	<div class="row row-eq-height">
		{% for item in videos1.items %}
		<div class="col-xl-4 col-lg-6 col-sm-6 p-1">
			<div class="bg-light p-0">
				<div>
					<a href="{{ item.site._id != cluster.site._id ? item.site.url }}/{{ session.language }}/videos/detail/{{ item.video.slug }}"
						class="d-block embed-responsive embed-responsive-16by9 mb-2 {{ item.site._id != cluster.site._id ? 'sso_connect' }}">
						{% for doc in item.video.docs if doc.noxx == 1 %} <img
							class="embed-responsive-item bg-light border border-dark obj-adapt"
							alt="{{ item.video.i18ns.name }}" src="{{ doc.urls.hd ?: 'img/clear/clear1x1.png' }}"
							loading="lazy">
						{% endfor %}
					</a>
				</div>
				<div class="h100 text-dark px-3 py-1">
					<a class="d-block mt-1 mb-0 text-truncate font-weight-bold text-center"
						href="/{{ session.language }}/videos/detail/{{ item.video.slug }}">
						{{ item.video.i18ns.name }}
					</a>
					<div class="{{ session.language == 'zh' ? 'text-wrap' : 'ellipsis' }} py-2" ellipsis-lines="2">
						{{ nbchar( item.video.i18ns.description, 300) }}
					</div>
					<div class="d-flex justify-content-between mt-0 mb-2 pb-1">
						<div>
							{% for i, model in item.models if i < 2 %} {{ i> 0 ? "&bull;" : "" }} <a
									class="h90 text-terciary"
									href="/{{ session.language }}/modeles/detail/{{ model.slug }}">{{ model.name }}</a>
								{% endfor %}<a class="h90 text-terciary">&nbsp;</a>
								<div class="h80 text-dark opacity-60">
									<span class="my-date" value="{{ item.video.pub_start }}">
										{{ item.video.pub_start }}
									</span>
									{% if item.video.duration > 0 %}
									<i class="fal fa-clock px-1"></i> {{ ( item.video.duration / 60 ) |
									round(0) }} {{ i18n( "page-video::text::minutes" ) }}
									{% endif %}
								</div>
						</div>
						<div class="d-flex flex-column justify-content-end">
							<a class="btn btn-sm btn-primary px-4"
								href="/{{ session.language }}/videos/regarder/{{ item.video.slug }}?buy_stream=1">
								{{ i18n( "block-welcome::button::watch" ) }}
							</a>
						</div>
						<script type="text/javascript">
							$(document).ready(function () {
								moment.locale('{{ session.language }}');
								$('.my-date').each(function () { $(this).html(moment($(this).attr('value')).format('L')); });
							});
						</script>
					</div>
				</div>
			</div>
		</div>
		{% endfor %}
	</div>
</div>

<div class="container mb-5 mt-0 mt-lg-4 pt-lg-4">
	<div class="row">
		<div class="col-12 text-center pb-5">
			<a class="btn btn-secondary text-white shadow px-5 py-3" href="/{{ session.language }}/videos">{{ i18n(
				"block-welcome::text::resume" ) | raw }}</a>
		</div>
		<div class="col-12 text-center">
			{% for i, tag in menu.tags if i < 16 %} <a class="btn btn-sm btn-outline-dark p-1 px-3 mb-2 mr-2"
				href="/{{ session.language }}/videos/{{ tag.slug }}">
				{{ tag.name }}
				</a>
				{% endfor %}
		</div>
	</div>
</div>

<!-- gallery_video_2 -->

<div class="container mb-5 mt-0 mt-lg-4 pt-lg-4">
	<div class="row row-eq-height">
		{% for item in videos2.items %}
		<div class="col-xl-4 col-lg-6 col-sm-6 p-1">
			<div class="p-0 pb-2">
				<div>
					<a href="{{ item.site._id != cluster.site._id ? item.site.url }}/{{ session.language }}/videos/detail/{{ item.video.slug }}"
						class="d-block embed-responsive embed-responsive-16by9 mb-2 {{ item.site._id != cluster.site._id ? 'sso_connect' }}">
						{% for doc in item.video.docs if doc.noxx == 1 %} <img
							class="embed-responsive-item bg-light border border-dark obj-adapt"
							alt="{{ item.video.i18ns.name }}" src="{{ doc.urls.hd ?: 'img/clear/clear1x1.png' }}"
							loading="lazy">
						{% endfor %}
					</a>
				</div>
				<div class="h100 text-dark text-center px-3">
					<a class="text-dark d-block mt-2 mb-0 text-truncate"
						href="/{{ session.language }}/videos/detail/{{ item.video.slug }}">{{ item.video.i18ns.name
						}}</a>
					<div class="text-center lh10">
						{% for i, model in item.models if i < 2 %} {{ i> 0 ? "&bull;" : "" }} <a
								class="h90 text-terciary"
								href="/{{ session.language }}/modeles/detail/{{ model.slug }}">{{ model.name }}</a>
							{% endfor %}<a class="h90 text-terciary">&nbsp;</a>
					</div>
				</div>
			</div>
		</div>
		{% endfor %}
	</div>
</div>


<div class="container my-5">

	<!-- Duplicate login 

	<div class="row text-center mt-3 mt-lg-5 my-3 px-2">
		<div class="col-12 d-lg-none d-block">
			<div class="h5 text-center mb-3">{{ i18n( "block-welcome::text::new-customer" ) }}</div>
		</div>
		<div class="col-6 pr-1 text-right d-lg-block d-none">
			<a class="btn btn-lg btn-primary" href="/{{ session.language }}/compte/authentification">{{ i18n(
				"block-welcome::button::register" ) }}</a>
		</div>
		<div class="col-6 pl-1 text-left d-lg-block d-none">
			<a class="btn btn-lg btn-primary " href="/{{ session.language }}/accueil">{{ i18n(
				"block-welcome::button::enter" ) }}</a>
		</div>
		<div class="offset-1 col-5 pr-1 text-right d-block d-lg-none">
			<a class="btn btn-primary btn-block" href="/{{ session.language }}/compte/authentification">{{ i18n(
				"block-welcome::button::register" ) }}</a>
		</div>
		<div class="col-5 pl-1 text-left d-block d-lg-none">
			<a class="btn btn-primary btn-block" href="/{{ session.language }}/accueil">{{ i18n(
				"block-welcome::button::enter" ) }}</a>
		</div>
		<div class="col-12 text-center font-weight-bold h100 py-2">
			{{ i18n( "block-welcome::text::i-certify-being-legal-age" ) }}<br>
			<a href="/{{ session.language }}/legal/cgu">{{ i18n( "block-footer::link::cgu" ) }}</a>&nbsp;&bull;
			<a href="/{{ session.language }}/legal/privacy">{{ i18n( "block-footer::link::privacy" ) }}</a>&nbsp;&bull;
			<a href="/{{ session.language }}/legal/cookies">{{ i18n( "block-footer::link::cookies" ) }}</a>
		</div>
	</div>
	-->

	<div class="row d-lg-block d-none">
		<div class="col-sm-12">
			<p class="h80 mt-4 mb-5 text-justify">{{ site.i18ns.text | raw }}</p>
		</div>
	</div>

</div>

<!-- BLOCK SITES -->

<div class="container-fluid bg-secondary text-light text-center py-5">

	<div class="container">
		<div class="row my-5">

			<div class="col-12 col-lg-4 text-center mb-5">
				<i class="fal fa-4x fa-video mb-5"></i>
				<div class="h3 mb-0 my-text-shadow psm-oswald">
					{{ i18n( "block-sites::text::studio_title" ) | replace( { '%count%': studios.total } ) | raw }}
				</div>
			</div>

			<div class="col-12 col-lg-4 text-center mb-5">
				<i class="fal fa-4x fa-play-circle mb-5"></i>
				<div class="h3 mb-0 my-text-shadow psm-oswald">
					{{ i18n( "block-sites::text::title" ) | raw }}
				</div>
				<div class="h3 pb-2 my-text-shadow psm-oswald">
					{{ i18n( "block-sites::text::description" ) | raw }}
				</div>
			</div>

			<div class="col-12 col-lg-4 text-center mb-5">
				<i class="fal fa-4x fa-shield-check mb-5"></i>
				<div class="h3 mb-0 my-text-shadow psm-oswald">
					{{ i18n( "block-sites::text::security" ) | raw }}
				</div>
			</div>

			<div class="col-12">
				<div class="mb-4">
					<a class="btn btn-lg btn-primary mx-2 mb-3" href="/{{ session.language }}/sites">
						{{ i18n( "block-sites::button::view" ) }}
					</a>
					<a class="btn btn-lg btn-primary mx-2 mb-3" href="/{{ session.language }}/compte/authentification">
						{{ i18n( "block-sites::button::register" ) }}
					</a>
				</div>
				<div class="h5 text-muted">{{ i18n( "block-sites::text::resume" ) | raw }}</div>
			</div>
		</div>
		{#
		<div class="row mt-5 justify-content-center">
			{% set count = 0 %}
			{% for item in sites.items %}
			{% if ( count < 12 ) and ( item.site._id !=site._id ) %} {% set count=count + 1 %} <a
				href="{{ item.site.url }}/{{ session.language }}"
				class="col-lg-4 col-md-6 mb-5 text-center sso_connect">
				<div class="embed-responsive embed-responsive-16by9 psm-shadow-big">
					<img class="embed-responsive-item bg-light obj-adapt" alt="{{ item.site.name_ext }}"
						src="{{ item.site.file_default.slide.urls.hd ?: 'img/slide_default.jpg' }}" loading="lazy">
				</div>
				<div class="text-light pt-2">{{ item.site.name_ext }}</div>
				<div class="h90 text-muted pb-1">{{ item.site.i18ns.short }}</div>
				</a>
				{% endif %}
				{% endfor %}
		</div>
		<div class="row">
			<div class="col-12 text-center">
				<a class="btn btn-lg btn-primary text-left" href="/{{ session.language }}/sites">
					{{ i18n( "block-sites::button::view" ) }}
				</a>
			</div>
		</div>
		#}
	</div>
</div>

{#<div class="container-fluid">
	<div class="row bg-dark pb-1">
	</div>
</div>#}

{% endblock %}