@if($selectedUser)

<x-voice-recorder />

<div id="reply-preview-bar" class="reply-preview-bar hidden" aria-live="polite"></div>

<div id="edit-preview-bar" class="edit-preview-bar hidden" aria-live="polite">
    <div class="edit-preview-content">
        <i class="fa-solid fa-pen"></i>
        <span>Edit message</span>
    </div>
    <button type="button" class="edit-preview-close" id="edit-preview-cancel" aria-label="Cancel edit">
        <i class="fa-solid fa-xmark"></i>
    </button>
</div>

<form action="{{ route('gc.send.message') }}" method="POST" class="message-input" enctype="multipart/form-data" id="message-form">

    @csrf
    <input type="hidden" name="receiver_id" value="{{ $selectedUser->id }}">

    <button type="button" id="emoji-toggle" class="picker-open-btn" title="Emoji, stickers & GIFs">
        <i class="fa-regular fa-face-smile"></i>
    </button>

    <button type="button" id="attach-toggle" class="attach-btn" title="Attach" aria-expanded="false">
        <i class="fa-solid fa-paperclip"></i>
    </button>

    <textarea id="message-input" name="message" rows="1" placeholder="Type a message" autocomplete="off"></textarea>

    <button type="button" id="voice-record-btn" title="Voice message">
        <i class="fa-solid fa-microphone"></i>
    </button>

    <button type="submit" class="send-btn" title="Send">
        <i class="fa-solid fa-paper-plane"></i>
    </button>

</form>

<x-media-picker />
<x-attachment-menu />

@endif