{% extends "base.html" %}
{% block title %}{{ message.subject }} - {{ config.BBS_NAME }}{% endblock %}
{% block content %}
<div class="bbs-header">
    <h1><i class="bi bi-envelope-open"></i> {{ t('messages.message', 'Message') }}</h1>
</div>
<div class="card mb-3">
    <div class="card-header">
        <strong>{{ message.subject }}</strong>
    </div>
    <div class="card-body">
        <p><strong>{{ t('messages.from_label', 'From:') }}</strong> <a href="{{ url_for('profile.view_user', username=message.sender.username) }}">{{ message.sender.username }}</a></p>
        <p><strong>{{ t('messages.to_label', 'To:') }}</strong> <a href="{{ url_for('profile.view_user', username=message.recipient.username) }}">{{ message.recipient.username }}</a></p>
        <p><strong>{{ t('messages.date_label', 'Date:') }}</strong> {{ message.created_at|eastern('%Y-%m-%d %H:%M') }}</p>
        <hr style="border-color: var(--theme-primary, #00ff00);">
        <button type="button" id="toggleMd" class="btn btn-link btn-sm p-0 mb-2">
            <i class="bi bi-markdown"></i> {{ t('messages.toggle_markdown', 'Toggle Markdown view') }}
        </button>
        <div class="text-end mb-2">
            {% set msg_type = 'pm' %}{% set msg_id = message.id %}
            {% include '_vote_buttons.html' %}
        </div>
        {# Local PM writers store decoded Unicode; do not reinterpret it as CP437. #}
        <pre id="bodyPlain" class="ansi-body" style="white-space:pre-wrap;font-family:inherit;">{{ message.body | msgbody('LATIN-1') }}</pre>
        <div id="bodyMd" style="display:none;" data-md-url="{{ url_for('pm.read_markdown', message_id=message.id) }}"></div>
        {% if message.sender and message.sender.signature %}
        <div class="mt-3 pt-2 small text-muted" style="border-top:1px dashed var(--theme-border); white-space: pre-wrap;">
            -- <br>{{ message.sender.signature }}
        </div>
        {% endif %}
    </div>
</div>
<script>
(function() {
    const btn = document.getElementById('toggleMd');
    const plain = document.getElementById('bodyPlain');
    const md = document.getElementById('bodyMd');
    if (!btn || !plain || !md) return;
    let loaded = false;
    btn.addEventListener('click', () => {
        const showMd = plain.style.display !== 'none';
        if (showMd && !loaded) {
            loaded = true;
            md.textContent = {{ t('messages.loading', 'Loading…') | tojson }};
            fetch(md.dataset.mdUrl)
                .then(r => r.json())
                .then(data => { md.innerHTML = data.html; })
                .catch(() => { md.textContent = {{ t('messages.markdown_failed', 'Failed to load Markdown view.') | tojson }}; loaded = false; });
        }
        plain.style.display = showMd ? 'none' : '';
        md.style.display = showMd ? '' : 'none';
    });
})();
</script>
<div class="d-flex gap-2">
    {% if message.recipient_id == current_user.id %}
    <a href="{{ url_for('pm.compose', username=message.sender.username) }}" class="btn btn-primary"><i class="bi bi-reply"></i> {{ t('messages.reply', 'Reply') }}</a>
    <a href="{{ url_for('pm.compose', username=message.sender.username, quote=message.id) }}" class="btn btn-outline-secondary"><i class="bi bi-quote"></i> {{ t('messages.quote_reply', 'Quote Reply') }}</a>
    <form method="post" action="{{ url_for('saved.add') }}" class="d-inline">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" name="kind" value="pm">
        <input type="hidden" name="target_id" value="{{ message.id }}">
        <button type="submit" class="btn btn-outline-warning"><i class="bi bi-bookmark-star"></i> {{ t('messages.save', 'Save') }}</button>
    </form>
    <form method="post" action="{{ url_for('pm.delete', message_id=message.id) }}" class="d-inline">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button type="submit" class="btn btn-danger"><i class="bi bi-trash"></i> {{ t('messages.delete', 'Delete') }}</button>
    </form>
    <a href="{{ url_for('pm.inbox') }}" class="btn btn-secondary">{{ t('messages.back_inbox', 'Back to Inbox') }}</a>
    {% else %}
    <a href="{{ url_for('pm.sent') }}" class="btn btn-secondary">{{ t('messages.back_sent', 'Back to Sent') }}</a>
    {% endif %}
</div>

{% if conversation and conversation | length > 1 %}
<div class="card mt-4">
    <div class="card-header">
        <i class="bi bi-chat-text"></i> {{ t('messages.conversation', 'Conversation with {username}', username=other.username if other else '?') }}
        {{ t('messages.conversation_count', '({count} messages)', count=conversation|length) }}
    </div>
    <div class="card-body p-0">
        <ul class="list-group list-group-flush">
        {% for m in conversation %}
            <li class="list-group-item {% if m.id == message.id %}bg-secondary bg-opacity-25{% endif %}">
                <div class="d-flex justify-content-between">
                    <a href="{{ url_for('pm.read', message_id=m.id) }}">
                        <strong>{{ m.sender.username if m.sender else '?' }}</strong>:
                        {{ m.subject or t('messages.no_subject', '(no subject)') }}
                    </a>
                    <small>{{ m.created_at|eastern('%Y-%m-%d %H:%M') }}</small>
                </div>
                <small class="text-muted">{{ (m.body or '')[:120] }}{% if (m.body or '')|length > 120 %}...{% endif %}</small>
            </li>
        {% endfor %}
        </ul>
    </div>
</div>
{% endif %}
{% endblock %}