{% extends 'frontend/base.html.twig' %}

{% block title %}
#SportBiz - {{ "nombre"|translate(evento, app.request.locale) }}
{% endblock %}

{% block javascripts %}
	{{ parent() }}
	<script type="text/javascript" src="{{ asset('assets/js/jquery.countdown.min.js') }}"></script>
	<script type="text/javascript">
		$(document).ready(function () {
		var endDate = '{{ evento.fechaRealizacion|date("F j, Y H:i:s") }}';

		$('#countdown').countdown({
			date: endDate,
			render: function (data) {
				$(this.el).html('<div class="wrapper-items">' + '<div class="item separador">' + '<span class="time">' + this.leadingZeros(data.days, 2) + '</span>' + '<span class="label"> {{ "countdown.dias"|trans }}</span>' + '</div>' + '<div class="item separador">' + '<span class="time">' + this.leadingZeros(data.hours, 2) + '</span>' + '<span class="label"> {{ "countdown.horas"|trans }}</span>' + '</div>' + '<div class="item separador">' + '<span class="time">' + this.leadingZeros(data.min, 2) + '</span>' + '<span class="label"> {{ "countdown.min"|trans }}</span>' + '</div>' + '<div class="item">' + '<span class="time">' + this.leadingZeros(data.sec, 2) + '</span>' + '<span class="label"> {{ "countdown.seg"|trans }}</span>' + '</div>' + '</div>');
			}
		});

                // Carrousel sección de "sedes" de evento
		var splideSedes = new Splide('.splide.sedes-evento-carousel', {
			//autoplay  : 'play',
			//type      : 'loop',
			//interval  : 2500,
			arrows    : false,
			pagination: false,
			perPage   : 1,
			drag: false
		});

		splideSedes.mount();

		$(".sedes-evento-carousel__control").click((el) => {
			splideSedes.go( $(el.target).data("sede") );
			$(".sedes-evento-carousel__control").removeClass("active");
			$(el.target).addClass("active");
		});

	});
	</script>
{% endblock %}

{% block body_content %}

	{{ include('frontend/secciones/evento/_nav.html.twig') }}

	{{ include('frontend/secciones/evento/_home.html.twig') }}

	{{ include('frontend/secciones/evento/_agenda.html.twig') }}

	{% if evento.tienePrograma %}
		{{ include('frontend/secciones/evento/_programa.html.twig') }}
	{% endif %}

	{% if evento.tieneComite %}
		{{ include('frontend/secciones/evento/_comite.html.twig') }}
	{% endif %}

	{% if evento.tieneSpeakers %}
		{{ include('frontend/secciones/evento/_speakers.html.twig') }}
	{% endif %}

	{% if evento.tienePartners %}
		{{ include('frontend/secciones/evento/_partners.html.twig') }}
	{% endif %}

	{% if evento.tieneEmpresasParticipantes %}
		{{ include('frontend/secciones/evento/_empresas.html.twig') }}
	{% endif %}

	{% if evento.esPresencial %}
		{% if sedes|length == 1 %}
			{# {{ include('frontend/secciones/evento/_sede.html.twig') }} #}
			{{ include('frontend/secciones/evento/_sedes.html.twig') }}
		{% endif %}

		{% if sedes|length > 1 %}
			{{ include('frontend/secciones/evento/_sedes.html.twig') }}
		{% endif %}
	{% endif %}

	{% if not evento.esEventoRealizado %}
		{% if not evento.urlPago %}
			{{ include('frontend/secciones/evento/_inscribase.html.twig') }}
		{% endif %}
	{% endif %}

	{{ include('frontend/secciones/_suscribase.html.twig', { 'backgroundClass': 'even' }) }}

	{{ include('frontend/_redes_sociales.html.twig') }}

{% endblock %}

{% block footernav %}
	<li>
		<a href="#sec-home">
			<i class="icon-check"></i>
			{{ 'titulo.sec.home'|trans }}</a>
	</li>
	<li>
		<a href="#sec-agenda">
			<i class="icon-check"></i>
			{{ 'titulo.sec.agenda'|trans }}</a>
	</li>
	<li>
		<a href="#sec-programa">
			<i class="icon-check"></i>
			{{ 'titulo.sec.programa'|trans }}</a>
	</li>
	<li>
		<a href="#sec-comite">
			<i class="icon-check"></i>
			{{ 'titulo.sec.comite'|trans }}</a>
	</li>
	<li>
		<a href="#sec-speakers">
			<i class="icon-check"></i>
			{{ 'titulo.sec.speakers'|trans }}</a>
	</li>
	<li>
		<a href="#sec-partners">
			<i class="icon-check"></i>
			{{ 'titulo.sec.partners'|trans }}</a>
	</li>
	<li>
		<a href="#sec-empresas">
			<i class="icon-check"></i>
			{{ 'titulo.sec.empresas'|trans }}</a>
	</li>
{% endblock %}