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

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


{% block head_config_end %}
<style>

html,body {
    font-family: {{ settings.mainFont|default('Muli')|replace({'+': ' '})  }}, sans-serif;
}

html {
    background: {{ settings.backgroundColor }} repeat top center;

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

/* ----------------------------------------------------------
  Banner
---------------------------------------------------------- */

.cc-banner,
.banner {background-color: {{ settings.headerBackgroundColor }};}
.banner__title {
    color: {{ settings.headerTextColor }};
    font-size: {{ settings.headerFontSize }}px;
}

{% if settings.displayHeader != '1' %}
.cc-banner-wrapper {display: none;}
{% endif %}

/* ----------------------------------------------------------
  Filters
---------------------------------------------------------- */

{% if (settings.displayContentTypeFilters != '1') and (settings.displaySocialNetworkFilters != '1')  %}
.filters {display: none;}
.cc-banner-wrapper {margin-bottom: 40px;}
{% endif %}

.filters [data-type="networks"] .icon {
    background-color: {{ settings.socialNetworkBackgroundColor }};
    color: {{ settings.socialNetworkIconColor }};
}

.filters [data-type="contents"] .icon {
    background-color:{{ settings.contentTypeBackgroundColor }};
    color:{{ settings.contentTypeIconColor }};
}

.filters label .icon {
    border-radius: {{ settings.filtersBorderRadius|default('99') }}px;
}

/* ----------------------------------------------------------
  Boxes
---------------------------------------------------------- */

{% if settings.twitterBlockAccountColor != '' %}
.push-item--twitter,
.item-social--twitter .item__header {background-color: {{ settings.twitterBlockAccountColor }};}
.push-item--twitter .icon,
.item-social--twitter .item__header .icon {color: {{ settings.twitterBlockAccountColor }};}
{% endif %}

{% if settings.instagramBlockAccountColor != '' %}
.push-item--instagram,
.item-social--instagram .item__header {background-color: {{ settings.instagramBlockAccountColor }};}
.push-item--instagram .icon,
.item-social--instagram .item__header .icon {color: {{ settings.instagramBlockAccountColor }};}
{% endif %}

{% if settings.facebookBlockAccountColor != '' %}
.push-item--facebook,
.item-social--facebook .item__header {background-color: {{ settings.facebookBlockAccountColor }};}
.push-item--facebook .icon,
.item-social--facebook .item__header .icon {color: {{ settings.facebookBlockAccountColor }};}
{% endif %}

{% if settings.youtubeBlockAccountColor != '' %}
.push-item--youtube,
.item-social--youtube .item__header {background-color: {{ settings.youtubeBlockAccountColor }};}
.push-item--youtube .icon,
.item-social--youtube .item__header .icon {color: {{ settings.youtubeBlockAccountColor }};}
{% endif %}

{% if settings.linkedinBlockAccountColor != '' %}
.push-item--linkedin,
.item-social--linkedin .item__header {background-color: {{ settings.linkedinBlockAccountColor }};}
.push-item--linkedin .icon,
.item-social--linkedin .item__header .icon {color: {{ settings.linkedinBlockAccountColor }};}
{% endif %}

{% if settings.photoboothBlockAccountColor is defined and settings.photoboothBlockAccountColor != '' %}
.push-item--photobooth,
.item-social--photobooth .item__header {background-color: {{ settings.photoboothBlockAccountColor }};}
.push-item--photobooth .icon,
.item-social--photobooth .item__header .icon {color: {{ settings.photoboothBlockAccountColor }};}
{% endif %}

/* ----------------------------------------------------------
  Item
---------------------------------------------------------- */

{% if (settings.textIconsBlockColor is defined and settings.textIconsBlockColor != '') %}
.items-list .icon_main {background-color: {{ settings.textIconsBlockColor }};}
.push-item, .item-social .item__header {color: {{ settings.textIconsBlockColor }};}
{% endif %}

{% if settings.blockOpacity != '' %}
.item-social .item__header {
    opacity:{% if settings.blockOpacity == '100' %}1{% else %}0.{{ settings.blockOpacity }}{% endif %};
}
{% endif %}

.item-social {background-color: {{ settings.blockBackgroundColor }}}

.item__footer a,
.item-social .item__content {
    color: {{ settings.blockTextColor }};
}
.item__content p {
    font-size: {{ settings.blockTextSize }}px;
}

/* ----------------------------------------------------------
  Load more
---------------------------------------------------------- */

.load-more a .icon {color: #ccc;}

{% if (settings.disablePoweredBy is defined and settings.disablePoweredBy == '1') %}
.powered-by {display: none;}
{% endif %}

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

</style>
{% endblock %}


{% block head_settings %}
<script>window.ouibeatWebConf={
    callbackUri: '{{ callbackUri | raw }}',
    nbContentForMobile: '{{ settings.displayedContentsOnInitMobile}}',
    twitterBlockAccount: '{{ settings.twitterBlockAccount | prefix_url }}',
    instagramBlockAccount: '{{ settings.instagramBlockAccount | prefix_url }}',
    facebookBlockAccount: '{{ settings.facebookBlockAccount | prefix_url }}',
    youtubeBlockAccount: '{{ settings.youtubeBlockAccount | prefix_url }}',
    linkedinBlockAccount: '{{ settings.linkedinBlockAccount | prefix_url }}',
    weiboBlockAccount: '{{ settings.weiboBlockAccount | prefix_url }}',
    displayFiltersLabels: {{ settings.displayFiltersLabels is defined and settings.displayFiltersLabels ? 'true' : 'false' }},
    displaySocialNetworkFilters: {{ settings.displaySocialNetworkFilters ? 'true' : 'false' }},
    displayContentTypeFilters: {{ settings.displayContentTypeFilters ? 'true' : 'false' }},
    displayTwitterBlock: {{ settings.displayTwitterBlock ? 'true' : 'false' }},
    displayInstagramBlock: {{ settings.displayInstagramBlock ? 'true' : 'false' }},
    displayFacebookBlock: {{ settings.displayFacebookBlock ? 'true' : 'false' }},
    displayYoutubeBlock: {{ settings.displayYoutubeBlock ? 'true' : 'false' }},
    displayLinkedinBlock: {{ settings.displayLinkedinBlock ? 'true' : 'false' }},
    displayWeiboBlock: {{ settings.displayWeiboBlock ? 'true' : 'false' }},
    twitterStatus: {{ event.isNetworkActive('twitter') ? 'true' : 'false' }},
    instagramStatus: {{ event.isNetworkActive('instagram') ? 'true' : 'false' }},
    facebookStatus: {{ event.isNetworkActive('facebook') ? 'true' : 'false' }},
    youtubeStatus: {{ event.isNetworkActive('youtube') ? 'true' : 'false' }},
    linkedinStatus: {{ event.isNetworkActive('linkedin') ? 'true' : 'false' }},
    photoboothStatus: {{ event.isNetworkActive('photobooth') ? 'true' : 'false' }},
    weiboStatus: {{ event.isNetworkActive('weibo') ? 'true' : 'false' }},
    blockTextCrop: {{ settings.blockTextCrop | default( '9999' ) }},
    blockImageLink: {{ imageLink ? 'true' : 'false' }},
{% if ( settings.photoboothFilters is defined and settings.photoboothFilters.status is defined and settings.photoboothFilters.status ) %}
    photoboothFilters: {{ settings.photoboothFiltersWebThemeOptions | json_encode() | raw }},
{% endif %}
};

{% if ( event.id == 496 ) %}
    document.addEventListener('contextmenu', event => event.preventDefault());
{% endif %}

</script>
{% endblock %}



{% block head_templates %}

{% if settings.disablePoweredBy is defined %}
    {% if settings.lang == 'en_uk' %}
        {% set follow_us = 'Follow us on' %}
        {% set see = 'See:' %}
        {% set photo = 'Photo:' %}
        {% set share = 'Share:' %}
    {% elseif settings.lang == 'fr_fr' %}
        {% set follow_us = 'Suivez-nous sur' %}
        {% set see = 'Voir :' %}
        {% set photo = 'Photo :' %}
        {% set share = 'Partager :' %}
    {% endif %}
{% else %}
    {% set follow_us = 'Suivez-nous sur' %}
    {% set see = 'Voir :' %}
    {% set photo = 'Photo :' %}
    {% set share = 'Partager :' %}
{% endif %}

<script id="template-network" type="text/template">
<li class="filter-push tpl___network___tpl">
    <a target="_blank" href="tpl___networkUrl___tpl" class="push-item push-item--tpl___network___tpl">
        <i class="icon icon_main icon_tpl___network___tpl"></i>
        {{ follow_us }}
        <strong>tpl___networkName___tpl</strong>
    </a>
</li>
</script>
<script id="template-item" type="text/template">
<li class="tpl___network___tpl tpl___itemtype___tpl">
    <div class="item-social item-social--tpl___network___tpl tpl___facebookcontestcss___tpl" data-id="tpl___id___tpl">
        <header class="item__header">
            <strong><i class="icon icon_main icon_tpl___network___tpl"></i>tpl___authorname___tpl</strong>
        </header>
        <div class="item__content">
            tpl___txt___tpl
            tpl___img___tpl
        </div>
        <footer class="item__footer">
            <a class="mode-view" href="tpl___sourcelink___tpl" target="_blank">
            <span>{{ see }}<i class="icon icon_icn-view"></i></span>
            </a>
            <a class="mode-download" href="tpl___sourcelink___tpl">
            <span>{{ photo }}<i class="icon icon_download"></i></span>
            </a>
            <span class="sep">|</span>
            <span class="mode-share">{{ share }}</span>
            <a class="share-link share--facebook" href="tpl___sharefacebook___tpl"><i class="icon icon_facebook-sq"></i></a>
            <a class="share-link share--twitter" href="tpl___sharetwitter___tpl"><i class="icon icon_twitter"></i></a>
            <a class="share-link share--linkedin" href="tpl___sharelinkedin___tpl"><i class="icon icon_linkedin"></i></a>
            <a class="share-link share--pinterest" href="tpl___sharepinterest___tpl"><i class="icon icon_pinterest"></i></a>
            <div class="facebook-contest">
                <a class="share-link share--facebook-contest" href="tpl___facebookcontestbuttonurl___tpl">
                    <i class="icon icon_trophy"></i>
                    tpl___facebookcontestbuttonlabel___tpl
                </a>
            </div>
        </footer>
    </div>
</li>
</script>
<script id="template-filter" type="text/template">
<span data-checked="1" data-type="tpl___type___tpl">
    <input checked="checked" data-type="tpl___type___tpl" id="filter-tpl___filter___tpl" type="checkbox" name="filter" data-filter="tpl___filter___tpl" value="" />
    <label for="filter-tpl___filter___tpl">
        <i class="icon icon_main icon_tpl___filter___tpl"></i>
        <span>tpl___filtername___tpl</span>
    </label>
</span>
</script>
{% endblock %}



{% block content_main %}
    {% if settings.disablePoweredBy is defined %}
        {% if settings.lang == 'en_uk' %}
            {% set load = 'Load' %}
            {% set more = 'more' %}
            {% set show_all = 'Show All' %}
        {% elseif settings.lang == 'fr_fr' %}
            {% set load = 'Chargez' %}
            {% set more = 'plus' %}
            {% set show_all = 'Tout Afficher' %}
        {% endif %}
    {% else %}
        {% set follow_us = 'Suivez-nous sur' %}
        {% set see = 'Voir' %}
        {% set photo = 'Photo' %}
        {% set share = 'Partager' %}
    {% endif %}

<div class="cc-banner-wrapper">
    <div class="centered-container cc-banner">
        <header class="banner">
            <h1 class="banner__title">{{ settings.headerTitle }}</h1>
            {% if asset(settingsEntity.getWebMainLogoImagePath | default('')) != '/' %}
            <img class="banner__logo" src="{{ asset(settingsEntity.getWebMainLogoImagePath | default('')) }}" alt="" />
            {% endif %}
        </header>
    </div>
</div>
<nav class="filters" id="filters">
    <div class="filters-wrapper" id="filters-wrapper" data-displayfilterlabels="0">
    <span data-checked="1" data-type="networks">
        <label id="filter-all">
            <i class="icon icon_main icon_tout"></i>
            <span>{{ show_all }}</span>
        </label>
    </span>
    </div>
</nav>
<div class="main-content">
    <div class="centered-container cc-items-list">
        <div class="items-list">
            <ul id="item-list-main"></ul>
        </div>
        <div class="load-more">
            <a href="#" id="load-more">
                <i class="icon icon_main icon_plus"></i>
                <span class="button">
                     {{ load }} <b><i> {{ more }}</i></b>
                </span>
            </a>
        </div>
        <div class="powered-by">
            Powered by <a target="_blank" href="http://ouibeat.com/"><img src="{{ asset('themes/web/assets/images/ouibeat.svg') }}" alt="" /></a>
        </div>
    </div>
</div>
{% endblock %}