{% extends 'base.html' %}
{% block title %}
Daftar Chat
{% endblock %}

{% block data-page %}
style
{% endblock %}

{% block content %}

<!-- Begin page -->
<main class="h-100">

    {% include "header.html" %}

    <!-- main page content -->
    <div class="main-container container">
            <!-- Search -->
            <div class="form-group form-floating mb-3">
                <form method="get" action="{% url 'daftar_chat' %}">
                    <input type="text" name="s" class="form-control " id="search" placeholder="Cari Pengguna">
                    <button type="submit" class="text-color-theme tooltip-btn">
                        <i class="bi bi-search"></i>
                    </button>
                </form>
            </div>


    <div class="row">
            {% if messages %}
            <div class="sectionTitle text-center mt-3">
                {% for x in messages %}
                <br><p class="bg-primary text-light"><br>{{ x }}<br><br></p>
                {% endfor %}
            </div>
            {% endif %}
        <div class="comments">
            <div class="row">
                <div class="col-12 mb-2">
                    <div class="card shadow-sm mb-4">
                        <ul class="list-group list-group-flush bg-none">
                            <li class="list-group-item">
                                <a href="{% url 'detail_group_chat' chat_group.pk %}">
                                    <div class="row">
                                        <div class="col-auto">
                                            <figure class="avatar avatar-50 rounded-10 shadow-sm">
                                                <img src="/media/k2bftheme/assets/img/logo.png">
                                            </figure>
                                        </div>
                                        <div class="col px-0">
                                            K2BF SAGALAYA<br>
                                            CHAT GRUP
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="row">
            {% for x in page_obj %}
                    {% for o in x.parapengguna.all %}
                    {% if o.id == request.user.id %}
                    {% else %}
                <div class="col-12 mb-0">
                    <div class="card shadow-sm mb-4">
                        <ul class="list-group list-group-flush bg-none">

                            <li class="list-group-item">

                            <a href="{% url 'detailchat' x.id %}">
                                <div class="row">
                                    <div class="col-auto">
                                            {% if o.foto %}
                                        <figure class="avatar avatar-50 rounded-10 shadow-sm">
                                            <img src="{{ 0.foto.url }}" alt="">
                                        </figure>
                                            {% endif %}
                                    </div>
                                    <div class="col px-0">
                                        <p>{{ o.anggota.nama_anggota }}<br><small class="text-muted">{{ o.anggota.last_login }}</small>
                                        </p>
                                    </div>
<!--                                    <div class="col-auto text-end">-->
<!--                                        <p>-->
<!--                                            <small class="text-muted size-12">Online <span-->
<!--                                                    class="avatar avatar-6 rounded-circle bg-success d-inline-block"></span></small>-->
<!--                                        </p>-->
<!--                                    </div>-->
                                </div>
        </a>
                            </li>
                        </ul>
                    </div>
                </div>
                    {% endif %}
                    {% endfor %}
            {% endfor %}
            </div>
        </div>
        <!-- * comments -->
        {% include 'pagination.html' with page='page' %}
    </div>
    </div>
    <!-- main page content ends -->


</main>
<!-- Page ends-->

{% include "footer.html" %}

{% endblock %}