{% include 'public/partials/header.html' %}
<main class="wrap chat-page" data-live-chat data-base-url="{{ $baseUrl }}" data-csrf="{{ $csrfToken }}" data-open-conversation="{{ $openConversationId }}" data-start-username="{{ $startUsername }}">
  <div class="breadcrumb"><a href="{{ $baseUrl }}/">Forum Index</a><span>›</span><b>Live Chat</b></div>
  <section class="live-chat-shell panel">
    <aside class="chat-rail">
      <header><div><span class="eyebrow">Instant messages</span><h1>Live Chat</h1></div><button type="button" class="chat-new" data-chat-new aria-label="Start a chat">＋</button></header>
      <label class="chat-search"><span>⌕</span><input type="search" placeholder="Search people or chats" data-chat-search></label>
      <nav class="chat-tabs"><button class="active" type="button" data-chat-tab="conversations">Chats</button><button type="button" data-chat-tab="people">People</button></nav>
      <div class="chat-list" data-chat-conversations><div class="chat-loading">Loading conversations…</div></div>
      <div class="chat-list" data-chat-contacts hidden><div class="chat-loading">Loading members…</div></div>
    </aside>
    <section class="chat-stage">
      <div class="chat-empty" data-chat-empty><span class="chat-empty-icon">◇</span><h2>Your live conversations</h2><p>Select a conversation or choose a member to begin chatting instantly.</p><button class="btn primary" type="button" data-chat-browse>Browse online members</button></div>
      <div class="chat-conversation" data-chat-conversation hidden>
        <header class="chat-conversation-head"><div class="chat-person-avatar" data-chat-avatar></div><div><h2 data-chat-name>Conversation</h2><p><i class="status-dot"></i><span data-chat-status>Offline</span></p></div><div class="chat-head-actions"><a href="#" data-chat-profile>View profile</a><button type="button" title="Conversation options">•••</button></div></header>
        <div class="chat-messages" data-chat-messages><div class="chat-loading">Loading messages…</div></div>
        <div class="chat-typing" data-chat-typing hidden><span></span><span></span><span></span><b>typing</b></div>
        <form class="chat-composer" data-chat-form><textarea name="body" rows="1" maxlength="2000" placeholder="Write a message…" data-chat-input></textarea><div class="chat-compose-tools"><span>Enter to send · Shift+Enter for a new line</span><button type="submit" class="btn primary">Send</button></div></form>
      </div>
    </section>
  </section>
</main>
{% include 'public/partials/footer.html' %}