{% extends "base.html" %}
{% block title %}{% if original %}Reply{% else %}Compose{% endif %} — {{ config.BBS_NAME }}{% endblock %}

{% block content %}
<div class="bbs-header">
    <h1><i class="bi bi-pencil-square"></i> {% if original %}Reply to Message{% else %}Compose Echomail{% endif %}</h1>
    <p>Area: {{ echo_area.name }} ({{ echo_area.tag }})</p>
</div>

<a href="{{ url_for('echomail.area', area_id=echo_area.id) }}" class="btn btn-primary btn-sm mb-3">
    <i class="bi bi-arrow-left"></i> Back to Area
</a>

{% if original %}
<div class="card mb-3 border-info">
    <div class="card-header py-1">
        <a class="text-decoration-none" data-bs-toggle="collapse" href="#parentCtx">
            <i class="bi bi-chat-square-quote"></i>
            Replying to <strong>{{ original.from_name }}</strong> —
            <em>{{ original.subject or '(no subject)' }}</em>
            <small class="text-muted">({{ original.created_at.strftime('%Y-%m-%d %H:%M') }})</small>
            <span class="float-end">click to {% if original %}collapse/expand{% endif %}</span>
        </a>
    </div>
    <div id="parentCtx" class="collapse show">
        <div class="card-body p-2">
            <pre style="white-space:pre-wrap;font-size:0.85rem;font-family:monospace;margin:0;max-height:200px;overflow-y:auto;">{{ original.body }}</pre>
        </div>
    </div>
</div>
{% endif %}

<div class="card">
    <div class="card-header"><i class="bi bi-envelope-plus"></i> New Message</div>
    <div class="card-body">
        <form method="post">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            {{ form.hidden_tag() }}

            <div class="mb-3">
                {{ form.area_id.label(class="form-label") }}
                {{ form.area_id(class="form-control") }}
            </div>

            <div class="mb-3">
                {{ form.to_name.label(class="form-label") }}
                {{ form.to_name(class="form-control", placeholder="Recipient name") }}
                {% for err in form.to_name.errors %}
                <div class="text-danger" style="font-size:0.85rem;">{{ err }}</div>
                {% endfor %}
            </div>

            <div class="mb-3">
                {{ form.subject.label(class="form-label") }}
                {{ form.subject(class="form-control", placeholder="Message subject") }}
                {% for err in form.subject.errors %}
                <div class="text-danger" style="font-size:0.85rem;">{{ err }}</div>
                {% endfor %}
            </div>

            <div class="mb-3">
                {{ form.body.label(class="form-label") }}
                {{ form.body(class="form-control", rows=15,
                             style="font-family: 'Courier New', monospace; font-size: 0.9rem;") }}
                {% for err in form.body.errors %}
                <div class="text-danger" style="font-size:0.85rem;">{{ err }}</div>
                {% endfor %}
            </div>

            <div class="d-flex justify-content-between">
                <a href="{{ url_for('echomail.area', area_id=echo_area.id) }}" class="btn btn-primary">
                    <i class="bi bi-x-circle"></i> Cancel
                </a>
                {{ form.submit(class="btn btn-primary") }}
            </div>
        </form>
    </div>
</div>
{% endblock %}