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

<div class="chat-header">
    <div class="row">
        <div class="col-md-6 col-sm-12">
            <div class="info-wrap align-items-center">
                <button class="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="true" aria-controls="peopleList">
                    <i class="an an-bars"></i>
                </button>
                @if ($selected_robot->getFirstMediaUrl('avatar-robot'))
                    <div class="img-wrap">
                        <img src="{{ $selected_robot->getFirstMediaUrl('avatar-robot') }}" alt="avatar">
                    </div>
                @else
                    <div class="img-wrap d-flex align-items-center justify-content-center boot-avatar">
                        {{ get_initials($selected_robot->name) }}
                    </div>
                @endif
                <div class="chat-about">
                    <div class="chat-with">{{ __('robots.chatWithName', ['name' => $selected_robot->name]) }}</div>
                    <span>{{ $selected_robot->profession }}</span>
                </div>
                <div class="ms-auto d-sm-block d-lg-none d-xl-none d-xxl-none d-md-none">

                    <div class="dropdown btn-group dropstart">
                        <a type="button" class="btn dropdown-toggle no-caret" id="bot-actions"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="an an-ellipsis-v"></i>
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="bot-actions">
                            <li>
                                <a type="button" class="btn dropdown-item"
                                    href="{{ route('robot.conversation', ['robot' => $selected_robot->id, 'conversation' => 0]) }}">
                                    <svg width="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                                        <path
                                            d="M224,32C100.3,32,0,121.7,0,232.3c0,54.6,24.5,104.1,64.1,140.3C84,390.7,46.8,480,46.8,480s132.2-50.3,156.8-48.3
                                c6.7,0.5,13.5,0.8,20.4,0.8c123.7,0,224-89.7,224-200.3C448,121.7,347.7,32,224,32z M130.1,262.1c-17.1,0-31-14.1-31-31.5
                                s13.9-31.5,31-31.5c17.1,0,31,14.1,31,31.5S147.2,262.1,130.1,262.1z M230.9,262.1c-17.1,0-31-14.1-31-31.5s13.9-31.5,31-31.5
                                s31,14.1,31,31.5S248,262.1,230.9,262.1z M331.7,262.1c-17.1,0-31-14.1-31-31.5s13.9-31.5,31-31.5c17.1,0,31,14.1,31,31.5
                                S348.8,262.1,331.7,262.1z" />
                                    </svg>
                                    @lang('robots.newConversation')
                                </a>
                            </li>
                            <li>
                                <button class="btn dropdown-item" data-bs-toggle="collapse"
                                    data-bs-target="#sectiontohide" aria-expanded="false" aria-controls="sectiontohide">
                                    <svg width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                        <path
                                            d="M388.2 36.6C269-35.1 115 1.8 40.9 118.7L0 94.1l17.5 133.1 125.7-47-40.8-24.5C156.2 73 266 47.1 351.1 98.3c87.1 52.4 115.2 164.9 62.9 252.3C367.7 428 273.3 459 191.8 428.2c-4.6-1.7-12.4-5.3-20.8-9.8-16.9-9-38-3.1-47.9 13.3-10.7 17.7-4.3 40.9 14 50.5 8.2 4.3 15.6 7.8 20.2 9.7 115 48.7 251.2 6.8 317.7-103.2 73.3-120.9 34.2-279.3-86.8-352.1zm-150 150.2h-26.4c-7.3 0-13.3 5.9-13.3 13.3v110.2c0 10.1 8.2 18.3 18.3 18.3H307c7.3 0 13.3-5.9 13.3-13.3v-26.4c0-7.3-5.9-13.3-13.3-13.3h-55.5V200c0-7.3-5.9-13.2-13.3-13.2z" />
                                    </svg>
                                    @lang('robots.newConversation')
                                </button>
                            </li>
                            @if ($last_conversation != null)
                                <li>
                                    <button type="button" class="btn dropdown-item" data-bs-toggle="modal"
                                        data-bs-target="#nameModal">
                                        <svg width="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                                            <path
                                                d="M354.8,70.2c2.7-4.3-17.4-23.1-45.2-42.2C281.9,8.8,257-3.3,253.9,0.8L19.6,343.6l-10,14.7c5,26.7,57.6,69,100.5,66.7
                              l11.1-15.7L354.8,70.2z M295.2,29.3c0.5-0.8,5,1.4,10.1,4.9c5,3.5,8.7,6.9,8.2,7.7s-5.1-1.4-10.1-4.9
                              C298.3,33.4,294.7,30,295.2,29.3z M448,480H130.6l49.3-72H448V480z M2,372.1L0,479.7l102.5-40.9c-14.8-3.4-40.3-7.8-61.6-22.3
                              C21.3,403.2,10,383.6,2,372.1z" />
                                        </svg>
                                        @lang('robots.editName')
                                    </button>
                                </li>
                                <li>
                                    <a type="button" class="btn dropdown-item"
                                        href="{{ route('robot.conversationDelete', $last_conversation->id) }}"
                                        class="btn">
                                        <svg width="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 358 512">
                                            <path
                                                d="M0.9,138.3v308.4c0,18.4,14.9,33.3,33.2,33.3h290.6c18.4,0,33.2-14.9,33.2-33.3V138.3H0.9z M333.6,60.5h-57.8V39.6
                              c0-21.8-17.7-39.6-39.4-39.6H118.1C96.4,0,78.7,17.7,78.7,39.6v20.9H24.3C10.9,60.5,0,71.3,0,84.8s10.9,24.4,24.3,24.4h309.3
                              c13.5,0,24.3-10.9,24.3-24.4C357.9,71.3,347.1,60.5,333.6,60.5L333.6,60.5z M107.9,40.3c0-8.4,6.8-15.3,15.3-15.3h108.2
                              c8.4,0,15.3,6.8,15.3,15.3v20.2H107.9V40.3z" />
                                        </svg>
                                        @lang('robots.delete')
                                    </a>
                                </li>
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-sm-12 actions align-items-center">
            <a type="button" class="btn" data-coreui-toggle="tooltip" title="@lang('robots.newConversation')"
                href="{{ route('robot.conversation', ['robot' => $selected_robot->id, 'conversation' => 0]) }}">
                <svg width="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                    <path
                        d="M224,32C100.3,32,0,121.7,0,232.3c0,54.6,24.5,104.1,64.1,140.3C84,390.7,46.8,480,46.8,480s132.2-50.3,156.8-48.3
                            c6.7,0.5,13.5,0.8,20.4,0.8c123.7,0,224-89.7,224-200.3C448,121.7,347.7,32,224,32z M130.1,262.1c-17.1,0-31-14.1-31-31.5
                            s13.9-31.5,31-31.5c17.1,0,31,14.1,31,31.5S147.2,262.1,130.1,262.1z M230.9,262.1c-17.1,0-31-14.1-31-31.5s13.9-31.5,31-31.5
                            s31,14.1,31,31.5S248,262.1,230.9,262.1z M331.7,262.1c-17.1,0-31-14.1-31-31.5s13.9-31.5,31-31.5c17.1,0,31,14.1,31,31.5
                            S348.8,262.1,331.7,262.1z" />
                </svg>
            </a>
            @if ($last_conversation != null)
                <a type="button" href="{{ route('robot.conversationDelete', $last_conversation->id) }}" class="btn"
                    data-coreui-toggle="tooltip" title="@lang('robots.delete')">
                    <svg width="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 358 512">
                        <path
                            d="M0.9,138.3v308.4c0,18.4,14.9,33.3,33.2,33.3h290.6c18.4,0,33.2-14.9,33.2-33.3V138.3H0.9z M333.6,60.5h-57.8V39.6
                      	c0-21.8-17.7-39.6-39.4-39.6H118.1C96.4,0,78.7,17.7,78.7,39.6v20.9H24.3C10.9,60.5,0,71.3,0,84.8s10.9,24.4,24.3,24.4h309.3
                      	c13.5,0,24.3-10.9,24.3-24.4C357.9,71.3,347.1,60.5,333.6,60.5L333.6,60.5z M107.9,40.3c0-8.4,6.8-15.3,15.3-15.3h108.2
                      	c8.4,0,15.3,6.8,15.3,15.3v20.2H107.9V40.3z" />
                    </svg>
                </a>
                <button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#nameModal"
                    data-coreui-toggle="tooltip" title="@lang('robots.editName')">
                    <svg width="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                        <path
                            d="M354.8,70.2c2.7-4.3-17.4-23.1-45.2-42.2C281.9,8.8,257-3.3,253.9,0.8L19.6,343.6l-10,14.7c5,26.7,57.6,69,100.5,66.7
                      	l11.1-15.7L354.8,70.2z M295.2,29.3c0.5-0.8,5,1.4,10.1,4.9c5,3.5,8.7,6.9,8.2,7.7s-5.1-1.4-10.1-4.9
                      	C298.3,33.4,294.7,30,295.2,29.3z M448,480H130.6l49.3-72H448V480z M2,372.1L0,479.7l102.5-40.9c-14.8-3.4-40.3-7.8-61.6-22.3
                      	C21.3,403.2,10,383.6,2,372.1z" />
                    </svg>
                </button>
            @endif
            <button class="btn" data-bs-toggle="collapse" data-bs-target="#sectiontohide" aria-expanded="false"
                aria-controls="sectiontohide" data-coreui-toggle="tooltip" title="@lang('robots.conversations')">
                <svg width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                    <path
                        d="M388.2 36.6C269-35.1 115 1.8 40.9 118.7L0 94.1l17.5 133.1 125.7-47-40.8-24.5C156.2 73 266 47.1 351.1 98.3c87.1 52.4 115.2 164.9 62.9 252.3C367.7 428 273.3 459 191.8 428.2c-4.6-1.7-12.4-5.3-20.8-9.8-16.9-9-38-3.1-47.9 13.3-10.7 17.7-4.3 40.9 14 50.5 8.2 4.3 15.6 7.8 20.2 9.7 115 48.7 251.2 6.8 317.7-103.2 73.3-120.9 34.2-279.3-86.8-352.1zm-150 150.2h-26.4c-7.3 0-13.3 5.9-13.3 13.3v110.2c0 10.1 8.2 18.3 18.3 18.3H307c7.3 0 13.3-5.9 13.3-13.3v-26.4c0-7.3-5.9-13.3-13.3-13.3h-55.5V200c0-7.3-5.9-13.2-13.3-13.2z" />
                </svg>
            </button>
        </div>
    </div>
</div>