{% 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="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">
                        <h3>{% trans %}Options d'affichage{% endtrans %}</h3>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    {{ form_widget(formSettings.displayContentSocialNetwork) }}
                                    {{ form_label(formSettings.displayContentSocialNetwork) }}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    {{ form_widget(formSettings.displayContentDate) }}
                                    {{ form_label(formSettings.displayContentDate) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    {{ form_widget(formSettings.displayContentAuthorUsername) }}
                                    {{ form_label(formSettings.displayContentAuthorUsername) }}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    {{ form_widget(formSettings.displayContentAuthorPicture) }}
                                    {{ form_label(formSettings.displayContentAuthorPicture) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    {{ form_widget(formSettings.addLinkToPostOnSocialNetworkIcon) }}
                                    {{ form_label(formSettings.addLinkToPostOnSocialNetworkIcon) }}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    {{ form_widget(formSettings.addLinkToPostOnImage) }}
                                    {{ form_label(formSettings.addLinkToPostOnImage) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                {{ form_row(formSettings.textCropLengthWithMedia) }}
                            </div>
                            <div class="col-md-6">
                                {{ form_row(formSettings.textCropLengthTextOnly) }}
                            </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>
                        <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="headingSocialNetworksLinks">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseSocialNetworksLinks" aria-expanded="true" aria-controls="collapseSocialNetworksLinks">{% trans %}Affichage des liens de réseaux sociaux{% endtrans %}</a>
                    </h4>
                </div>
                <div id="collapseSocialNetworksLinks" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSocialNetworksLinks">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-12">
                                {{ form_widget(formSettings.displaySocialNetworksLinks) }}
                                {{ form_label(formSettings.displaySocialNetworksLinks) }}
                            </div>
                        </div>

                        <h3>{% trans %}Liens de réseaux sociaux{% endtrans %}</h3>

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

                        {% if formSettings.socialNetworksLinks|length == 0 %}
                            {% set count = 0 %}
                        {% else %}
                            {% set count = formSettings.socialNetworksLinks|keys|last + 1 %}
                        {% endif %}
                        <button type="button" id="add-another-social-network-link-item" data-item-count="{{ count }}" data-remove-selector=".form-group:first-child input" class="btn btn-default add-another-item">Ajouter un nouveau lien de réseau social</button>
                    </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">
                        <div class="row">
                            <div class="col-md-6">
                                <h4>{% trans %}Filtres de réseaux sociaux{% endtrans %}</h4>
                                {{ form_widget(formSettings.displaySocialNetworksFilters) }}
                                {{ form_label(formSettings.displaySocialNetworksFilters) }}
                            </div>
                            <div class="col-md-6">
                                <h4>{% trans %}Filtres de types de contenus{% endtrans %}</h4>
                                {{ form_widget(formSettings.displayContentTypesFilters) }}
                                {{ form_label(formSettings.displayContentTypesFilters) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingSlideshow">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseSlideshow" aria-expanded="true" aria-controls="collapseSlideshow">{% trans %}Options du slideshow{% endtrans %}</a>
                    </h4>
                </div>
                <div id="collapseSlideshow" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSlideshow">
                    <div class="panel-body">
                        <h3>{% trans %}Options d'affichage{% endtrans %}</h3>
                        <div class="row">
                            <div class="col-md-6">
                                {{ form_row(formSettings.flickityCellAlign) }}
                            </div>
                            <div class="col-md-6 text-nowrap">
                                <div class="form-group">
                                    {{ form_widget(formSettings.flickityContain) }}
                                    {{ form_label(formSettings.flickityContain) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 text-nowrap">
                                <div class="form-group">
                                    {{ form_widget(formSettings.flickityPrevNextButtons) }}
                                    {{ form_label(formSettings.flickityPrevNextButtons) }}
                                </div>
                            </div>
                            <div class="col-md-6 text-nowrap">
                                {{ form_row(formSettings.flickityArrowShape) }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 text-nowrap">
                                <div class="form-group">
                                    {{ form_widget(formSettings.flickityAccessibility) }}
                                    {{ form_label(formSettings.flickityAccessibility) }}
                                </div>
                            </div>
                            <div class="col-md-6 text-nowrap">
                                <div class="form-group">
                                    {{ form_widget(formSettings.flickityPageDots) }}
                                    {{ form_label(formSettings.flickityPageDots) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 text-nowrap">
                                <div class="form-group">
                                    {{ form_widget(formSettings.displayProgressBar) }}
                                    {{ form_label(formSettings.displayProgressBar) }}
                                </div>
                            </div>
                        </div>

                        <h3>{% trans %}Options de comportement &amp; avancées{% endtrans %}</h3>
                        <div class="row">
                            <div class="col-md-6 text-nowrap">
                                <div class="form-group">
                                    {{ form_widget(formSettings.flickityDraggable) }}
                                    {{ form_label(formSettings.flickityDraggable) }}
                                </div>
                            </div>
                            <div class="col-md-6 text-nowrap">
                                <div class="form-group">
                                    {{ form_widget(formSettings.flickityFreeScroll) }}
                                    {{ form_label(formSettings.flickityFreeScroll) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 text-nowrap">
                                <div class="form-group">
                                    {{ form_widget(formSettings.flickityGroupCells) }}
                                    {{ form_label(formSettings.flickityGroupCells) }}
                                </div>
                            </div>
                            <div class="col-md-6">
                                {{ form_row(formSettings.flickityGroupCellsValue) }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 text-nowrap">
                                <div class="form-group">
                                    {{ form_widget(formSettings.flickitySetGallerySize) }}
                                    {{ form_label(formSettings.flickitySetGallerySize) }}
                                </div>
                            </div>
                            <div class="col-md-6 text-nowrap">
                                <div class="form-group">
                                    {{ form_widget(formSettings.flickityResize) }}
                                    {{ form_label(formSettings.flickityResize) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 text-nowrap">
                                <div class="form-group">
                                    {{ form_widget(formSettings.flickityAdaptiveHeight) }}
                                    {{ form_label(formSettings.flickityAdaptiveHeight) }}
                                </div>
                            </div>
                            <div class="col-md-6 text-nowrap">
                                <div class="form-group">
                                    {{ form_widget(formSettings.flickityPercentPosition) }}
                                    {{ form_label(formSettings.flickityPercentPosition) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 text-nowrap">
                                <div class="form-group">
                                    {{ form_widget(formSettings.flickityAutoPlay) }}
                                    {{ form_label(formSettings.flickityAutoPlay) }}
                                </div>
                            </div>
                            <div class="col-md-6">
                                {{ form_row(formSettings.flickityAutoPlayDuration) }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 text-nowrap">
                                <div class="form-group">
                                    {{ form_widget(formSettings.flickityPauseAutoPlayOnHover) }}
                                    {{ form_label(formSettings.flickityPauseAutoPlayOnHover) }}
                                </div>
                            </div>
                            <div class="col-md-6">
                                {{ form_row(formSettings.flickitySelectedAttraction) }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                {{ form_row(formSettings.flickityFriction) }}
                            </div>
                            <div class="col-md-6">
                                {{ form_row(formSettings.flickityFreeScrollFriction) }}
                            </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.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 %}