{% macro renderPager(search, pager) %}
    {% if search == '' %}
    {{
        pagerfanta(
            pager,
            'twitter_bootstrap_translated',
            {
                'proximity' : 1,
                'routeName': 'claro_message_list_removed'
            }
        )
    }}
    {% else %}
        {{
            pagerfanta(
                pager,
                'twitter_bootstrap_translated',
                {
                    'proximity' : 1,
                    'routeName': 'claro_message_list_removed_search',
                    'routeParams': {'search': search}
                }
            )
        }}
    {% endif %}
{% endmacro %}
{% macro displayControls() %}
    {% if app.user %}
        <button class="btn btn-default action-delete-button table-control" data-action="remove">
            <i class="fa fa-trash-o"></i>
            {{ 'delete'|trans({}, 'platform') }}
        </button>
        <button class="btn btn-default action-restore-button table-control" data-action="restore">
            <i class="fa fa-refresh"></i>
            {{ 'restore'|trans({}, 'platform') }}
        </button>
    {% endif %}
{% endmacro %}

{% from _self import renderPager %}
{% from _self import displayControls %}

{% extends 'ClarolineMessageBundle:Message:layout.html.twig' %}

{% block title %}{{ 'messages_removed' | trans({}, 'platform') | striptags | raw }}{% endblock %}

{% block section_content %}
    <div class="search-bar row margin-bottom-md">
        <div class="col-md-6">
            {{ displayControls() }}
        </div>
        <div class="col-md-6">
             <div class="input-group">
                <input class="form-control" type="text" id="search-items-txt" placeholder="{{ 'search'|trans({}, 'platform') }}" value={{search}}>
                <span class="input-group-btn">
                    <button class="filter btn btn-default" type="button" id="search-button">
                        <i class="fa fa-search"></i>
                    </button>
                </span>
            </div>
        </div>
    </div>
    <div>
    {% if pager.getNbPages() > 1 %}
        {{ renderPager(search, pager) }}
    {% endif %}
    </div>
    <div class="table-responsive">
        <table class="table table-striped table-bordered table-condensed" id="messages-table">
            <thead>
                <tr>
                    <th><input type="checkbox" name="all" id="check-all-items"></input></th>
                    <th>{{ 'object'|trans({}, 'platform') }}</th>
                    <th>{{ 'from_message'|trans({}, 'platform') }}</th>
                    <th>{{ 'date'|trans({}, 'platform') }}</th>
                    <th></th>
                </tr>
            </thead>
            <tbody id="message-table-body">
                {% if pager|length > 0 %}
                    {% for userMessage in  pager.currentPageResults %}
                        <tr class=
                            "row-user-message
                            {% if userMessage.isRead() %} active {% endif %}
                            {% if not userMessage.isRead() %} bold {% endif %}
                            pointer-hand
                            "
                            data-route="{{ path('claro_message_show', {'message': userMessage.getMessage().getId()}) }}"
                        >
                            <td><input class="chk-item" value="{{ userMessage.getId() }}" type="checkbox"></input></td>
                            <td> {{ userMessage.getMessage().getObject() }} </td>
                            <td> {{ userMessage.getMessage().getSenderUsername() }} </td>
                            <td> {{ userMessage.getMessage().getDate()|intl_date_format() }} </td>
                            <td>
                                {% if userMessage.isRead() %}
                                    <div style="color: green" class="fa fa-check-circle"></div>
                                {% else %}
                                    <a href="{{ path('claro_message_mark_as_read', {'message': userMessage.getMessage().getId()}) }}" class="mark-as-read"><i class="fa fa-envelope"></i></a>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                {% else %}
                    <tr>
                        <td class="text-center" colspan="5">
                            {{ 'no_message'|trans({}, 'platform') }}
                        </td>
                    </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
    {% if pager.getNbPages() > 1 %}
        {{ renderPager(search, pager) }}
    {% endif %}
    <div>{{ displayControls() }}</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src='{{ asset('bundles/clarolinecore/js/table.js') }}' type="text/javascript"></script>
    <script>
        parameters = {};
        parameters.route = {};
        parameters.route.action = {};
        parameters.route.normal = {"route": "claro_message_list_removed", "parameters": {}};
        parameters.route.search = {"route": "claro_message_list_removed_search", "parameters": {}};
        parameters.route.action.remove = {"route": "claro_message_delete", "parameters": {}, "btn": "action-delete-button", "type": "DELETE", 'confirmTemplate': removeMessageConfirm, "delete": true};
        parameters.route.action.restore = {"route": "claro_message_restore_from_trash", "parameters": {}, "btn": "action-restore-button", 'confirmTemplate': restoreMessageConfirm, "delete": true};
        Claroline.Table.initialize(parameters);

        $('tr.pointer-hand').on('click', function() {
            var targetClass = event.target.className;
            if (targetClass !== 'chk-item' && targetClass !== 'fa fa-envelope') {
                window.document.location = $(this).attr("data-route");
            }
        });

        $('.mark-as-read').on('click', function (e) {
            e.preventDefault();
            $.ajax({
                type: 'GET',
                url: $(e.currentTarget).attr('href'),
                success: function () {
                    $(e.target).css('color', 'green');
                    $(e.target).attr('class', 'fa fa-check-circle');
                    var row = $(e.target)[0].parentElement.parentElement.parentElement;
                    $(row).addClass('active');
                }
            });
        });
    </script>
{% endblock %}