@extends('web.layouts.layout')

@section('content')

    <main>
        <!-- Start section -->
        <section class="chat_pg section">
            <div class="container">
                <div class="new_chat">
                    <div class="users">
                        <div class="title mb-4 ">
                            <div class="row align-items-center">
                                <div class="col-8">
                                    <h5 class="text-bold text-dark"> {{ $title }} </h5>
                                </div>
                                <div class="col-4 text-end">
                                    <div class="dropdown">
                                        <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown"
                                                aria-expanded="false">
                                            <i class="fas fa-ellipsis-v"></i>
                                        </button>
                                        <ul class="dropdown-menu filter-chat">
                                            <li data-filter-by="all_conversations">
                                                <a class="dropdown-item active"
                                                   href="#">{{ __('users::users.all_conversations') }}</a>
                                            </li>
                                            <li data-filter-by="active_orders">
                                                <a class="dropdown-item"
                                                   href="#">{{ __('users::users.active_orders') }}</a></li>
                                            <li data-filter-by="unread_messages">
                                                <a class="dropdown-item" href="#">{{ __('users::users.unread') }}</a>
                                            </li>
                                            <li data-filter-by="block_list">
                                                <a class="dropdown-item"
                                                   href="#">{{ __('users::users.block_list') }}</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="search_card form-box mb-4">
                            <div class="form-group">
                                <input type="text"
                                       name="search"
                                       id="liveSearch"
                                       class="form-control"
                                       placeholder="{{ __('main.search') }}"/>
                                <button><i class="fal fa-search"></i></button>
                            </div>
                        </div>
                        <div class="users-cards-wrapper">
                            @include('web.chats::_chat_user_cards')
                        </div>
                    </div>
                    <div class="chat-loader" style="display: none;">
                        <i class="fas fa-spinner fa-spin"></i> {{ __('general.loading') }}
                    </div>
                    <div class="chat_content" id="chat-content">
                        @include('web.chats::_no_chat_selected')
                    </div>
                </div>
            </div>
        </section>
    </main>

@endsection

@include('web.chats::_chat_script')

@push('stack_scripts')

@endpush