{% extends "base.html" %}
{% block title %}Status Detail — Mastodon Collector{% endblock %}

{% block content %}
<div class="flex items-center gap-2 mb-4">
    <a href="{{ url_for('statuses_list') }}" class="btn btn-outline btn-sm">← Back</a>
    <h1>Status Detail</h1>
</div>

<div class="card mb-4">
    <div class="flex justify-between items-center mb-4">
        <div>
            <span class="badge badge-{{ status.status_type }}">{{ status.status_type }}</span>
            <span class="text-muted text-sm" style="margin-left: 8px;">
                {{ status.created_at.strftime('%Y-%m-%d %H:%M:%S UTC') if status.created_at }}
            </span>
        </div>
        <div>
            {% if status.url %}
                <a href="{{ status.url }}" target="_blank" class="btn btn-outline btn-sm">View on Mastodon ↗</a>
            {% endif %}
        </div>
    </div>

    <table>
        <tr>
            <th style="width: 160px;">Account</th>
            <td>{{ status.account.handle }}{% if status.account.display_name %} — {{ status.account.display_name }}{% endif %}</td>
        </tr>
        <tr>
            <th>Visibility</th>
            <td>{{ status.visibility }}</td>
        </tr>
        <tr>
            <th>Language</th>
            <td>{{ status.language or 'Unknown' }}</td>
        </tr>
        {% if status.in_reply_to_id %}
        <tr>
            <th>In Reply To</th>
            <td>Status {{ status.in_reply_to_id }}{% if status.in_reply_to_account_id %} (account {{ status.in_reply_to_account_id }}){% endif %}</td>
        </tr>
        {% endif %}
        {% if status.conversation_id %}
        <tr>
            <th>Conversation</th>
            <td>{{ status.conversation_id }}</td>
        </tr>
        {% endif %}
        <tr>
            <th>Interactions</th>
            <td>↩ {{ status.replies_count }} replies &nbsp; ⟳ {{ status.reblogs_count }} reblogs &nbsp; ★ {{ status.favourites_count }} favourites</td>
        </tr>
        {% if status.sensitive %}
        <tr>
            <th>Sensitive</th>
            <td>Yes{% if status.spoiler_text %} — {{ status.spoiler_text }}{% endif %}</td>
        </tr>
        {% endif %}
        <tr>
            <th>Mastodon Status ID</th>
            <td class="text-muted">{{ status.status_id }}</td>
        </tr>
        <tr>
            <th>URI</th>
            <td class="text-muted text-sm">{{ status.uri }}</td>
        </tr>
    </table>
</div>

<div class="card mb-4">
    <h2>Content (HTML)</h2>
    <div class="status-content mt-2" style="padding: 16px; background: var(--bg); border-radius: 8px;">
        {{ status.content | safe }}
    </div>
</div>

<div class="card mb-4">
    <h2>Content (Plain Text)</h2>
    <div class="mt-2" style="padding: 16px; background: var(--bg); border-radius: 8px; white-space: pre-wrap; font-family: monospace; font-size: 13px;">{{ status.text_content }}</div>
</div>

{% if status.mentions %}
<div class="card mb-4">
    <h2>Mentions ({{ status.mentions|length }})</h2>
    <table>
        <thead>
            <tr><th>Account</th><th>URL</th></tr>
        </thead>
        <tbody>
            {% for m in status.mentions %}
            <tr>
                <td>@{{ m.mentioned_acct }}</td>
                <td class="text-muted text-sm">{{ m.mentioned_url }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

{% if status.media_attachments %}
<div class="card mb-4">
    <h2>Media Attachments ({{ status.media_attachments|length }})</h2>
    <table>
        <thead>
            <tr><th>Type</th><th>Description</th><th>URL</th></tr>
        </thead>
        <tbody>
            {% for ma in status.media_attachments %}
            <tr>
                <td>{{ ma.media_type }}</td>
                <td>{{ ma.description or '—' }}</td>
                <td class="text-sm"><a href="{{ ma.url }}" target="_blank" style="color: var(--accent);">View ↗</a></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

{% if status.tags %}
<div class="card mb-4">
    <h2>Tags</h2>
    <div class="mt-2">
        {% for t in status.tags %}
            <span class="badge" style="background: var(--bg); margin: 2px;">#{{ t.name }}</span>
        {% endfor %}
    </div>
</div>
{% endif %}

<div class="card">
    <h2>Raw JSON</h2>
    <details>
        <summary class="text-muted" style="cursor: pointer; padding: 8px 0;">Click to expand</summary>
        <pre style="padding: 16px; background: var(--bg); border-radius: 8px; overflow-x: auto; font-size: 12px; max-height: 600px; overflow-y: auto;">{{ status.raw_json | tojson(indent=2) }}</pre>
    </details>
</div>
{% endblock %}