{% extends "_html_tpl_web.html" %}

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

<link rel="canonical" href="{{ site.url }}" />
{% for language in languages if language.active == 1 %}
{% if language.code == session.language %}
<meta http-equiv="content-language" content="{{ language.code }}-{{ language.flag }}">
<link rel="alternate" hreflang="x-default" href="{{ site.url }}" />
{% endif %}
<link rel="alternate" hreflang="{{ language.code }}" href="{{ site.url }}/{{ language.code }}" />
{% endfor %}

<title>{{ site.i18ns.index_meta_title }}</title>
<meta name="title" content="{{ site.i18ns.index_meta_title }}" />
<meta name="description" content="{{ site.i18ns.index_meta_description }}" />

<meta name="robots" content="index, follow" />
<meta name="author" content="{{ site.name }}" />
<meta name="publisher" content="{{ site.name }}" />
<meta name="generator" content="{{ site.name }}" />
<meta name="revisit-after" content="1 days" />
<meta name="distribution" content="web" />
<meta name="rating" content="general" />
<meta name="language" content="{{ session.language }}" />

<meta property="og:title" content="{{ site.i18ns.index_meta_title }}" />
<meta property="og:description" content="{{ site.i18ns.index_meta_description }}" />
<meta property="og:image" content="{{ site.files.slides[0].urls.hd }}" />
<meta property="og:url" content="{{ site.url }}" />
<meta property="og:site_name" content="{{ site.name }}" />
<meta property="og:locale" content="{{ session.language }}_{{ session.language | upper }}" />

<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="{{ site.i18ns.index_meta_title }}" />
<meta name="twitter:description" content="{{ site.i18ns.index_meta_description }}" />
<meta name="twitter:url" content="{{ site.url }}" />
{% for feature in site.features if feature.code == 'social-twitter' %}
<meta name="twitter:site" content="@{{ feature.value }}" />
<meta name="twitter:creator" content="@{{ feature.value }}" />
{% endfor %}
<meta name="twitter:image" content="{{ site.files.slides[0].urls.hd }}" />
<meta name="twitter:image:alt" content="{{ site.i18ns.index_meta_description }}" />
{% endblock %}

{% block content %}
<div class="container-fluid">

	<!-- block principal -->

	<div class="row">
		<div class="col-12 px-0">

			<div class="carousel slide carousel-fade" data-ride="carousel">
				<div class="carousel-inner">
					{% for i, file in site.files.slides %}
					<div class="carousel-item {{ i == 0 ? 'active' }}" data-bs-interval="{{ (i+1) * 1000 }}">
						<div class="embed-responsive embed-responsive-7by3 d-block d-md-none">
							<img class="embed-responsive-item obj-cover" src="{{ file.urls.hd }}">
						</div>
						<div class="embed-responsive embed-responsive-13by4 d-none d-md-block">
							<img class="embed-responsive-item obj-cover" src="{{ file.urls.hd }}">
						</div>
					</div>
					{% endfor %}
				</div>
			</div>

		</div>
	</div>

	<div class="row justify-content-center pt-5">
		<div class="col-12 d-flex flex-column justify-content-center align-items-center">
			{% if site.type != 'custom-rhea' %}
			<p class="text-center h2 w-100 pb-3 text-nunito">
				{{ site.name_ext }}
			</p>
			{% endif %}
			<h1 class="text-center h4 lh150 pb-4 {{ site.type != 'custom-rhea' ? 'text-nunito' :'' }} px-lg-5 mx-lg-5">
				{{ site.i18ns.index_h2 | replace( html_vars ) }}
			</h1>
			{% if preregister != 1 %}
			<div class="text-center w-100 pb-4">
				{% include "_html_download_app.html" with { showpwa: 0 } %}
			</div>
			<p class="text-center w-100 h120">
				<span class="text-primary">{{ ( stats.users.total ) | number_format(0,'','.') }}</span>
				{{ i18n( 'page_home::stats::total' ) }},
				<span class="text-primary">{{ stats.users.recent8 | number_format(0,'','.') }}</span>
				{{ i18n( 'page_home::stats::online' ) }}
			</p>
			{% endif %}
		</div>

		{% if preregister == 1 %}
		<div class="col-12 col-lg-8 col-xl-6 d-flex flex-column justify-content-center align-items-center">
			<form class="card-body bg-cardbg text-cardtxt form w-100" action="?" method="post">
				<div class="form-group">
					<input type="email" class="form-control" name="preregister[email]"
						placeholder="{{ i18n( 'page_home::preregister::label' ) }}" required>
					{% if campaign is not null %}
					<div class="h85 text-center mt-2 font-italic">
						{{ i18n( 'page_home::preregister::using_code' )
						| replace( { '%code%': campaign.code | upper } ) }}
						- <a href="?fn_clearcode=1">{{ i18n( 'page_home::preregister::code_clear' ) }}</a>
					</div>
					{% endif %}
				</div>
				<div class="text-center">
					<button type="submit" class="btn btn-primary px-4" name="fn_preregister">
						{{ i18n( 'page_home::preregister::button_now' ) }}
					</button>
					<div class="pt-2 h90 lh110">
						{{ i18n( 'page_home::preregister::description' ) | replace( { '%month%': preregister_months })
						}}
					</div>
					<div class="pt-2 h90 lh110">
						{% if campaign is not null %}
						{{ i18n( 'page_home::preregister::membership_afiliation' )
						| replace( { '%code%': campaign.code | upper, '%month%': campaign_months }) }}
						{% else %}
						{{ i18n( 'page_home::preregister::membership_welcome' )
						| replace( { '%month%': preregister_months }) }}
						{% endif %}
					</div>
				</div>
			</form>
		</div>
		{% endif %}
	</div>

	<div class="row pt-5">
		<div class="col-12 px-0">

			<!-- block 1 -->

			{% if site.files.home[0] %}
			<div class="d-flex align-items-center pb-5">
				<div class="flex-grow-1 border border-bodytxt border-1" style="height: 1px;"></div>
				{% if site.type != 'custom-rhea' %}
				<div class="text-center px-3">
					<i class="far fa-fw fa-2x fa-comments"></i>
				</div>
				{% endif %}
				<div class="flex-grow-1 border border-bodytxt border-1" style="height: 1px;"></div>
			</div>

			<div class="container">
				<div class="row ">
					<div class="col-md-6 mb-5">
						<div class="position-relative embed-responsive embed-responsive-4by3">
							<img class="embed-responsive-item obj-cover" src="{{ site.files.home[0].urls.hd }}">
						</div>
					</div>
					<div
						class="col-md-6 mb-5 d-flex flex-column justify-content-center e2e-inner-html-bound e2e-inner-html-interpolated">
						<div class="pb-4">
							<h2 class="h2 mb-3 {{ site.type != 'custom-rhea' ? 'text-nunito' :'' }}">{{
								site.i18ns.block1_title }}</h2>
							<p class="opacity-60 h120 lh150">{{ site.i18ns.block1_text | replace ( { '%users_total%':
								stats.users.total, '%users_connected%': stats.users.recent8 } ) | raw }}</p>
						</div>
						<div class="text-center text-lg-right">
							{% if preregister != 1 %}
							{% include "_html_download_app.html"
							with { showonlypwa: 1, text: i18n('page_home::button::register' ), page: 'register' } %}
							{% else %}
							<a class="btn btn-primary px-4" onclick="window.scrollBy(0, -10000)">
								{{ i18n( 'page_home::preregister::button' ) }}
							</a>
							{% endif %}
						</div>
					</div>
				</div>
			</div>
			{% endif %}

			<!-- block 2 -->

			{% if site.files.home[1] %}
			<div class="d-flex align-items-center pb-5">
				<div class="flex-grow-1 border border-bodytxt border-1" style="height: 1px;"></div>
				{% if site.type != 'custom-rhea' %}
				<div class="text-center px-3">
					<i class="far fa-fw fa-2x fa-heart"></i>
				</div>
				{% endif %}
				<div class="flex-grow-1 border border-bodytxt border-1" style="height: 1px;"></div>
			</div>

			<div class="container">
				<div class="row flex-column-reverse flex-md-row">
					<div
						class="col-md-6 mb-5 d-flex flex-column justify-content-center e2e-inner-html-bound e2e-inner-html-interpolated">
						<div class="pb-4">
							<h2 class="h2 mb-3 {{ site.type != 'custom-rhea' ? 'text-nunito' :'' }}">{{
								site.i18ns.block2_title }}</h2>
							<p class="opacity-60 h120 lh150">{{ site.i18ns.block2_text | replace ( { '%users_total%':
								stats.users.total, '%users_connected%': stats.users.recent8 } ) | raw }}</p>
						</div>
						<div class="text-center text-lg-right">
							{% if preregister != 1 %}
							{% include "_html_download_app.html" with { showonlypwa: 1, text: i18n(
							'page_home::button::profiles' ) } %}
							{% else %}
							<a class="btn btn-primary px-4" onclick="window.scrollBy(0, -10000)">
								{{ i18n( 'page_home::preregister::button' ) }}
							</a>
							{% endif %}
						</div>
					</div>
					<div class="col-md-6 mb-5">
						<div class="position-relative embed-responsive embed-responsive-4by3">
							<img class="embed-responsive-item obj-cover" src="{{ site.files.home[1].urls.hd }}">
						</div>
					</div>
				</div>
			</div>
			{% endif %}

			<!-- block 3 -->

			{% if site.files.home[2] and preregister != 1 %}
			<div class="d-flex align-items-center pb-5">
				<div class="flex-grow-1 border border-bodytxt border-1" style="height: 1px;"></div>
				{% if site.type != 'custom-rhea' %}
				<div class="text-center px-3">
					<i class="far fa-fw fa-2x fa-mobile"></i>
				</div>
				{% endif %}
				<div class="flex-grow-1 border border-bodytxt border-1" style="height: 1px;"></div>
			</div>

			<div class="container">
				<div class="row ">
					<div class="col-md-6 mb-5">
						<div class="position-relative embed-responsive embed-responsive-4by3">
							<img class="embed-responsive-item obj-cover" src="{{ site.files.home[2].urls.hd }}">
						</div>
					</div>
					<div
						class="col-md-6 mb-5 d-flex flex-column justify-content-center e2e-inner-html-bound e2e-inner-html-interpolated">
						<div class="pb-4">
							<h2 class="h2 mb-3 {{ site.type != 'custom-rhea' ? 'text-nunito' :'' }}">{{
								site.i18ns.block3_title }}</h2>
							<p class="opacity-60 h120 lh150">{{ site.i18ns.block3_text | replace ( { '%users_total%':
								stats.users.total, '%users_connected%': stats.users.recent8 } ) | raw }}</p>
						</div>
						<div class="text-center text-lg-right">
							{% include "_html_download_app.html" %}
						</div>
					</div>
				</div>
			</div>
			{% endif %}

		</div>
	</div>


	{% if preregister != 1 %}

	<!-- premium_advantages -->

	<div class="row table-navbg2 text-dark">
		<div class="col-12">
			<div class="container">
				<div class="row justify-content-center" id="features">
					<div class="col-xl-12 col-xxl-10 py-5 px-3">
						<div class="container">
							<div class="row pt-4">

								<!-- free -->
								<div class="col-12 col-lg-6 px-0 px-lg-2 mb-3">
									<div class="bg-cardbg text-cardtxt rounded shadow-sm p-3 pb-4 h-100">
										<h2 class="h5 text-center font-weight-bold my-2 mb-3">
											{{ i18n('page_advantages::free::label') }}
										</h2>
										{% for advantage in advantages if advantage.level == 'free' and session.tmk in
										advantage.tmks %}
										<h3 class="opacity-80 mb-1 pb-1 px-2">
											<i class="fas fa-xs fa-circle pr-2 text-success"></i>
											{{ i18n('page_advantages::advantages::' ~ advantage.code) }}
										</h3>
										{% endfor %}
									</div>
								</div>

								<!-- premium -->
								<div class="col-12 col-lg-6 px-0 px-lg-2 mb-3">
									<div class="bg-cardbg text-cardtxt rounded shadow-sm p-3 pb-4 h-100">
										<h2 class="h5 text-center font-weight-bold my-2 mb-3">
											{{ i18n('page_advantages::premium::label') }}
										</h2>
										{% for advantage in advantages if advantage.level == 'premium' and session.tmk
										in advantage.tmks %}
										<h3 class="d-flex opacity-80 mb-1 pb-1 px-2">
											<i class="fas fa-xs fa-crown pr-2 text-warning"></i>
											<div>{{ i18n('page_advantages::advantages::' ~ advantage.code) }}</div>
										</h3>
										{% endfor %}
									</div>
								</div>

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

	{% endif %}

</div>
{% endblock %}