{% extends "::event-responsive.html.twig" %}

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

{% block head_config %}
<link href='//fonts.googleapis.com/css?family={{ settings.getSettings.mainFont|default('Muli') }}:300,400' rel='stylesheet' type='text/css' />
{% endblock %}

{% block head_config_end %}
<style>

/* Layout */
html,
body {
    background-color: {{ settings.getSettings.backgroundColor }};
}

/* Grid content */
.grid-block,
.grid-container {
    -webkit-transition: all {{ settings.getSettings.transitionDuration / 1000 }}s linear;
    transition: all {{ settings.getSettings.transitionDuration / 1000 }}s linear;
}


/* Wrapper */
.grid-wrapper {
    background-color: {{ settings.getSettings.backgroundColor }};
{% if settings.getSettings.backgroundImagePath is not null  %}
    background-image: url({{ asset( settings.getWebBackgroundImagePath ) }});
    background-size: cover;
{% endif %}
}


/* Block default */
{% if settings.getSettings.blockBackgroundColor != '' %}
.grid-username--has-text:before,
.grid-container {
    background-color: {{ settings.getSettings.blockBackgroundColor }};
}
{% endif %}

{% if settings.getSettings.blockFont != '' %}
.grid-text,
.grid-username {
    font-family: {{ settings.getSettings.blockFont }};
}
{% endif %}

{% if settings.getSettings.blockTextSize != '' %}
.grid-text,
.grid-username {
    font-size: {{ settings.getSettings.blockTextSize }}px;
}
{% endif %}

{% if settings.getSettings.blockTextColor != '' %}
.grid-text,
.grid-username {
    color: {{ settings.getSettings.blockTextColor }};
}
{% endif %}

{% if settings.getSettings.blockAuthorNameSize != '' %}
.content-author,
.grid-username--has-text .content {
    font-size: {{ settings.getSettings.blockAuthorNameSize }}px;
}
{% endif %}

{% if blockAuthorLineHeight != '' %}
.grid-username:not(.grid-username--has-text),
.grid-username .content {
    height: {{ blockAuthorLineHeight }}px;
    line-height: {{ blockAuthorLineHeight }}px;
}
.content-author {
    line-height: {{ blockAuthorLineHeight }}px;
}
{% endif %}


{% if settings.getSettings.blockAuthorImageSize != '' %}
.grid-authorpictureurl {
    width: {{ settings.getSettings.blockAuthorImageSize }}px;
    height: {{ settings.getSettings.blockAuthorImageSize }}px;
}
.grid-authorname {
    padding-left: {{ settings.getSettings.blockAuthorImageSize + 15}}px;
}
{% endif %}

{% if settings.getSettings.blockNetworkSize != '' %}
.grid-main-icon .icon,
.grid-username .icon {
    font-size: {{ settings.getSettings.blockNetworkSize }}px;
}
.grid-main-icon .icon {
    line-height: 1;
}
    {% if not settings.getSettings.hideAllProfilePictures %}
    .grid-authorname {
        padding-right: {{ settings.getSettings.blockNetworkSize + 15}}px;
    }
    {% endif %}
{% endif %}

{% if settings.getSettings.hideAllProfilePictures %}
.grid-authorpictureurl {
    display: none;
}
.grid-username .icon {
    left: 0;
    right: auto;
}
    {% if settings.getSettings.blockNetworkSize != '' %}
    .grid-authorname {
        padding-left: {{ settings.getSettings.blockNetworkSize + 15}}px;
        padding-right: 0;
    }
    {% endif %}
{% endif %}


/* Block HL */

{% if settings.getSettings.blockBackgroundColor != '' %}
.lay-default-hl .grid-username--has-text:before,
.lay-default-hl .grid-container {
    background-color: {{ settings.getSettings.blockBackgroundColor }};
}
{% endif %}

{% if settings.getSettings.blockHLFont != '' %}
.lay-default-hl .grid-text,
.lay-default-hl .grid-username {
    font-family: {{ settings.getSettings.blockHLFont }};
}
{% endif %}

{% if settings.getSettings.blockHLTextSize != '' %}
.lay-default-hl .grid-text,
.lay-default-hl .grid-username {
    font-size: {{ settings.getSettings.blockHLTextSize }}px;
}
{% endif %}

{% if settings.getSettings.blockHLTextColor != '' %}
.lay-default-hl .grid-text,
.lay-default-hl .grid-username {
    color: {{ settings.getSettings.blockHLTextColor }};
}
{% endif %}

{% if settings.getSettings.blockHLAuthorNameSize != '' %}
.lay-default-hl .content-author,
.lay-default-hl .grid-username--has-text .content {
    font-size: {{ settings.getSettings.blockHLAuthorNameSize }}px;
}
{% endif %}

{% if blockAuthorLineHeightHL != '' %}
.lay-default-hl .grid-username:not(.grid-username--has-text),
.lay-default-hl .grid-username .content {
    height: {{ blockAuthorLineHeightHL }}px;
    line-height: {{ blockAuthorLineHeightHL }}px;
}
.lay-default-hl .content-author {
    line-height: {{ blockAuthorLineHeightHL }}px;
}
{% endif %}

{% if settings.getSettings.blockHLAuthorImageSize != '' %}
.lay-default-hl .grid-authorpictureurl {
    width: {{ settings.getSettings.blockHLAuthorImageSize }}px;
    height: {{ settings.getSettings.blockHLAuthorImageSize }}px;
}
.lay-default-hl .grid-authorname {
    padding-left: {{ settings.getSettings.blockHLAuthorImageSize + 30}}px;
}
{% endif %}

{% if settings.getSettings.blockHLNetworkSize != '' %}
.lay-default-hl .grid-main-icon .icon,
.lay-default-hl .grid-username .icon {
    font-size: {{ settings.getSettings.blockHLNetworkSize }}px;
}

.lay-default-hl .grid-authorname {
    padding-right: {{ settings.getSettings.blockHLNetworkSize + 30}}px;
}
{% endif %}

/* Common */

{% if settings.getSettings.blockOverlayOpacity != '' %}
.lay-default-hl .grid-username--has-text:before,
.grid-username--has-text:before{
    opacity: 0.{{ settings.getSettings.blockOverlayOpacity }};
}
{% endif %}

{% if settings.getSettings.blockOverlayBackgroundColor != '' %}
.lay-default-hl .grid-username--has-text:before,
.grid-username--has-text:before{
    background-color: {{ settings.getSettings.blockOverlayBackgroundColor }};
}
{% endif %}

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

</style>
{% endblock %}

{% block content_main %}
<div id="loading-screen" class="main-loadingscreen" style="background-color:{{ settings.getSettings.backgroundColor }};"><div data-hidden="1" id="loading-content" class="loadingcontent"></div></div>
<div id="grid-wrapper" class="grid-wrapper">
    <div id="grid-layout" class="grid-layout"></div>
</div>
{% endblock %}

{% block foot_config %}
<script>
// Default sensitive values
var ouibeatGrid = false;
var loadingScreenDuration = {{ settings.getSettings.loadingScreenDuration }} || 5000;
var loadingScreenInterval = {{ settings.getSettings.loadingScreenInterval }} || 3600000;
var screenConfigurations = {{ screenConfigurations | json_encode() | raw }} || [];
var highlightMode = "{{ settings.getSettings.highlightMode }}" || 'moderation';
var blockOverlayTextMaxChars = parseInt("{{ settings.getSettings.blockOverlayTextMaxChars }}",10) || 500;
var blockHLOverlayTextMaxChars = parseInt("{{ settings.getSettings.blockHLOverlayTextMaxChars }}",10) || 500;
var loadingVideoDuration = 0;

// Loading screen (loading as early as possible)
var loadingItem = "{{ asset(instructionContent | default('assets/images/illus/default-ouibeat.png')) }}",
    loadingItemExt = loadingItem.split('.').pop();

// Settings
var gridSettings = {
    blockOverlayTextMaxChars: blockOverlayTextMaxChars,
    blockHLOverlayTextMaxChars: blockHLOverlayTextMaxChars,
    callbackUrl: "{{ path('event_refresh', { 'event' : event.id }) }}",
    gridElement: document.getElementById('grid-layout'),
    gridWrapper: document.getElementById('grid-wrapper'),
    highlightMode: highlightMode,
    highlightMultiplier: {{ settings.getSettings.highlightMultiplier }},
    loadingItem: loadingItem,
    loadingScreen: document.getElementById('loading-screen'),
    loadingContent: document.getElementById('loading-content'),
    loadingScreenDuration: loadingScreenDuration,
    loadingScreenInterval: loadingScreenInterval,
    refreshDelay: {{ settings.getSettings.refreshDelay }},
    refreshDelayInitial: {{ settings.getSettings.refreshDelayInitial }},
    screenConfigurations: screenConfigurations,
    transitionDuration: {{ settings.getSettings.transitionDuration }},
    typeTransition: "{{ settings.getSettings.typeTransition }}",
    videoLoop:  {{ settings.getSettings.videoLoop ? 'true' : 'false' }},
};

// Video loading
if(loadingItemExt == 'mp4' || loadingItemExt == 'webm'){
    /* Create video */
    var loadingVideo = document.createElement('video');
    loadingVideo.src = loadingItem;
    loadingVideo.autoPlay = true;
    document.getElementById('loading-content').appendChild(loadingVideo);
    /* Trigger video when ready */
    var itvLoadingVideo = window.setInterval(function(t) {
        if (loadingVideo.readyState > 0) {
            gridSettings.loadingScreen.setAttribute('data-hidden', 0);
            gridSettings.loadingContent.setAttribute('data-hidden', 0);
            loadingVideo.play();
            gridSettings.loadingScreenDuration = (Math.round(loadingVideo.duration) - 1) * 1000;
            ouibeatGrid = new ouibeatResponsiveGrid(gridSettings);
            clearInterval(itvLoadingVideo);
        }
    }, 100);
}
else {
    document.getElementById('loading-content').style.backgroundImage = 'url(' + loadingItem + ')';
    ouibeatGrid = new ouibeatResponsiveGrid(gridSettings);
}

</script>
{% endblock %}