{% extends "@ChamiloTheme/Layout/layout_one_col.html.twig" %}

{% block content %}
    {% autoescape false %}
        <div class="row">
            <div class="col-md-12">
                {% if social_search %}
                    <div class="search-user">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                {{ 'SearchUsers' | trans}}
                            </div>
                            <div class="panel-body">
                                {{ social_search }}
                            </div>
                        </div>
                    </div>
                {% endif %}
                <div id="whoisonline">
                    <div id="user-list" class="row">
                        {{ whoisonline }}
                    </div>
                    <div class="col-md-12">
                        <a class="btn btn-large btn-default" id="link_load_more_items" data_link="2" >{{ 'More' | trans }}</a>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $(function() {
                $("#link_load_more_items").click(function() {
                    page = $("#link_load_more_items").attr("data_link");
                    $.ajax({
                        beforeSend: function() {
                            $("#link_load_more_items").html("{{ 'Loading' | trans|escape('js') }} <em class='fa fa-spinner fa-pulse fa-fw'></em>");
                        },
                        type: "GET",
                        url: "main/inc/ajax/online.ajax.php?a=load_online_user",
                        data: "online_page_nr=" + page,
                        success: function(data) {
                            if (data != "end") {
                                $("#link_load_more_items").attr("data_link", parseInt(page) + 1);
                                $("#user-list").append(data);
                                $("#link_load_more_items").html("{{ 'More' | trans|escape('js')}}");
                            } else {
                                $("#link_load_more_items").remove();
                            }
                        }
                    });
                });
            });
        </script>
    {% endautoescape %}
{% endblock %}
