{{define "chat"}}{{template "base" .}}{{end}}

{{define "chat-content"}}
<div class="chat-container" data-board-id="{{.Board.ID}}" data-base-path="{{.BasePath}}" data-current-username="{{.CurrentUsername}}">
    <div class="chat-breadcrumb">
        <a href="{{.BasePath}}/">Home</a>
        <span class="chat-breadcrumb-separator">›</span>
        <a href="{{.BasePath}}/boards/">Boards</a>
        <span class="chat-breadcrumb-separator">›</span>
        <span>{{.Board.Name}}</span>
    </div>
    <header class="chat-header">
        <div class="connection-status">
            <div class="connection-dot connecting" id="connection-dot"></div>
            <span id="connection-text">Connecting...</span>
        </div>
        <h2>{{.Board.Name}}</h2>
        <p>{{.Board.Description}}</p>
    </header>
    <div class="chat-messages" id="chat-messages">
        <div class="typing-indicator" id="typing-indicator">
            <span id="typing-users"></span><span class="typing-dots"><span>.</span><span>.</span><span>.</span></span>
        </div>
        {{range .Messages}}
        <div class="chat-message{{if .Mentions}}{{range .Mentions}}{{if eq . $.CurrentUsername}} chat-message-highlighted{{end}}{{end}}{{end}}" id="msg-{{.ID}}" data-user="{{.Username}}" data-reply="{{.ReplyTo}}">
            <div class="chat-message-header">
                {{if .PfpFileID.Valid}}
                <img src="{{$.BasePath}}/file?id={{.PfpFileID.Int64}}" alt="PFP" class="chat-message-pfp">
                {{else}}
                <div class="chat-message-pfp" style="background-color: #001858;"></div>
                {{end}}
                <span class="chat-message-username">{{.Username}}</span>
                <span class="chat-message-timestamp">{{.Timestamp.Format "02/01/2006 15:04"}}</span>
            </div>
            {{if gt .ReplyTo 0}}
            <div class="chat-message-reply" onclick="scrollToMessage({{.ReplyTo}})">Replying to message...</div>
            {{end}}
            <div class="chat-message-content">{{.Content}}</div>
            <div class="post-actions">
                <a href="javascript:void(0)" onclick="replyToMessage({{printf "%v" .ID}}, '{{.Username}}')">Reply</a>
            </div>
        </div>
        {{end}}
    </div>
    <button class="jump-to-bottom" id="jump-to-bottom" title="Jump to bottom" type="button">
        ↓
        <span class="unread-badge" id="unread-badge" style="display: none;">0</span>
    </button>
    <div class="chat-input">
        <div id="reply-indicator" class="reply-indicator">
            <span id="reply-username">Replying to </span>
            <button onclick="cancelReply()" type="button">X</button>
        </div>
        <textarea id="chat-input-text" placeholder="Type a message..."></textarea>
        <button onclick="sendMessage()" type="button">Send</button>
    </div>
</div>
<div id="autocomplete-popup" class="autocomplete-popup"></div>
<script type="application/json" id="chat-usernames">{{.AllUsernames}}</script>
{{end}}