<div class="messages-sidebar">
    <div class="search-box">
		<div class="search-box-inner">
			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search" id="search-icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
			<input type="text" name="search" placeholder="{{LANG search}}" id="search-list">
		</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<button type="button" class="btn" onclick="MarkAllAsRead(this);">
			<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24"><path fill="currentColor" d="M14,10H2V12H14V10M14,6H2V8H14V6M2,16H10V14H2V16M21.5,11.5L23,13L16,20L11.5,15.5L13,14L16,17L21.5,11.5Z"></path></svg>
		</button>
    </div>
    <ul class="list-group" onscroll="LoadMoreUserChat()">
        {{USERS}}
    </ul>
</div>
<script type="text/javascript">
    function MarkAllAsRead(self) {
        $(self).html('<svg width="25px" height="25px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><rect x="0" y="0" width="25" height="25" fill="none" class="bk"></rect><circle cx="50" cy="50" r="40" stroke="#676d76" fill="none" stroke-width="6" stroke-linecap="round"><animate attributeName="stroke-dashoffset" dur="1.5s" repeatCount="indefinite" from="0" to="502"></animate><animate attributeName="stroke-dasharray" dur="1.5s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"></animate></circle></svg>');
        $.post('{{LINK aj/messages/mark_read}}', function (data, textStatus, xhr) {
            if (data.status == 200) {
                setTimeout(function () {
                    $('.user-list').find('.countunseen').html('');
                    $("#new-messages").html("");
                    $(self).html('<svg width="25px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve"> <circle style="fill:#25AE88;" cx="25" cy="25" r="25"/> <polyline style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" points=" 38,15 22,33 12,25 "/> </svg>');
                    setTimeout(function () {
                        $(self).html('<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24"><path fill="currentColor" d="M14,10H2V12H14V10M14,6H2V8H14V6M2,16H10V14H2V16M21.5,11.5L23,13L16,20L11.5,15.5L13,14L16,17L21.5,11.5Z"></path></svg>');
                    },500);
                },1000);
            }
        });
    }
	var sent = 0;
    function LoadMoreUserChat() {
        if (sent === 0) {
            clearTimeout(window.UpdateChatU);
            sent = 1;
            let time = $('.user-list').last().attr('data-time');
            $.post('{{LINK aj/messages/load_user_chat}}', {
                time: time
            }, function (data, textStatus, xhr) {
                if (data.status == 200) {
                    $('.list-group').append(data.html);
                    setTimeout(function () {
                        sent = 0;
                        window.UpdateChatU = setTimeout(function () {
                            if (sent === 0) {
                                fetchMessages();
                            }
                        },5000);
                    },500);
                }
                else{
                    window.UpdateChatU = setTimeout(function () {
                        fetchMessages();
                    },5000);
                }
            });
        }
    }
</script>