{% 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 page{% 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-6">{{ form_row(formSettings.backgroundColor) }}</div>
                            <div class="col-md-6">{{ form_row(formSettings.mainFont) }}</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 class="col-md-6">
                                {{ form_row(formSettings.lang) }}
                            </div>
                        </div>
                        <h3>{% trans %}Couleurs des réseaux sociaux{% endtrans %}</h3>
                        <div class="row">
                            <div class="col-md-6">{{ form_row(formSettings.twitterBlockAccountColor) }}</div>
                            <div class="col-md-6">{{ form_row(formSettings.instagramBlockAccountColor) }}</div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">{{ form_row(formSettings.facebookBlockAccountColor) }}</div>
                            <div class="col-md-6">{{ form_row(formSettings.youtubeBlockAccountColor) }}</div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">{{ form_row(formSettings.linkedinBlockAccountColor) }}</div>
                            <div class="col-md-6">{{ form_row(formSettings.photoboothBlockAccountColor) }}</div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">{{ form_row(formSettings.textIconsBlockColor) }}</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_label(formSettings.headerFontSize) }}
                                <div class="input-group">
                                    {{ form_widget(formSettings.headerFontSize) }}
                                    <div class="input-group-addon">px</div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                {% 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>
                    </div>
                </div>
            </div>


            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingFilters">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseFilters" aria-expanded="true" aria-controls="collapseFilters">{% trans %}Affichage des filtres{% endtrans %}</a>
                    </h4>
                </div>
                <div id="collapseFilters" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFilters">
                    <div class="panel-body">
                        <!-- Content -->
                        <div class="row">
                            <div class="col-md-4">
                                {{ form_row(formSettings.filtersBorderRadius) }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                {{ form_widget(formSettings.displayFiltersLabels) }}
                                {{ form_label(formSettings.displayFiltersLabels) }}
                            </div>
                        </div>

                        <h3>{% trans %}Filtres de source{% endtrans %}</h3>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_widget(formSettings.displaySocialNetworkFilters) }}
                                    {{ form_label(formSettings.displaySocialNetworkFilters) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">{{ form_row(formSettings.socialNetworkBackgroundColor) }}</div>
                            <div class="col-md-4">{{ form_row(formSettings.socialNetworkIconColor) }}</div>
                        </div>

                        <h3>{% trans %}Filtres de type de contenus{% endtrans %}</h3>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_widget(formSettings.displayContentTypeFilters) }}
                                    {{ form_label(formSettings.displayContentTypeFilters) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">{{ form_row(formSettings.contentTypeBackgroundColor) }}</div>
                            <div class="col-md-4">{{ form_row(formSettings.contentTypeIconColor) }}</div>
                        </div>

                        <h3>{% trans %}Sous-filtres spécifiques à la borne photo{% endtrans %}</h3>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_widget(formSettings.photoboothFiltersStatus) }}
                                    {{ form_label(formSettings.photoboothFiltersStatus) }}
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                {{ form_row(formSettings.photoboothFiltersEventsFilterLabel) }}
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <label class="control-label" style="margin-bottom: 10px;">Éléments du sous-filtre des événements</label>
                            </div>
                        </div>

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

                        {% if formSettings.photoboothFiltersEventsFilter|length == 0 %}
                            {% set count = 0 %}
                        {% else %}
                            {% set count = formSettings.photoboothFiltersEventsFilter|keys|last + 1 %}
                        {% endif %}
                        <button type="button" id="add-another-events-filter-item" data-item-count="{{ count }}" data-remove-selector=".form-group:first-child input" class="btn btn-default add-another-item">Ajouter un nouvel élément au sous-filtre</button>
                    </div>
                </div>
            </div>


            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingFollowBlocks">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseFollowBlocks" aria-expanded="true" aria-controls="collapseFollowBlocks">{% trans %}Affichage des cases "Suivez-nous"{% endtrans %}</a>
                    </h4>
                </div>
                <div id="collapseFollowBlocks" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFollowBlocks">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h3>{% trans %}Twitter{% endtrans %}</h3>
                                <div class="form-group">
                                    {{ form_widget(formSettings.displayTwitterBlock) }}
                                    {{ form_label(formSettings.displayTwitterBlock) }}
                                </div>
                                {{ form_row(formSettings.twitterBlockAccount) }}
                            </div>
                            <div class="col-md-6">
                                <h3>{% trans %}Instagram{% endtrans %}</h3>
                                <div class="form-group">
                                    {{ form_widget(formSettings.displayInstagramBlock) }}
                                    {{ form_label(formSettings.displayInstagramBlock) }}
                                </div>
                                {{ form_row(formSettings.instagramBlockAccount) }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <h3>{% trans %}Facebook{% endtrans %}</h3>
                                <div class="form-group">
                                    {{ form_widget(formSettings.displayFacebookBlock) }}
                                    {{ form_label(formSettings.displayFacebookBlock) }}
                                </div>
                                {{ form_row(formSettings.facebookBlockAccount) }}
                            </div>
                            <div class="col-md-6">
                                <h3>{% trans %}YouTube{% endtrans %}</h3>
                                <div class="form-group">
                                    {{ form_widget(formSettings.displayYoutubeBlock) }}
                                    {{ form_label(formSettings.displayYoutubeBlock) }}
                                </div>
                                {{ form_row(formSettings.youtubeBlockAccount) }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <h3>{% trans %}LinkedIn{% endtrans %}</h3>
                                <div class="form-group">
                                    {{ form_widget(formSettings.displayLinkedinBlock) }}
                                    {{ form_label(formSettings.displayLinkedinBlock) }}
                                </div>
                                {{ form_row(formSettings.linkedinBlockAccount) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <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_label(formSettings.blockOpacity) }}
                                <div class="input-group">
                                    {{ form_widget(formSettings.blockOpacity) }}
                                    <div class="input-group-addon">%</div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">{{ form_row(formSettings.blockTextSize) }}</div>
                            <div class="col-md-4">
                                {{ form_label(formSettings.blockTextCrop) }}
                                <div class="input-group">
                                    {{ form_widget(formSettings.blockTextCrop) }}
                                    <div class="input-group-addon">caractères</div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_widget(formSettings.blockImageLink) }}
                                    {{ form_label(formSettings.blockImageLink) }}
                                </div>
                            </div>
                        </div>
                        <h3>{% trans %}Nombre de contenus affichés{% endtrans %}</h3>
                        <div class="row">
                            <div class="col-md-6">
                                {{ form_row(formSettings.displayedContentsOnInit) }}
                            </div>
                            <div class="col-md-6">
                                {{ form_row(formSettings.displayedContentsOnLoadMore) }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                {{ form_row(formSettings.displayedContentsOnInitMobile) }}
                            </div>
                            <div class="col-md-6">
                                {{ form_row(formSettings.displayedContentsOnLoadMoreMobile) }}
                            </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>
                        <div class="row">
                            <div class="col-md-12" style="margin-top: 8px;">
                                {{ form_widget(formSettings.displayedContentsTimeFrame) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingPhotoboothFacebookContests">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapsePhotoboothFacebookContests" aria-expanded="true" aria-controls="collapsePhotoboothFacebookContests">{% trans %}Jeux concours Facebook{% endtrans %}</a>
                    </h4>
                </div>
                <div id="collapsePhotoboothFacebookContests" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingPhotoboothFacebookContests">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-12">
                                <label class="control-label" style="margin-bottom: 10px;">Liste des jeux concours liés aux bornes photo</label>
                            </div>
                        </div>

                        <div id="photobooth-facebook-contests-block" class="collection-block" data-prototype="{{ form_widget(formSettings.photoboothFacebookContests.vars.prototype)|e }}<hr />" data-remove-selector=".form-group:first-child input">
                            {% set count = 0 %}
                            {% for photoboothFacebookContestItem in formSettings.photoboothFacebookContests %}
                                <div class="item-row form-group">
                                    {{ form_widget(photoboothFacebookContestItem) }}
                                    <a href="{{ path( 'event_download_facebook_contest_file', { 'event' : event.id, 'contestId' : photoboothFacebookContestItem.vars.value.contestId }) }}" class="btn">{% trans %}Télécharger les participations (Fichier CSV){% endtrans %}</a>
                                    <hr />
                                </div>
                            {% endfor %}
                        </div>

                        {% if formSettings.photoboothFacebookContests|length == 0 %}
                            {% set count = 0 %}
                        {% else %}
                            {% set count = formSettings.photoboothFacebookContests|keys|last + 1 %}
                        {% endif %}
                        <button type="button" id="add-another-facebook-contest-item" data-item-count="{{ count }}" data-remove-selector=".form-group:first-child input" class="btn btn-default add-another-item">Ajouter un nouveau jeu concours</button>
                    </div>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingLightbox">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseLightbox" aria-expanded="true" aria-controls="collapseLightbox">{% trans %}Options de la lightbox{% endtrans %}</a>
                    </h4>
                </div>
                <div id="collapseLightbox" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingLightbox">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-12">
                                {{ form_row(formSettings.lightboxText) }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                {% if event.settings.getWebLightboxImagePath is not null %}
                                    <p><img src="{{ asset(event.settings.getWebLightboxImagePath) }}" width="100" /></p>
                                    {{ form_row(formSettings.removeLightboxImage) }}
                                {% endif %}
                                {{ form_row(formSettings.lightboxImageFile) }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                {{ form_row(formSettings.lightboxImageUrl) }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                {{ form_row(formSettings.lightboxCustomCss) }}
                            </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>

            {{ form_widget(formSettings._token) }}
        </div>
        <hr />
        <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.disablePoweredBy) }}
                        {{ form_label(formSettings.disablePoweredBy) }}
                    </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 %}