{% 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="#collapseScreen" aria-expanded="true" aria-controls="collapseScreen">{% trans %}Configuration de l'écran{% endtrans %}</a>
                    </h4>
                </div>
                <div id="collapseScreen" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingScreen">
                    <div class="panel-body">
                        <h3>{% trans %}Types d'écran{% endtrans %}</h3>

                        <div id="screen-configurations-block" class="collection-block" data-prototype="{{ form_widget(formSettings.screenConfigurations.vars.prototype)|e }}<hr />" data-remove-selector=".form-group:first-child input">
                            {% set count = 0 %}
                            {% for screenConfiguration in formSettings.screenConfigurations %}
                                <div class="item-row form-group">
                                    {{ form_widget(screenConfiguration) }}
                                </div>
                                <hr />
                            {% endfor %}
                        </div>

                        {% if formSettings.screenConfigurations|length == 0 %}
                            {% set count = 0 %}
                        {% else %}
                            {% set count = formSettings.screenConfigurations|keys|last + 1 %}
                        {% endif %}
                        <button type="button" id="add-another-screen-configuration" data-item-count="{{ count }}" data-remove-selector=".form-group:first-child input" class="btn btn-default add-another-item">Ajouter un nouveau type d'écran</button>

                        <div class="row">
                            <div class="col-md-4">{{ form_row(formSettings.backgroundColor) }}</div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                {{ form_row(formSettings.backgroundImageFile) }}
                                {% if event.settings.getWebBackgroundImagePath is not null %}
                                    <p><img src="{{ asset(event.settings.getWebBackgroundImagePath) }}" width="100" /></p>
                                    {{ form_widget(formSettings.removeBackgroundImage) }}
                                    {{ form_label(formSettings.removeBackgroundImage) }}
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <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="#collapseContent" aria-expanded="true" aria-controls="collapseContent">{% trans %}Configuration des contenus{% endtrans %}</a>
                    </h4>
                </div>
                <div id="collapseContent" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingContent">
                    <div class="panel-body">
                        <h3>{% trans %}Configuration du contenu{% endtrans %}</h3>
                        <div class="row">
                            <div class="col-md-4">{{ form_row(formSettings.blockBackgroundColor) }}</div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">{{ form_row(formSettings.blockFont) }}</div>
                            <div class="col-md-4">{{ form_row(formSettings.blockTextSize) }}</div>
                            <div class="col-md-4">{{ form_row(formSettings.blockTextColor) }}</div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">{{ form_row(formSettings.blockAuthorImageSize) }}</div>
                            <div class="col-md-4">{{ form_row(formSettings.blockAuthorNameSize) }}</div>
                            <div class="col-md-4">{{ form_row(formSettings.blockNetworkSize) }}</div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">{{ form_row(formSettings.blockOverlayBackgroundColor) }}</div>
                            <div class="col-md-4">{{ form_row(formSettings.blockOverlayOpacity) }}</div>
                            <div class="col-md-4">{{ form_row(formSettings.blockOverlayTextMaxChars) }}</div>
                        </div>

                        <h3>{% trans %}Configuration du mode « Highlight »{% endtrans %}</h3>
                        <div class="row">
                            <div class="col-md-4">{{ form_row(formSettings.highlightMode) }}</div>
                            <div class="col-md-4">{{ form_row(formSettings.highlightMultiplier) }}</div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">{{ form_row(formSettings.blockHLFont) }}</div>
                            <div class="col-md-4">{{ form_row(formSettings.blockHLTextSize) }}</div>
                            <div class="col-md-4">{{ form_row(formSettings.blockHLTextColor) }}</div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">{{ form_row(formSettings.blockHLAuthorImageSize) }}</div>
                            <div class="col-md-4">{{ form_row(formSettings.blockHLAuthorNameSize) }}</div>
                            <div class="col-md-4">{{ form_row(formSettings.blockHLNetworkSize) }}</div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">{{ form_row(formSettings.blockHLOverlayTextMaxChars) }}</div>
                        </div>

                        <h3>{% trans %}Configuration de la photo de profil{% endtrans %}</h3>
                        <div class="row">
                            <div class="col-md-6">
                                {{ form_widget(formSettings.hideAllProfilePictures) }}
                                {{ form_label(formSettings.hideAllProfilePictures) }}
                            </div>
                            <div class="col-md-6">
                                {{ form_row(formSettings.profilePictureFile) }}
                                {% if event.settings.getProfilePicturePath is not null %}
                                    <p><img src="{{ asset(event.settings.getProfilePicturePath) }}" width="32" /></p>
                                    {{ form_widget(formSettings.removeProfilePicture) }}
                                    {{ form_label(formSettings.removeProfilePicture) }}
                                {% endif %}
                            </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="headingConf">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseAnimations" aria-expanded="true" aria-controls="collapseAnimations">{% trans %}Options d'animation{% endtrans %}</a>
                    </h4>
                </div>
                <div id="collapseAnimations" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingAnimations">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-6">{{ form_row(formSettings.refreshDelay) }}</div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">{{ form_row(formSettings.typeTransition) }}</div>
                            <div class="col-md-6">{{ form_row(formSettings.transitionDuration) }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <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="#collapseAdContent" aria-expanded="true" aria-controls="collapseAdContent">{% trans %}Contenus publicitaires{% endtrans %}</a>
                    </h4>
                </div>
                <div id="collapseAdContent" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingAdContent">
                    <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_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.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 %}