{{define "user-message"}}
<article class="message user-message">
    <div class="message-header">
        <p>User</p>
        <form>
            <input type="hidden">
            <button class="delete" aria-label="delete"></button>
        </form>
    </div>
    <div class="message-body">
        {{ .Content }}
    </div>
</article>
{{end}}

{{define "bot-message"}}
<article class="message bot-message">
    <div class="message-header">
        <p>Bot</p>
        <form>
            <input type="hidden">
            <button class="delete" aria-label="delete"></button>
        </form>
    </div>
    <div class="message-body">
        {{ .Content }}
    </div>
</article>
{{end}}

{{define "chat-input"}}
<form>
    <input class="input" type="text" placeholder="Type your message here..." name="message" />
</form>
{{end}}

{{define "chat-messages"}}
<div class="columns is-centered">
    <div class="column is-half">
        {{range .Messages}}
        {{if eq .Role "user"}}
        {{template "user-message" .Message}}
        {{else}}
        {{template "bot-message" .Message}}
        {{end}}
        {{end}}
    </div>
</div>
{{end}}


{{ define "content" }}
<div class="chat-container">
    <h1>Chat Page</h1>
    {{template "chat-messages" .Messages}}
    {{template "chat-input"}}
</div>
{{ end }}