{{--
    Ported from the design's chat.php. Markup and classes are the design's; the
    transcript and the campaign are ours.

    The campaign drawer is an addition. The design has no place for campaign
    state, and the product cannot ship without it, so it slides over rather than
    displacing the chat. Raised with design rather than reshaping their layout.
--}}
<x-mb-layout :page-title="$pageTitle ?? 'New chat'" :conversations="$conversations" :conversation-id="$conversationId" campaign-panel>

    <section class="mb-chat" data-context="Create a new ad campaign">
        <div class="mb-chat-scroll" id="chatScroll">
            @if (empty($transcript))
                <button class="mb-suggest" data-action="suggest">Create a new ad campaign</button>
            @endif

            <div id="msgs" class="d-flex flex-column">
                @foreach ($transcript as $message)
                    <div class="mb-msg{{ $message['role'] === 'user' ? ' me' : '' }}">
                        @if ($message['html'])
                            {!! $message['html'] !!}
                        @else
                            {{ $message['text'] }}
                        @endif
                    </div>
                @endforeach
            </div>
        </div>

        <div class="mb-composer-wrap">
            <div class="mb-composer" id="composerBox">
                <div class="mb-attachments" id="attachments"></div>
                <textarea rows="1" placeholder="Type your message..." aria-label="Message" id="composer"></textarea>
                <div class="mb-composer-bar">
                    <button class="mb-icon-btn" data-pop="attach" aria-label="Add attachment" aria-haspopup="menu"><i class="bi bi-plus-lg"></i></button>
                    <button class="mb-send" data-action="send" aria-label="Send"><i class="bi bi-arrow-up"></i></button>
                </div>
                <input type="file" id="fileInput" multiple hidden accept="image/*,video/mp4,video/quicktime">
            </div>
        </div>

        {{-- Attach popover, ported from the design's attach-menu.php. "Upload from
             Library" is left out: the creative library is another team's module
             and is not wired yet, so offering it would do nothing. --}}
        <div class="mb-pop mb-menu mb-attach-menu d-none" id="pop-attach" role="menu">
            <button type="button" class="mb-menu-item" data-action="attach-file" role="menuitem"><i class="bi bi-paperclip"></i>Attach file</button>
        </div>
    </section>

    {{-- Campaign drawer: not in the design, see the note at the top. --}}
    <aside class="mb-campaign" id="campaignDrawer" aria-label="Campaign">
        <div class="mb-campaign-head">
            <strong>Campaign</strong>
            <button class="mb-icon-btn" data-action="toggle-campaign" aria-label="Close campaign"><i class="bi bi-x-lg"></i></button>
        </div>
        <div class="mb-campaign-body" id="panel">{!! $panelHtml !!}</div>
        <div class="mb-campaign-foot">
            <button id="publish" class="btn btn-primary w-100" @disabled(! $ready || $published)>
                {{ $published ? 'Published' : 'Publish' }}
            </button>
            <div id="publishNote" class="mb-campaign-note"></div>
        </div>
    </aside>

    @push('scripts')
        <script>
            window.chat = {
                conversation: @json($conversationId),
                sendUrl: @json(route('chat.send')),
                publishUrl: @json(route('chat.publish')),
                decideUrl: @json(route('chat.decide')),
                focusUrl: @json(route('chat.focus')),
                awaiting: @json($awaiting ?? []),
                token: @json(csrf_token()),
            };
        </script>
        <script src="{{ asset('assets/js/chat.js') }}?v={{ filemtime(public_path('assets/js/chat.js')) }}"></script>
    @endpush
</x-mb-layout>