{% 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="#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">
                        <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>

                        <h3>{% trans %}Configuration du contenu{% endtrans %}</h3>
                        <div class="row">
                            <div class="col-md-6">{{ form_row(formSettings.textMaxChars) }}</div>
                            <div class="col-md-6">{{ form_row(formSettings.overlayTextMaxChars) }}</div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">{{ form_row(formSettings.focusSlidesCount) }}</div>
                            <div class="col-md-6">{{ form_row(formSettings.consideredAsNewTimeFrame) }}</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.animationDurationBlock) }}</div>
                            <div class="col-md-6">{{ form_row(formSettings.animationIntervalBlock) }}</div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">{{ form_row(formSettings.delayBeforeGridFilling) }}</div>
                            <div class="col-md-6">{{ form_row(formSettings.contentsPauseDuration) }}</div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">{{ form_row(formSettings.focusSlideDuration) }}</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 %}

            <div class="panel panel-default">
                <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>

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

{% endblock %}