{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="{{ static_url('/static/css/chat.css') }}">
{% endblock %}
{% block footer %}{% endblock %}
{% block content %}
<h1 class="sr-only">Messages</h1>
<div class="page-messages">
<dp-chat
    class="messages-layout"
    mode="page"
    self-uid="{{ user['uid'] }}"
    {% if current_conversation %}with-uid="{{ current_conversation }}"{% endif %}
    conversations-url="/messages/conversations"
    search-url="/messages/search"
    send-url="/messages/send"
    ws-url="/messages/ws"
    ai-indicator="true"
>
    <div class="messages-list" role="navigation" aria-label="Conversations">
        <div class="messages-list-header" role="search">
            <input type="text" id="message-search" placeholder="Search conversations..." value="{{ search }}" aria-label="Search conversations">
        </div>

        <div class="messages-conversations" role="list" aria-label="Conversation list">
            {% for conv in conversations %}
            <a href="/messages?with_uid={{ conv.other_user['uid'] }}" class="conversation-item {% if current_conversation == conv.other_user['uid'] %}active{% endif %}" data-conv-uid="{{ conv.other_user['uid'] }}" role="listitem"{% if current_conversation == conv.other_user['uid'] %} aria-current="true"{% endif %}>
                <span class="avatar-badge"><img src="{{ avatar_url('multiavatar', avatar_seed(conv.other_user), 32) }}" class="avatar-img avatar-sm" alt="{{ conv.other_user['username'] }}" loading="lazy">{% set _user = conv.other_user %}{% include "_presence_dot.html" %}{% include "_award_badge.html" %}</span>
                <div class="conversation-info">
                    <div class="conversation-name">{{ conv.other_user['username'] }}</div>
                    <div class="conversation-preview">{{ content_preview(conv.last_message, 60) }}</div>
                </div>
                <span class="conversation-unread-dot"{% if not conv.unread %} hidden{% endif %}><span class="sr-only">Unread messages</span></span>
                <span class="conversation-time">{{ dt_ago(conv.last_message_at) if conv.last_message_at else format_date(conv.last_message_at) }}</span>
            </a>
            {% else %}
            <div class="empty-state empty-state-borderless">No conversations yet</div>
            {% endfor %}
        </div>
    </div>

    <div class="messages-main">
        {% if other_user %}
        <div class="messages-main-header">
            <button type="button" class="messages-back-btn" id="messages-back-btn" aria-label="Back to conversations">&#x2190;</button>
            {% set _user = other_user %}{% set _size = 32 %}{% set _size_class = "sm" %}{% include "_avatar_link.html" %}
            <div class="messages-header-info">
                <h3>{% set _user = other_user %}{% set _class = none %}{% include "_user_link.html" %}</h3>
                <span class="messages-presence{% if is_online(other_user) %} online{% endif %}" id="messages-presence" role="status" aria-live="polite" data-presence-uid="{{ other_user['uid'] }}" data-presence-last-seen="{{ other_user.get('last_seen') or '' }}" data-presence-label>{% if is_online(other_user) %}online{% elif other_user.get('last_seen') %}last seen {{ dt_ago(other_user['last_seen']) }}{% else %}offline{% endif %}</span>
            </div>
        </div>

        <div class="messages-thread" role="log" aria-label="Message transcript" aria-live="polite" aria-relevant="additions">
            {% for msg in messages %}
            <div class="message-bubble {% if msg.is_mine %}mine{% else %}theirs{% endif %}{% if msg.grouped %} grouped{% endif %}" data-msg-uid="{{ msg.message['uid'] }}" tabindex="0">
                <dp-content>{{ msg.message['content'] }}</dp-content>
                {% if msg.attachments %}
                {% with attachments=msg.attachments %}
                {% include "_attachment_display.html" %}
                {% endwith %}
                {% endif %}
                <span class="message-time">{{ dt_ago(msg.message['created_at']) if msg.message.get('created_at') else msg.time_ago }}</span>
                {% if msg.is_mine %}<span class="message-receipt"{% if not msg.message['read'] %} hidden{% endif %}>&#x2713;&#x2713;<span class="sr-only">Read</span></span>{% endif %}
                {% set _type = "message" %}{% set _uid = msg.message['uid'] %}{% set _owner = msg.message['sender_uid'] %}{% set _owner_name = "" %}{% set _class = "message-report-btn" %}{% include "_report_button.html" %}
            </div>
            {% endfor %}
            <div class="typing-indicator" id="typing-indicator" hidden><span></span><span></span><span></span></div>
        </div>

        <form class="messages-input-area" method="POST" action="/messages/send" data-live-form>
            <input type="hidden" name="receiver_uid" value="{{ other_user['uid'] }}">
            <textarea name="content" placeholder="Type a message..." maxlength="2000" autocomplete="off" data-mention aria-label="Type a message" rows="1"></textarea>
            <dp-upload multiple paste
                max-size="{{ max_upload_size_mb() }}"
                max-files="5"
                allowed-types="{{ allowed_file_types() }}"></dp-upload>
            <button type="submit" class="messages-send-btn" aria-label="Send"><span class="send-icon">&#x27A4;</span><span class="send-spinner" aria-hidden="true"></span></button>
        </form>
        {% else %}
        <div class="messages-empty">
            <p>Select a conversation to start chatting</p>
        </div>
        {% endif %}
    </div>
</dp-chat>
</div>

{% endblock %}