{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="/static/css/messages.css">
{% endblock %}
{% block content %}
<h1 class="sr-only">Messages</h1>
<div class="page-messages">
<div class="messages-layout">
    <div class="messages-list">
        <div class="messages-list-header">
            <input type="text" id="message-search" placeholder="Search conversations..." value="{{ search }}">
        </div>

        <div class="messages-conversations">
            {% 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 %}">
                <img src="{{ avatar_url('multiavatar', conv.other_user['username'], 32) }}" class="avatar-img avatar-sm" alt="{{ conv.other_user['username'] }}" loading="lazy">
                <div class="conversation-info">
                    <div class="conversation-name">{{ conv.other_user['username'] }}</div>
                    <div class="conversation-preview">{{ conv.last_message[:60] }}</div>
                </div>
                <span class="conversation-time">{{ conv.last_message_at[:10] }}</span>
            </a>
            {% else %}
            <div class="empty-state" style="border: none;">No conversations yet</div>
            {% endfor %}
        </div>
    </div>

    <div class="messages-main">
        {% if other_user %}
        <div class="messages-main-header">
            <a href="/profile/{{ other_user['username'] }}">
            <img src="{{ avatar_url('multiavatar', other_user['username'], 32) }}" class="avatar-img avatar-sm" alt="{{ other_user['username'] }}" loading="lazy">
            </a>
            <a href="/profile/{{ other_user['username'] }}"><h3>{{ other_user['username'] }}</h3></a>
        </div>

        <div class="messages-thread">
            {% for msg in messages %}
            <div class="message-bubble {% if msg.is_mine %}mine{% else %}theirs{% endif %}">
                <div class="rendered-content" data-render>{{ msg.message['content'] }}</div>
                <span class="message-time">{{ msg.time_ago }}</span>
            </div>
            {% endfor %}
        </div>

        <form class="messages-input-area" method="POST" action="/messages/send">
            <input type="hidden" name="receiver_uid" value="{{ other_user['uid'] }}">
            <input type="text" name="content" placeholder="Type a message..." required maxlength="2000" autocomplete="off">
            <button type="submit" class="messages-send-btn">&#x27A4;</button>
        </form>
        {% else %}
        <div class="messages-empty">
            <p>Select a conversation to start chatting</p>
        </div>
        {% endif %}
    </div>
</div>
</div>
{% endblock %}