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

{% block title %}{{ event.name }} - {{ 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 {
    height: {{ settings.getSettings.screenHeight }}px;
    width: {{ settings.getSettings.screenWidth }}px;
    overflow: hidden;
    background-color:{{ settings.getSettings.backgroundColor }};
    font-family:{{ settings.getSettings.mainFont|replace({'+': ' '})  }}, sans-serif;
}

/* Grid content */
.grid-block, .grid-container {
    -webkit-transition: all {{ settings.getSettings.transitionDuration / 1000 }}s linear;
    transition: all {{ settings.getSettings.transitionDuration / 1000 }}s linear;
}
.grid-text, .grid-username{color:{{ settings.getSettings.blockTextColor }};}
.grid-text {font-size: {{ settings.getSettings.blockTextSize }}px;max-height: {{ settings.getBlockMaxTextHeight }}px;}
.grid-username {
    font-weight: {{ settings.getSettings.mainFontIsBold ? 'bold' : 'normal' }};
{% if settings.getSettings.blockPictoUserSize == '0' %}
    font-size:{{ settings.getSettings.blockTextSize }}px;
{% else %}
    font-size:{{ settings.getSettings.blockPictoUserSize }}px;
{% endif %}
}

.grid-username:before {
    {% if settings.getSettings.bannerBgColor != '' %}background-color:{{ settings.getSettings.bannerBgColor }};{% endif %}
    {% if settings.getSettings.bannerBgOpacity != '' %}
        opacity:{% if settings.getSettings.bannerBgOpacity == '100' %}1{% else %}0.{{ settings.getSettings.bannerBgOpacity }}{% endif %};
    {% endif %}
}
.lay-twitter-hl .grid-text,
.lay-default-hl .grid-text{
{% if settings.getSettings.blockHLTextSize == '0' %}
    font-size:{{ settings.getSettings.blockTextSize }}px;
    max-height: {{ settings.getBlockMaxTextHeight }}px;
{% else %}
    font-size:{{ settings.getSettings.blockHLTextSize }}px;
    max-height:{{ settings.getBlockHLMaxTextHeight }}px;
{% endif %}
}
.lay-twitter-hl .grid-username,
.lay-default-hl .grid-username {
{% if settings.blockHLPictoUserSize == '0' %}
    font-size:{{ settings.getSettings.blockTextSize }}px;
{% else %}
    font-size:{{ settings.getSettings.blockHLPictoUserSize }}px;
{% endif %}
}
.grid-container, .layout-twitter .grid-image:before,.layout-twitter .grid-container{background-color: {{ settings.getSettings.blockBackgroundColor }};}

/* Header */
.main-header{background:{{ settings.getSettings.headerBackgroundColor }};color:{{ settings.getSettings.headerTextColor }};}
.header-name {background-image: url({{ settings.getSettings.headerLogoColor == 'white' ? asset('assets/images/logos/logo-ouibeat-white.png') : asset('assets/images/logos/logo-ouibeat.png') }});}
{% if settings.getSettings.headerLogoHidden %}
.header-name {display: none;}
.header-logoevent {left:30px;right:30px;background-position: center right;}
{% endif %}
.header-logoevent {background-image: url({{ settings.getWebMainLogoImagePath != 'uploads/events/' ? asset(settings.getWebMainLogoImagePath) : '#' }});}
{% if settings.getSettings.headerFontSize %}
.header-event {font-size: {{ settings.getSettings.headerFontSize }}px;}
{% endif %}

/* Footer */
.main-footer{background:{{ settings.getSettings.footerBackgroundColor }};color:{{ settings.getSettings.footerTextColor }};}

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

</style>
{% endblock %}

{% block foot_config %}
<script>
// Default sensitive values
var loadingScreenDuration = {{ settings.getSettings.loadingScreenDuration }} || 5000;
var loadingScreenInterval = {{ settings.getSettings.loadingScreenInterval }} || 3600000;

var footerLogos = [];
{% for logo in settings.logosFooter %}
footerLogos.push('{{ asset(logo.getWebPath) }}');
{% endfor %}


// Settings
var gridSettings = {
    blockSize: {{ settings.getSettings.blockSize }},
    footerLogos: footerLogos,
    callbackUrl: "{{ path('event_refresh', { 'event' : event.id }) }}",
    displayFooter:  {{ settings.getSettings.displayFooter ? 'true' : 'false' }},
    displayHeader:  {{ settings.getSettings.displayHeader ? 'true' : 'false' }},
    logosFooterAnimDuration:  {{ settings.getSettings.logosFooterAnimDuration }},
    gridElement: document.getElementById('grid-layout'),
    gridWrapper: document.getElementById('grid-wrapper'),
    HighlightMultiplier: {{ settings.getSettings.highlightMultiplier }},
    isScrolling:   {{ settings.getSettings.isScrolling ? 'true' : 'false' }},
    loadingScreen: document.getElementById('loading-screen'),
    loadingContent: document.getElementById('loading-content'),
    loadingScreenDuration: loadingScreenDuration,
    loadingScreenInterval: loadingScreenInterval,
    nbColumns: {{ settings.getSettings.nbColumns }},
    nbRows: {{ settings.getSettings.nbRows }},
    refreshDelay: {{ settings.getSettings.refreshDelay }},
    refreshDelayInitial: {{ settings.getSettings.refreshDelayInitial }},
    screenHeight: {{ settings.getSettings.screenHeight }},
    screenWidth: {{ settings.getSettings.screenWidth }},
    scrollingSpeed: "{{ settings.getSettings.scrollingSpeed }}",
    scrollingDirection: "{{ settings.getSettings.scrollingDirection }}",
    transitionDuration: {{ settings.getSettings.transitionDuration }},
    typeTransition: "{{ settings.getSettings.typeTransition }}",
    videoLoop:  {{ settings.getSettings.videoLoop ? 'true' : 'false' }},
};
</script>
{% 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" style="background-image:url({{ asset(instructionContent | default('assets/images/illus/default-ouibeat.png')) }});"></div></div>
{% if settings.getSettings.displayHeader %}
<header id="main-header" class="main-header">
    <h1 class="header-event">{{ settings.getSettings.headerTitle }}</h1>
    <h2 class="header-name"></h2>
    <h1 class="header-logoevent"></h1>
</header>
{% endif %}
<div id="grid-wrapper" class="grid-wrapper" style="background-color:{{ settings.getSettings.blockBackgroundColor }};">
<div id="grid-layout" class="grid-layout" style="background-color:{{ settings.getSettings.blockBackgroundColor }};"></div>
</div>
{% if settings.getSettings.displayFooter %}
<footer id="main-footer" class="main-footer">
    <ul class="footer-logos" id="main-logos">
        {% for logo in settings.logosFooter %}
        <li><img src="{{ asset(logo.getWebPath) }}" /></li>
        {% endfor %}
    </ul>
</footer>
{% endif %}
{% endblock %}