@props([
    'robots' => null,
    'selected_robot' => null,
])

<div class="people-list" id="peopleList">
    <div class="search">
        <input class="form-control" type="search" placeholder="Search" aria-label="Search" id="search-input">
    </div>
    <div class="close-wrap">
        <button class="btn-close btn d-sm-block d-lg-none d-xl-none d-xxl-none d-md-none" data-bs-toggle="collapse"
            data-bs-target="#peopleList" aria-expanded="false" aria-controls="peopleList">
            <svg width="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 512">
                <path
                    d="M240,195.8L403.8,32L464,92.2L300.2,256L464,419.8L403.8,480L240,316.2L76.2,480L16,419.8L179.8,256L16,92.2L76.2,32 L240,195.8z"
                    fill="#adb9d3" />
            </svg>
        </button>
    </div>
    <ul class="list">
        @foreach ($robots as $robot)
            <li class="online @if ($robot->id == $selected_robot->id) active @endif robot-search-li">
                <a href="{{ route('robot.conversation', ['robot' => $robot->id]) }}">
                    @if ($robot->getFirstMediaUrl('avatar-robot'))
                        <div class="img-wrap d-flex align-items-center justify-content-center boot-avatar">
                            <img src="{{ $robot->getFirstMediaUrl('avatar-robot') }}" alt="avatar">
                        </div>
                    @else
                        <div class="img-wrap d-flex align-items-center justify-content-center boot-avatar">
                            {{ get_initials($robot->name) }}
                        </div>
                    @endif
                    <div class="about">
                        <div class="name">{{ $robot->name }}</div>
                        <div class="status">
                            {{ $robot->profession }}
                        </div>
                    </div>
                </a>
            </li>
        @endforeach
    </ul>
</div>