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


{% block head_settings %}
    <script>
        window.ouibeatSlideshowConf = {
            callbackUri: '{{ callbackUri | raw }}',
            displayedContentsOnLoadMore: {{ settings.displayedContentsOnLoadMore | default( '9999' ) }},
            displaySocialNetworksFilters: {{ settings.displaySocialNetworksFilters ? 'true' : 'false' }},
            displayContentTypesFilters: {{ settings.displayContentTypesFilters ? 'true' : 'false' }},
            addLinkToPostOnSocialNetworkIcon: {{ settings.addLinkToPostOnSocialNetworkIcon ? 'true' : 'false' }},
            addLinkToPostOnImage: {{ settings.addLinkToPostOnImage ? 'true' : 'false' }},
            textCropLengthTextOnly: {{ settings.textCropLengthTextOnly | default( '9999' ) }},
            textCropLengthWithMedia: {{ settings.textCropLengthWithMedia | default( '9999' ) }},
            flickitySettings: {{ flickitySettings | raw }}
        };
    </script>
    <script src="https://www.youtube.com/iframe_api" type="text/javascript"></script>
{% endblock %}


{% block head_config_end %}
<style>
    {% if settings.displayContentSocialNetwork != '1' %}
        .item-social .metadata .social-network .social-network-icon {display: none;}
    {% endif %}

    {% if settings.displayContentAuthorUsername != '1' %}
        .item-social .metadata .author .author-username {display: none;}
    {% endif %}

    {% if settings.displayContentAuthorPicture != '1' %}
        .item-social .metadata .author .author-picture {display: none;}
    {% endif %}

    {% if settings.displayContentDate != '1' %}
        .item-social .metadata .date {display: none;}
    {% endif %}

    {% if settings.displayProgressBar != '1' %}
        .progress-bar {display: none;}
    {% endif %}

    {# Custom CSS #}
    {{ settingsEntity.getCustomCss | raw }}
</style>
{% endblock %}


{% block content_main %}
    <div class="top-items">
        {# Social Networks Links #}
        {% if settings.displaySocialNetworksLinks %}
            <div class="social-networks-links">
                <ul>
                    {% for socialNetworksLink in settings.socialNetworksLinks %}
                        <li class="social-network-link">
                            <a href="{{ socialNetworksLink.url | prefix_url }}" target="_blank">
                                <i class="icon icon_{{ socialNetworksLink.network }}"></i>
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        {% endif %}

        {# Filters #}
        {% if settings.displaySocialNetworksFilters or settings.displayContentTypesFilters %}
            <div class="filters">
                <div class="filters-label">
                    {{ attribute( translations, 'filters-label' ) }}
                    <i class="icon icon_chevron-bottom"></i>
                </div>
                <div class="filters-items">
                    {# All - Reset All Filters #}
                    <div class="filter-item" data-checked="1" data-type="networks">
                        <label id="filter-all">
                            <i class="icon icon_checkmark"></i>
                            {{ attribute( translations, 'filters-all' ) }}
                        </label>
                    </div>
                    
                    {# Social Networks Filters #}
                    {% set socialNetworksFilters = ['twitter', 'instagram', 'facebook', 'linkedin', 'youtube'] %}
                    {% if settings.displaySocialNetworksFilters %}
                        <div class="separator"></div>
                        {% for socialNetworksFilter in socialNetworksFilters %}
                            {% if event.isNetworkActive( socialNetworksFilter ) %}
                                <div class="filter-item" data-checked="1" data-type="networks">
                                    <input checked="checked" data-type="networks" id="filter-{{ socialNetworksFilter }}" type="checkbox" name="filter" data-filter="{{ socialNetworksFilter }}" value="" />
                                    <label for="filter-{{ socialNetworksFilter }}">
                                        <i class="icon icon_checkmark"></i>
                                        {{ attribute( translations, 'socialNetworksFilters-' ~ socialNetworksFilter ) }}
                                    </label>
                                </div>
                            {% endif %}
                        {% endfor %}
                    {% endif %}

                    {# Content Types Filters #}
                    {% set contentTypesFilters = ['photo', 'video', 'text'] %}
                    {% if settings.displayContentTypesFilters %}
                        <div class="separator"></div>
                        {% for contentTypesFilter in contentTypesFilters %}
                            <div class="filter-item" data-checked="1" data-type="contents">
                                <input checked="checked" data-type="contents" id="filter-{{ contentTypesFilter }}" type="checkbox" name="filter" data-filter="{{ contentTypesFilter }}" value="" />
                                <label for="filter-{{ contentTypesFilter }}">
                                    <i class="icon icon_checkmark"></i>
                                    {{ attribute( translations, 'contentTypesFilters-' ~ contentTypesFilter ) }}
                                </label>
                            </div>
                        {% endfor %}
                    {% endif %}
                </div>
            </div>
        {% endif %}
    </div>

    {# Slideshow #}
    <div class="slideshow"></div>

    {# Progress Bar #}
    <div class="progress-bar">
        <div class="progress-bar-track"></div>
    </div>

    {# Previous & Next Buttons #}
    {% if settings.flickityPrevNextButtons %}
        <div class="prev-next-buttons-container">
        </div>
    {% endif %}
{% endblock %}


{% block foot_config %}
{% endblock %}