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

{% block title %}{% trans %}Édition de l'affichage{% endtrans %} "{{ event.name }}" - {{ parent() }}{% endblock %}

{% block content_main %}

{% include 'OuibeatAppBundle:Backend:Event/info-events.html.twig' %}
{% include 'OuibeatAppBundle:Backend:Event/edit-sources-configurations.html.twig' %}

    <form role="form" method="POST" {{ form_enctype(formSettings) }}>

        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingConf">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseConf" aria-expanded="true" aria-controls="collapseConf">{% trans %}Configuration de la mosaïque{% endtrans %}</a>
                    </h4>
                </div>
                <div id="collapseConf" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingConf">
                    <div class="panel-body">
                        <!-- Mise en page -->
                        <h3>{% trans %}Mise en page{% endtrans %}</h3>
                        <div class="row">
                            <div class="col-md-4">{{ form_row(formSettings.screenWidth) }}</div>
                            <div class="col-md-4">{{ form_row(formSettings.screenHeight) }}</div>
                            <div class="col-md-4">{{ form_row(formSettings.nbColumns) }}</div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">{{ form_row(formSettings.backgroundColor) }}</div>
                            <div class="col-md-6">{{ form_row(formSettings.mainFont) }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingBannerTop">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseBannerTop" aria-expanded="true" aria-controls="collapseBannerTop">{% trans %}Bandeau haut{% endtrans %}</a>
                    </h4>
                </div>
                <div id="collapseBannerTop" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingBannerTop">
                    <div class="panel-body">
                        <h3>{% trans %}Bandeau haut{% endtrans %}</h3>
                        <div class="form-group">
                            {{ form_widget(formSettings.displayHeader) }}
                            {{ form_label(formSettings.displayHeader) }}
                        </div>
                        <div class="row">
                            <div class="col-md-12">{{ form_row(formSettings.headerTitle) }}</div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">{{ form_row(formSettings.headerBackgroundColor) }}</div>
                            <div class="col-md-4">{{ form_row(formSettings.headerTextColor) }}</div>
                            <div class="col-md-4">{{ form_row(formSettings.headerFontSize) }}</div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                {% if event.settings.getWebMainLogoImagePath is not null %}
                                    <p><img src="{{ asset(event.settings.getWebMainLogoImagePath) }}" width="100" /></p>
                                    {{ form_row(formSettings.removeMainLogo) }}
                                {% endif %}
                                {{ form_row(formSettings.mainLogoImageFile) }}
                            </div>
                        </div>
                        {% if formSettings.vars.value.headerLogoHidden == false %}
                            {{ form_row(formSettings.headerLogoColor) }}
                        {% endif %}
                    </div>
                </div>
            </div>

            {% if settings.getSetting('accessLogosFooter') == true or is_granted('ROLE_AGENT') %}

                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingBannerBottom">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseBannerBottom" aria-expanded="true" aria-controls="collapseBannerBottom">{% trans %}Bandeau bas{% endtrans %}</a>
                        </h4>
                    </div>
                    <div id="collapseBannerBottom" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingBannerBottom">
                        <div class="panel-body">
                            <!-- Footer -->
                            <h3>{% trans %}Bandeau bas{% endtrans %}</h3>
                            <div class="form-group">
                                {{ form_widget(formSettings.displayFooter) }}
                                {{ form_label(formSettings.displayFooter) }}
                            </div>
                            <div class="row">
                                <div class="col-md-6">{{ form_row(formSettings.footerBackgroundColor) }}</div>
                                <div class="col-md-6">{{ form_row(formSettings.footerTextColor) }}</div>
                            </div>
                            <hr />
                            <h3>{% trans %}Logos dans le bandeau bas{% endtrans %}</h3>
                            <h4>{% trans %}Animation{% endtrans %}</h4>
                            {{ form_row(formSettings.logosFooterAnimDuration) }}
                            <h4>{% trans %}Fichiers{% endtrans %}</h4>
                            <div id="logos-footer-block" class="collection-block" data-prototype="{{ form_widget(formSettings.logosFooter.vars.prototype)|e }}">
                                {% for logo in formSettings.logosFooter %}
                                    <div class="logos-footer-row item-row form-group">
                                        <p><img src="{{ asset(logo.vars.value.getWebPath) }}" width="100" /></p>
                                        {{ form_widget(logo) }}
                                    </div>
                                {% endfor %}
                            </div>
                            {% if formSettings.logosFooter|length == 0 %}
                                {% set count = 0 %}
                            {% else %}
                                {% set count = formSettings.logosFooter|keys|last + 1 %}
                            {% endif %}
                            <button type="button" id="add-another-logo" data-item-count="{{ count }}" class="btn btn-default add-another-item">{% trans %}Ajouter un nouveau logo{% endtrans %}</button>

                        </div>
                    </div>
                </div>

            {% endif %}

            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingContent">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseContent" aria-expanded="true" aria-controls="collapseContent">{% trans %}Affichage du contenu{% endtrans %}</a>
                    </h4>
                </div>
                <div id="collapseContent" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingContent">
                    <div class="panel-body">
                        <!-- Content -->
                        <h3>{% trans %}Contenu{% endtrans %}</h3>
                        <div class="row">
                            <div class="col-md-4">{{ form_row(formSettings.blockBackgroundColor) }}</div>
                            <div class="col-md-4">{{ form_row(formSettings.blockTextColor) }}</div>
                            <div class="col-md-4">{{ form_row(formSettings.bannerBgColor) }}</div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">{{ form_row(formSettings.blockTextSize) }}</div>
                            <div class="col-md-4">{{ form_row(formSettings.blockPictoUserSize) }}</div>
                            <div class="col-md-4">{{ form_row(formSettings.bannerBgOpacity) }}</div>
                        </div>
                        <div class="row">
                            <div class="col-md-4"><br />
                                <div class="form-group">
                                    {{ form_widget(formSettings.mainFontIsBold) }}
                                    {{ form_label(formSettings.mainFontIsBold) }}
                                </div>
                            </div>
                            <div class="col-md-8">
                                {{ form_row(formSettings.blockMaxNumberOfLines) }}
                            </div>
                        </div>
                        <h3>{% trans %}Highlights{% endtrans %}</h3>
                        <div class="row">
                            <div class="col-md-6">{{ form_row(formSettings.highlightMultiplier) }}</div>
                            <div class="col-md-6"><br />
                                <div class="form-group">
                                    {{ form_widget(formSettings.videoLoop) }}
                                    {{ form_label(formSettings.videoLoop) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">{{ form_row(formSettings.blockHLTextSize) }}</div>
                            <div class="col-md-6">{{ form_row(formSettings.blockHLPictoUserSize) }}</div>
                        </div>
                        <h3>{% trans %}Délai de réactualisation de l'affichage{% endtrans %}</h3>
                        <div class="row">
                            <div class="col-md-12">
                                <small>
                                    Le délai de réactualisation de l'affichage permet de sélectionner les contenus "actifs" à afficher en fonction d'une plage de temps par rapport à la date actuelle. L'option "Afficher tous les contenus" permet de ne pas tenir compte de ce délai.
                                    <br />
                                    <small><em>Ex: j’affiche uniquement les contenus des 30 dernières minutes.</em></small>
                                </small>
                            </div>
                            <div class="col-md-12" style="margin-top: 6px;">
                                {{ form_widget(formSettings.displayedContentsTimeFrame) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingAnimation">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseAnimation" aria-expanded="true" aria-controls="collapseAnimation">{% trans %}Options d'animation{% endtrans %}</a>
                    </h4>
                </div>
                <div id="collapseAnimation" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingAnimation">
                    <div class="panel-body">
                        <!-- Animations -->
                        <h3>{% trans %}Animations{% endtrans %}</h3>
                        <div class="row">
                            <div class="col-md-6">{{ form_row(formSettings.refreshDelay) }}</div>
                            <div class="col-md-6"></div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">{{ form_row(formSettings.transitionDuration) }}</div>
                            <div class="col-md-6">{{ form_row(formSettings.typeTransition) }}</div>
                        </div>

                        {% if settings.getSetting('accessInfiniteScroll') == true or is_granted('ROLE_AGENT') %}
                            <h4>{% trans %}Défilement de l'affichage infini{% endtrans %}</h4>
                            <div class="row">
                                <div class="col-md-6"><br />
                                    <div class="form-group">
                                        {{ form_widget(formSettings.isScrolling) }}
                                        {{ form_label(formSettings.isScrolling) }}
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">{{ form_row(formSettings.scrollingDirection) }}</div>
                                <div class="col-md-6">{{ form_row(formSettings.scrollingSpeed) }}</div>
                            </div>
                        {% endif %}

                    </div>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingInstruction">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseInstruction" aria-expanded="true" aria-controls="collapseInstruction">{% trans %}Contenus publicitaires (plein écran){% endtrans %}</a>
                    </h4>
                </div>
                <div id="collapseInstruction" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingInstruction">
                    <div class="panel-body">
                        <!-- Ecran de chargement -->
                        <h3>{% trans %}Contenus publicitaires{% endtrans %}</h3>
                        <p><small>{% trans %}(Envoi limité à 50 Mo par fichier et 200 Mo par sauvegarde){% endtrans %}</small></p>

                        <div id="instructions-content-block" class="collection-block" data-prototype="{{ form_widget(formSettings.instructionsContent.vars.prototype)|e }}">
                            {% for content in formSettings.instructionsContent %}
                                <div class="instructions-content-row item-row form-group">
                                    <p><img src="{{ asset(content.vars.value.getWebPath) }}" width="100" /></p>
                                    {{ form_widget(content) }}
                                </div>
                            {% endfor %}
                        </div>
                        {% if formSettings.instructionsContent|length == 0 %}
                            {% set count = 0 %}
                        {% else %}
                            {% set count = formSettings.instructionsContent|keys|last + 1 %}
                        {% endif %}
                        <button type="button" id="add-another-instruction-content" data-item-count="{{ count }}" class="btn btn-default add-another-item">{% trans %}Ajouter un nouveau contenu publicitaire{% endtrans %}</button>

                        <div class="row">
                            <div class="col-md-6">{{ form_row(formSettings.loadingScreenDuration) }}</div>
                            <div class="col-md-6">{{ form_row(formSettings.loadingScreenInterval) }}</div>
                        </div>
                    </div>
                </div>
            </div>

            {% if settings.getSetting('accessModeration') == true or is_granted('ROLE_AGENT') %}
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingModeration">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseModeration" aria-expanded="true" aria-controls="collapseModeration">{% trans %}Options de modération{% endtrans %}</a>
                        </h4>
                    </div>
                    <div id="collapseModeration" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingModeration">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <h3>{% trans %}Modération contenu{% endtrans %}</h3>
                                    {{ form_row(formSettings.blacklistAll) }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div id="whitelist-block" class="collection-block" data-prototype="{{ form_widget(formSettings.whitelist.vars.prototype)|e }}">
                                        <h3>{% trans %}White list{% endtrans %}</h3>
                                        {% for account in formSettings.whitelist %}
                                            <div class="item-row form-group">
                                                {{ form_widget(account) }}
                                            </div>
                                        {% endfor %}
                                    </div>

                                    {% if formSettings.whitelist|length == 0 %}
                                        {% set count = 0 %}
                                    {% else %}
                                        {% set count = formSettings.whitelist|keys|last + 1 %}
                                    {% endif %}
                                    <button type="button" id="add-another-whitelist" data-item-count="{{ count }}" class="btn btn-default add-another-item">{% trans %}Ajouter un nouveau compte{% endtrans %}</button>
                                </div>
                                <div class="col-md-6">
                                    <div id="blacklist-block" class="collection-block" data-prototype="{{ form_widget(formSettings.blacklist.vars.prototype)|e }}">
                                        <h3>{% trans %}Black list{% endtrans %}</h3>
                                        {% for account in formSettings.blacklist %}
                                            <div class="item-row form-group">
                                                {{ form_widget(account) }}
                                            </div>
                                        {% endfor %}
                                    </div>

                                    {% if formSettings.blacklist|length == 0 %}
                                        {% set count = 0 %}
                                    {% else %}
                                        {% set count = formSettings.blacklist|keys|last + 1 %}
                                    {% endif %}
                                    <button type="button" id="add-another-whitelist" data-item-count="{{ count }}" class="btn btn-default add-another-item">{% trans %}Ajouter un nouveau compte{% endtrans %}</button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <h3>{% trans %}Mise en corbeille & vidage automatique{% endtrans %}</h3>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    {{ form_row(formSettings.automaticMoveToTrash) }}
                                </div>
                                <div class="col-md-6">
                                    {{ form_row(formSettings.automaticEmptyTrash) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}

            {% if settings.getSetting('accessCustomCss') == true or is_granted('ROLE_AGENT') %}
                <div class="panel panel-default">
            {% else %}
                <div class="panel panel-default" style="display: none;">
            {% endif %}

                    <div class="panel-heading" role="tab" id="headingCustomCss">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseCustomCss" aria-expanded="true" aria-controls="collapseCustomCss">{% trans %}CSS personnalisé{% endtrans %}</a>
                        </h4>
                    </div>
                    <div id="collapseCustomCss" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingCustomCss">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-12">
                                    {{ form_widget(formSettings.customCss) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            {% if is_granted('ROLE_AGENT') %}
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingStats">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseStats" aria-expanded="true" aria-controls="collapseStats">{% trans %}Statistiques Post-affichage{% endtrans %}</a>
                        </h4>
                    </div>
                    <div id="collapseStats" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingStats">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <h3>{% trans %}Top influenceurs{% endtrans %}</h3>
                                    {{ form_row(formSettings.topInfluence1) }}
                                    {{ form_row(formSettings.topInfluence2) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}

            {% if is_granted('ROLE_ADMIN') %}
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingSocial">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseSocial" aria-expanded="true" aria-controls="collapseSocial">{% trans %}Connexion réseaux sociaux{% endtrans %}</a>
                    </h4>
                </div>
                <div id="collapseSocial" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSocial">
                    <div class="panel-body">
                        <h3>{% trans %}Connexion réseaux sociaux{% endtrans %}</h3>
                        <br />
                        <div class="row">
                            <div class="col-md-12">
                                <p>
                                    {% if event.oauthToken is not null and event.oauthTokenSecret is not null %}
                                        <a href="{{ path('twitter_dissociate', { 'type' : 'event', 'id' : event.id }) }}" class="btn"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>&nbsp;{% trans %}Dissocier le compte Twitter : {% endtrans %} {{ event.oauthPseudo }}</a>
                                    {% else %}
                                        <a href="{{ path('user_twitter_sign_in', { 'type' : 'event', 'id' : event.id }) }}" class="btn">{% trans %}Associer un compte Twitter{% endtrans %}</a>
                                    {% endif %}
                                </p>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-12">
                                <p>
                                    {% if event.instagramAccessToken is not null and event.instagramAccessTokenUser is not null %}
                                        <a href="{{ path('instagram_dissociate', { 'type' : 'event', 'id' : event.id }) }}" class="btn"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>&nbsp;{% trans %}Dissocier le compte Instagram : {% endtrans %} {{ event.instagramAccessTokenUser }}</a>
                                    {% else %}
                                        <a href="{{ path('user_instagram_sign_in', { 'type' : 'event', 'id' : event.id }) }}" class="btn">{% trans %}Associer un compte Instagram{% endtrans %}</a>
                                    {% endif %}
                                </p>
                            </div>
                        </div>
                    
                    </div>
                </div>
            </div>
            {% endif %}

            {{ form_widget(formSettings._token) }}
        </div>

        <input type="submit" value="{% trans %}Sauvegarder{% endtrans %}" class="btn btn-primary" />
</div>

{% if is_granted('ROLE_AGENT') %}
    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseClient" aria-expanded="true" aria-controls="collapseClient">{% trans %}Gestion des options client{% endtrans %}</a></h3>
            </div>
            <div id="collapseClient" class="panel-collapse" role="tabpanel">
                <div class="panel-body">

                    <div class="form-group">
                        {{ form_widget(formSettings.accessModeration) }}
                        {{ form_label(formSettings.accessModeration) }}
                    </div>

                    <div class="form-group">
                        {{ form_widget(formSettings.accessLogosFooter) }}
                        {{ form_label(formSettings.accessLogosFooter) }}
                    </div>

                    <div class="form-group">
                        {{ form_widget(formSettings.headerLogoHidden) }}
                        {{ form_label(formSettings.headerLogoHidden) }}
                    </div>

                    <div class="form-group">
                        {{ form_widget(formSettings.accessInfiniteScroll) }}
                        {{ form_label(formSettings.accessInfiniteScroll) }}
                    </div>

                    <div class="form-group">
                        {{ form_widget(formSettings.accessCustomCss) }}
                        {{ form_label(formSettings.accessCustomCss) }}
                    </div>

                    <input type="submit" value="{% trans %}Sauvegarder{% endtrans %}" class="btn btn-primary" />
                </div>
            </div>
        </div>
    </div>
{% endif %}

</form>
</div>

{% endblock %}