{% extends "::hopscotch.html.twig" %}

{% block title %}{{ event.title }} - {{ parent() }}{% endblock %}


{% block head_config %}
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,400i,700,700i" rel="stylesheet" />
<style>

{% if settings.getSettings.backgroundImagePath is not null  %}
.main-container {
    background-image: url({{ asset( settings.getWebBackgroundImagePath ) }});
}
{% endif %}

{% if settings.getSettings.hideAllProfilePictures %}
    .content-social {
        padding-top: 0;
        padding-left: 0;
    }

    .content-social .authorimage {
        display: none;
    }

    .content-social i[class*="icon"] {
        display: inline-block;
        margin-right: 12px;
        margin-top: 0.12em;
        font-size: 1.4em;
    }

    .content-social i[class*="icon_twitter"] {
        margin-top: 0.2em;
    }

    .content-social .authorname {
        display: inline-block;
    }

    .sliderbullet-wrapper {
        display: none;
    }

    .overlay__content .content-social i[class*="icon"] {
        margin-right: 20px;
    }
{% endif %}

{# Custom CSS #}
{{ settings.getCustomCss | raw }}

</style>
{% endblock %}

{% block foot_config %}
<script>
var hopItems = [
    {{ hopContents|json_encode|raw }},
    {{ prideOfContents|json_encode|raw }},
    {{ whatsHopContents|json_encode|raw }}
];
var hopSettings = {
    textMaxChars: parseInt("{{ settings.getSettings.textMaxChars }}",10),
    overlayTextMaxChars: parseInt("{{ settings.getSettings.overlayTextMaxChars }}",10),
    delayBeforeGridFilling: parseInt("{{ settings.getSettings.delayBeforeGridFilling }}",10),
    contentsPauseDuration: parseInt("{{ settings.getSettings.contentsPauseDuration }}",10),
    animationDurationBlock: parseInt("{{ settings.getSettings.animationDurationBlock }}",10),
    animationIntervalBlock: parseInt("{{ settings.getSettings.animationIntervalBlock }}",10),
    focusSlidesCount: parseInt("{{ settings.getSettings.focusSlidesCount }}",10),
    focusSlideDuration: parseInt("{{ settings.getSettings.focusSlideDuration }}",10)
};
var hopGrid = new hopscotchGrid(hopItems, hopSettings);
</script>
{% endblock %}

{% block content_main %}
<div class="header"><img src="{{ asset('themes/hopscotch/assets/images/logo.svg') }}" alt="Hopscotch" /></div>
<div class="main-container {% if settings.getSettings.backgroundImagePath is not null %} main-container--background {% endif %}">
    <div class="main-container__grid grid-1">
        <div class="grid-details">
            <h2>#HOP</h2>
            <p>Hopscotch<br />en live</p>
        </div>
        <div class="grid-content"></div>
    </div>
    <div class="main-container__grid grid-2">
        <div class="grid-details">
            <h2>PRIDE OF</h2>
            <p>Nos réalisations sont<br />notre plus grande fierté</p>
        </div>
        <div class="grid-content"></div>
    </div>
    <div class="main-container__grid grid-3">
        <div class="grid-details">
            <h2>What’s HOP?</h2>
            <p>Ce qu'il faut<br />savoir !</p>
        </div>
        <div class="grid-content"></div>
    </div>
</div>
<div class="main-overlay overlay-1" data-overlay--visible="0"><div class="sliderbullet-wrapper"><div class="sliderbullet-wrapper__content"></div></div></div>
<div class="main-overlay overlay-2" data-overlay--visible="0"><div class="sliderbullet-wrapper"><div class="sliderbullet-wrapper__content"></div></div></div>
<div class="main-overlay overlay-3" data-overlay--visible="0"><div class="sliderbullet-wrapper"><div class="sliderbullet-wrapper__content"></div></div></div>
<div class="page-overlay" data-overlay--visible="1"></div>
{% endblock %}

{% block head_templates %}
<script id="template-item" type="text/template">
<div class="tpl___classname___tpl">
    <div class="block__media">tpl___img___tpl</div>
    <div class="block__content">
        <h2 class="content-subtitle">tpl___subtitle___tpl</h2>
        <h1 class="content-title">tpl___title___tpl</h1>
        <p class="content-text">tpl___text___tpl</p>
        <div class="content-social">tpl___social___tpl</div>
    </div>
</div>
</script>
<script id="template-overlay" type="text/template">
<div class="tpl___classname___tpl">
    <div class="overlay__media">tpl___img___tpl</div>
    <div class="overlay__content">
        <h2 class="content-subtitle">tpl___subtitle___tpl</h2>
        <h1 class="content-title">tpl___title___tpl</h1>
        <p class="content-text">tpl___text___tpl</p>
        <div class="content-social">tpl___social___tpl</div>
    </div>
</div>
</script>
<script id="template-sliderbullet" type="text/template">
<div class="tpl___classname___tpl">
    <div class="slider-bullet__img">tpl___img___tpl</div>
    <div class="slider-bullet__cover"></div>
</div>
</script>
{% endblock %}