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

{% set page_title_prefix = 'Médias' %}
{% set page_subtitle = 'Contenus<span class="hidden-md"> de l\'affichage</span>' %}
{% set moderateOrViewContentsPageRoute = 'event_media' %}
{% if disableEditing is defined and ( disableEditing == true ) %}
    {% set page_title_prefix = 'Contenus' %}
    {% set moderateOrViewContentsPageRoute = 'event_view_contents' %}
{% elseif isTrash is defined and ( isTrash == true ) %}
    {% set page_title_prefix = 'Corbeille' %}
    {% set page_subtitle = 'Contenus<span class="hidden-md"> de la corbeille</span>' %}
    {% set moderateOrViewContentsPageRoute = 'event_trash' %}
{% endif %}

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

{% block head_end %}
    <script type="text/javascript">
        window.ouibeatTheme = '{{ event.type }}';
    </script>
{% endblock %}

{% block content_main %}

<div class="row">
    <div class="col-md-12">
        <div class="wrapper-title row">
            <h1 class="title col-md-12">{{ page_title_prefix }} de l'affichage <strong>{{ event.name }}</strong></h1>
            <div class="dates col-md-12">
				<p>{% trans %}Du{% endtrans %} 
				<strong>{{ event.startDate | date('d M Y') }}</strong>
				{% trans %}au{% endtrans %}
				<strong>{{ event.endDate | date('d M Y') }}</strong></p>
			</div>
            <div class="group-button col-md-12">
                <a href="{{ path('event_view', { 'publicToken' : event.publicToken }) }}" class="btn" target="_blank">{% trans %}Voir{% endtrans %}</a>

                <a href="{{ path('event_edit', { 'event' : event.id }) }}" class="btn">{% trans %}Editer{% endtrans %}</a>

                {% if is_granted('ROLE_AGENT') or ( event.settings.setting('accessModeration') == true )  %}
                    <a href="{{ path('event_moderate', { 'event' : event.id }) }}" class="btn">{% trans %}Modérer{% endtrans %}</a>
                {% else %}
                    <a href="{{ path('event_view_contents', { 'event' : event.id }) }}" class="btn">{% trans %}Contenus{% endtrans %}</a>
                {% endif %}

                {% if is_granted('ROLE_AGENT') or ( event.settings.setting('accessModeration') == true ) %}
                    <a href="{{ path('event_trash', { 'event' : event.id }) }}" class="btn">{% trans %}Corbeille{% endtrans %}</a>
                {% endif %}

                <a href="{{ path('event_stats', { 'event' : event.id }) }}" class="btn" >{% trans %}Stats{% endtrans %}</a>
                
                {% if is_granted('ROLE_AGENT') or ( event.settings.setting('accessModeration') == true ) %}
                	{% if event.type == 'retail-cast' %}
                		<a href="{{ path('event_storyboard', { 'event' : event.id }) }}" class="btn" >{% trans %}Playlist{% endtrans %}</a>
					{% endif %}
                    {% if event.type == 'retail-cast' or event.id == 704 %}
                        <a href="{{ path('event_media', { 'event' : event.id }) }}" class="btn" >{% trans %}Médiathèque{% endtrans %}</a>
                    {% endif %}
                {% endif %}
                {# if is_granted('ROLE_ADMIN') %}
                    <a href="{{ path('event_download', { 'event' : event.id }) }}" class="btn">{% trans %}Télécharger les contenus{% endtrans %}</a>
                {% endif #}

                <div class="pull-right">
                	<button class="btn btn-block dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="true" class="btn btn-plus">
                		Envoyer un nouveau contenu
                		<i class="glyphicon glyphicon-plus"></i>
                	</button>
        		  	<ul class="dropdown-menu dropdown-filters" role="menu" aria-labelledby="filters-type">
                        {% if event.id != 704 %}
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="{{ path('event_upload_corporate_cast_content', { 'event' : event.id }) }}">{% trans %}Texte{% endtrans %}</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="{{ path('event_upload_corporate_cast_file', { 'event' : event.id }) }}">{% trans %}Médias (image ou vidéos){% endtrans %}</a></li>
                        {% else %}
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="{{ path('event_upload_multiple_file', { 'event' : event.id }) }}">{% trans %}Médias (image ou vidéos){% endtrans %}</a></li>
                        {% endif %}
        		  	</ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="wrapper-search row filters-form">
	<div class="col-md-3">
        <p class="list-title">{{ page_subtitle | raw }}</p>
	</div>
	<div class="col-md-3">
        <div class="dropdown">
		  	<button class="btn btn-block dropdown-toggle" type="button" id="filters-type" data-toggle="dropdown" aria-expanded="true">
                {% if type == 'image' %}
					{% trans %}Type : Photo{% endtrans %}
                {% elseif type == 'video' %}
                    {% trans %}Type : Vidéo{% endtrans %}
                {% elseif type == 'text' %}
                    {% trans %}Type : Texte{% endtrans %}
                {% else %}
                    {% trans %}Tous les types{% endtrans %}
                {% endif %}
		    	<span class="caret"></span>
		  	</button>
		  	<ul class="dropdown-menu dropdown-filters" role="menu" aria-labelledby="filters-type">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="{{ path(moderateOrViewContentsPageRoute, { 'event' : event.id, 'nb_per_page' : nb_per_page, 'source' : source, 'active' : active }) }}">{% trans %}Tous les types{% endtrans %}</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="{{ path(moderateOrViewContentsPageRoute, { 'event' : event.id, 'type' : 'image', 'nb_per_page' : nb_per_page, 'source' : source, 'active' : active }) }}">{% trans %}Photo{% endtrans %}</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="{{ path(moderateOrViewContentsPageRoute, { 'event' : event.id, 'type' : 'video', 'nb_per_page' : nb_per_page, 'source' : source, 'active' : active }) }}">{% trans %}Vidéo{% endtrans %}</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="{{ path(moderateOrViewContentsPageRoute, { 'event' : event.id, 'type' : 'text', 'nb_per_page' : nb_per_page, 'source' : source, 'active' : active }) }}">{% trans %}Texte{% endtrans %}</a></li>
		  	</ul>
		</div>
	</div>
	<div class="col-md-3">
        <div class="dropdown">
		  	<button class="btn btn-block dropdown-toggle" type="button" id="filters-mode" data-toggle="dropdown" aria-expanded="true">
                {% if mode == 'mosaic' %}
					{% trans %}Mode : Mosaïque{% endtrans %}
                {% elseif mode == 'intercalary' %}
                    {% trans %}Mode : Pub{% endtrans %}
                {% elseif mode == 'focus' %}
                    {% trans %}Mode : Focus{% endtrans %}
                {% else %}
                    {% trans %}Tous les modes{% endtrans %}
                {% endif %}
		    	<span class="caret"></span>
		  	</button>
		  	<ul class="dropdown-menu dropdown-filters" role="menu" aria-labelledby="filters-type">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="{{ path(moderateOrViewContentsPageRoute, { 'event' : event.id, 'nb_per_page' : nb_per_page, 'source' : source, 'active' : active }) }}">{% trans %}Tous les modes{% endtrans %}</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="{{ path(moderateOrViewContentsPageRoute, { 'event' : event.id, 'mode' : 'mosaic', 'nb_per_page' : nb_per_page, 'source' : source, 'active' : active }) }}">{% trans %}Mosaïque{% endtrans %}</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="{{ path(moderateOrViewContentsPageRoute, { 'event' : event.id, 'mode' : 'intercalary', 'nb_per_page' : nb_per_page, 'source' : source, 'active' : active }) }}">{% trans %}Pub{% endtrans %}</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="{{ path(moderateOrViewContentsPageRoute, { 'event' : event.id, 'mode' : 'focus', 'nb_per_page' : nb_per_page, 'source' : source, 'active' : active }) }}">{% trans %}Focus{% endtrans %}</a></li>
		  	</ul>
		</div>
	</div>
    <div class="col-md-3">
        <div class="dropdown">
            <button class="btn btn-block dropdown-toggle" type="button" id="filters-source" data-toggle="dropdown" aria-expanded="true">
                {% trans %}Affichage{% endtrans %}
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu dropdown-filters" role="menu" aria-labelledby="filters-source">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="{{ path(moderateOrViewContentsPageRoute, { 'event' : event.id, 'nb_per_page' : 50, 'source' : source, 'type' : type, 'active' : active }) }}">
                    {% if nb_per_page == 50 %}&#x2713;{% endif %}
                    {% trans %}50 contenus par page{% endtrans %}
                </a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="{{ path(moderateOrViewContentsPageRoute, { 'event' : event.id, 'nb_per_page' : 100, 'source' : source, 'type' : type, 'active' : active }) }}">
                    {% if nb_per_page == 100 %}&#x2713;{% endif %}
                    {% trans %}100 contenus par page{% endtrans %}
                </a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="{{ path(moderateOrViewContentsPageRoute, { 'event' : event.id, 'nb_per_page' : 250, 'source' : source, 'type' : type, 'active' : active }) }}">
                    {% if nb_per_page == 250 %}&#x2713;{% endif %}
                    {% trans %}250 contenus par page{% endtrans %}
                </a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="{{ path(moderateOrViewContentsPageRoute, { 'event' : event.id, 'nb_per_page' : 500, 'source' : source, 'type' : type, 'active' : active }) }}">
                    {% if nb_per_page == 500 %}&#x2713;{% endif %}
                    {% trans %}500 contenus par page{% endtrans %}
                </a></li>
                {% if contents|length <= 750 %}
                <li role="presentation"><a role="menuitem" tabindex="-1" href="{{ path(moderateOrViewContentsPageRoute, { 'event' : event.id, 'nb_per_page' : 'all', 'source' : source, 'type' : type, 'active' : active }) }}">
                    {% if nb_per_page == 'all' %}&#x2713;{% endif %}
                    {% trans %}Tous sur une page{% endtrans %}
                </a></li>
                {% endif %}
            </ul>
        </div>
    </div>
</div>

<div class="row moderate-container">
    <div class="col-lg-12 col-md-12 col-sm-12"><p>Contenu: {{ contents|length }}</p></div>
    {% for key, content in contents %}
        {% if content.contentData.breakLink == false %}
            {% if disableEditing is defined and disableEditing == true %}
                {% include "OuibeatAppBundle:Backend:Event/list-media.html.twig" with {'content': content, 'disableEditing' : true } %}
            {% else %}
                {% include "OuibeatAppBundle:Backend:Event/list-media.html.twig" with {'content': content } %}
            {% endif %}
            {% if key%2 == 1 %}<div class="clearfix hidden-xs hidden-md hidden-lg"></div>{% endif %}
            {% if key%4 == 3 %}<div class="clearfix hidden-xs hidden-sm hidden-lg"></div>{% endif %}
            {% if key%5 == 4 %}<div class="clearfix hidden-xs hidden-sm hidden-md"></div>{% endif %}
        {% endif %}
	{% endfor %}
</div>

{% if contents is not empty and pageNumber > 1 %}
<nav>
	<ul class="pagination">
	{% for p in range(1, pageNumber) %}
		<li{% if p == page %} class="active"{% endif %}>
			<a href="{{ path(moderateOrViewContentsPageRoute, { 'event' : event.id ,'page': p }|merge(app.request.query.all)) }}">{{ p }}</a>
		</li>
	{% endfor %}
	</ul>
</nav>
{% endif %}


{% if disableEditing is not defined or disableEditing == false %}
<div class="modal fade" id="moderateModalMedia" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">{% trans %}Modérer ce contenu{% endtrans %}</h4>
            </div>
            <div class="modal-body">{% trans %}Chargement ...{% endtrans %}</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{% trans %}Annuler{% endtrans %}</button>
                <button type="button" class="btn btn-primary">{% trans %}Sauvegarder{% endtrans %}</button>
            </div>
        </div>
    </div>
</div>
{% endif %}
<script src="{{ asset('assets_backend/js/jquery-2.1.1.min.js') }}"></script>
<script>
$(document).ready(function(){
    $('.trigger-modal-moderate-media').click(function(event){
        event.preventDefault();
        $('#moderateModalMedia').removeData('content-id').attr('data-content-id', $(this).data('content-id'));
        $('#moderateModalMedia').modal();
    });

    $('#moderateModalMedia').on('show.bs.modal', function (event) {
    	
        var el = $(event.target);
        var id = el.data('content-id');
        var modal = $(this);

        $.get(Routing.generate('event_get_media_content', { content: id }) , function( data ) {
            modal.find('.modal-content').html(data);
            $(".switcher").bootstrapSwitch();

            if ((typeof window.ouibeatTheme != 'undefined') && (window.ouibeatTheme == 'event-responsive')) {
                $('#content_promo').on('switchChange.bootstrapSwitch', function(event, state) {
                    if (state) {
                        $('#content_text').bootstrapSwitch('state', false);
                    }
                    $('#content_text').bootstrapSwitch('disabled', state);
                });
            }
        });

    });
})
</script>
{% endblock %}