{% extends "base.html" %}
{% block title %}Reply to Message - Admin - A+ Academy{% endblock %}
{% block extra_css %}
<style>
.admin-sidebar { background: white; border-radius: 20px; box-shadow: var(--soft-shadow); padding: 1.5rem; height: calc(100vh - 140px); position: sticky; top: 100px; }
.admin-nav-link { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: var(--text-dark); text-decoration: none; border-radius: 10px; margin-bottom: 8px; transition: all 0.3s ease; }
.admin-nav-link:hover, .admin-nav-link.active { background: rgba(37, 99, 235, 0.1); color: var(--primary-blue); }
</style>
{% endblock %}
{% block content %}
<section style="padding: 120px 0 40px;">
    <div class="container">
        <div class="row g-4">
            <div class="col-lg-3">
                <div class="admin-sidebar">
                    <div class="d-flex align-items-center gap-2 mb-4 pb-3 border-bottom">
                        <i class="bi bi-person-circle text-primary fs-4"></i>
                        <div><div class="fw-bold">{{ current_user.username }}</div><small class="text-muted">Administrator</small></div>
                    </div>
                    <nav>
                        <a href="{{ url_for('admin.dashboard') }}" class="admin-nav-link"><i class="bi bi-speedometer2"></i> Dashboard</a>
                        <a href="{{ url_for('admin.messages') }}" class="admin-nav-link active"><i class="bi bi-envelope"></i> Messages</a>
                        <a href="{{ url_for('admin.content') }}" class="admin-nav-link"><i class="bi bi-file-text"></i> Site Content</a>
                        <a href="{{ url_for('admin.admin_subjects') }}" class="admin-nav-link"><i class="bi bi-book"></i> Subjects</a>
                        <div class="border-top my-3"></div>
                        <a href="{{ url_for('admin.logout') }}" class="admin-nav-link text-danger"><i class="bi bi-box-arrow-right"></i> Logout</a>
                    </nav>
                </div>
            </div>
            <div class="col-lg-9">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h4 class="mb-0">Reply to Message</h4>
                    <a href="{{ url_for('admin.view_message', message_id=message.id) }}" class="btn btn-outline-primary btn-sm"><i class="bi bi-arrow-left"></i> Back</a>
                </div>
                <div class="soft-card p-4 mb-4 bg-light">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div><h6 class="mb-1">From: {{ message.name }}</h6><small class="text-muted">{{ message.email }}</small></div>
                        <span class="badge bg-primary">{{ message.subject }}</span>
                    </div>
                    <div class="p-3 bg-white rounded-3"><p class="mb-0 text-muted" style="white-space: pre-wrap;">{{ message.message }}</p></div>
                </div>
                <div class="soft-card p-4">
                    <h6 class="mb-3">Your Reply</h6>
                    <form method="POST" action="{{ url_for('admin.reply_message', message_id=message.id) }}">
                        {{ form.hidden_tag() }}
                        <div class="mb-3">
                            {{ form.reply_message(class="form-control" + (" is-invalid" if form.reply_message.errors else ""), rows=8, placeholder="Type your reply here...") }}
                            {% if form.reply_message.errors %}<div class="invalid-feedback">{% for error in form.reply_message.errors %}{{ error }}{% endfor %}</div>{% endif %}
                        </div>
                        <div class="d-flex gap-2">
                            {{ form.submit(class="soft-btn") }}
                            <a href="{{ url_for('admin.messages') }}" class="btn btn-outline-secondary">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}