{% extends "base.html" %}
{% import "_island.html" as island %}

{% block title %}Chat — {{ community_name }} — Multithreaded{% endblock %}

{# Chat is ephemeral by design, so there is nothing here worth indexing and a
   crawler holding an SSE connection open is a connection slot spent on nobody. #}
{% block head %}<meta name="robots" content="noindex">{% endblock %}

{% block header %}{% include "partials/site_header.html" %}{% endblock %}

{% block content %}
<div class="container">
    <div class="breadcrumb">
        <a href="/">Forums</a>
        <span class="sep">/</span>
        <a href="/p/{{ community_slug }}">{{ community_name }}</a>
        <span class="sep">/</span>
        Chat
    </div>
    <div class="page-header">
        <h1>Chat</h1>
    </div>

    {# The island reads its configuration from data attributes rather than an
       inline script, so the page needs no script-src exception. Everything
       inside is server-rendered and stays rendered: the element adds arriving
       messages and sends without a page load, and adds nothing else. #}
    <mt-chat-room id="chat-room"
         class="chat-room"
         data-slug="{{ community_slug }}"
         data-cursor="{{ cursor }}"
         data-max-length="{{ max_message_len }}"
         data-can-send="{{ can_send }}"
         data-moderator="{{ is_moderator }}"
         {% if let Some(viewer) = viewer_id %}data-viewer="{{ viewer }}"{% endif %}
         {# The name mentions are written against, which is the username and not
            the display name: docengine matches `@username`, so highlighting on
            a display name would find the wrong person or nobody. #}
         {% if let Some(user) = session_user %}data-viewer-name="{{ user.username }}"{% endif %}>

        <ol class="chat-log" id="chat-log" aria-live="polite" aria-label="Chat messages">
            {% for message in messages %}
            <li class="chat-message" data-id="{{ message.id }}" data-author="{{ message.author_id }}">
                {% if let Some(avatar) = message.avatar_url %}
                <img class="chat-avatar" src="{{ avatar }}" alt="" width="24" height="24">
                {% endif %}
                <span class="chat-author">{{ message.author_name }}</span>
                <time class="chat-time" datetime="{{ message.created_at }}"></time>
                <span class="chat-body">{{ message.body_html|safe }}</span>
            </li>
            {% endfor %}
        </ol>

        {% if messages.is_empty() %}
        <div class="empty-state" id="chat-empty">Nothing said yet.</div>
        {% endif %}

        {% if read_only %}
        <div class="chat-notice">This community is read-only, so chat is too.</div>
        {% elif can_send %}
        <form class="chat-composer" id="chat-composer" method="post"
              action="/p/{{ community_slug }}/chat/send">
            {% if let Some(token) = csrf_token %}
            <input type="hidden" name="csrf_token" value="{{ token }}">
            {% endif %}
            <label class="sr-only" for="chat-input">Message</label>
            <input type="text" id="chat-input" name="body" autocomplete="off"
                   maxlength="{{ max_message_len }}" placeholder="Say something">
            <button type="submit">Send</button>
        </form>
        {% elif session_user.is_some() %}
        <div class="chat-notice">You cannot send messages in this room.</div>
        {% else %}
        <div class="chat-notice"><a href="/auth/login">Sign in</a> to join the conversation.</div>
        {% endif %}
    </mt-chat-room>
</div>
{% endblock %}

{% block scripts %}{% call island::island("chat") %}{% endcall %}{% endblock %}