@include(snippets/header)
<div class="pagewrapper">
<div id="main" class="messages-page messages-convo-page">

    <!-- Back + header -->
    <div class="messages-header">
        <a href="/messages" class="dm-back-btn" title="Back to inbox">←</a>
        <div class="dm-convo-header-info">
            @if(other.avatar_file)
            <img class="dm-header-avatar" src="/a/{{ other.avatar_file }}" alt="" onerror="this.src='/a/default.png'">
            @elseif(other.avatar && other.avatar > 0)
            <img class="dm-header-avatar" src="/t/{{ other.avatar }}.webp" alt="" onerror="this.src='/a/default.png'">
            @else
            <img class="dm-header-avatar" src="/a/default.png" alt="">
            @endif
            <a href="/user/{{ other.user.toLowerCase() }}" class="dm-header-username" @if(other.username_color) style="color:{{ other.username_color }}" @endif>{!! other.display_name || other.user !!}</a>
        </div>
        <button class="dm-manage-keys-btn btn-small" title="Manage encryption key">🔑 Keys</button>
    </div>

    <!-- Key notice -->
    <div id="dm-key-notice" class="dm-key-notice" style="display:none;"></div>

    <!-- Thread -->
    <div id="dm-thread"
         class="dm-thread"
         data-other-id="{{ other.id }}"
         data-other-name="{{ other.user }}"
         data-my-id="{{ session.id }}">
        <div class="dm-loading">{{ t('messages.decrypting') }}</div>
    </div>

    <!-- Send form -->
    <form id="dm-send-form" class="dm-send-form comment-input" autocomplete="off">
        <textarea id="dm-input"
                  class="dm-input"
                  placeholder="{{ t('messages.input_placeholder') }}"
                  rows="2"
                  maxlength="4000"
                  required></textarea>
        <div class="input-actions">
            <button type="submit" id="dm-send-btn" class="submit-comment dm-send-btn">{{ t('messages.send') }}</button>
        </div>
    </form>

</div>
</div>
@include(snippets/footer)