{% extends 'base.html' %}

{% block title %}Conversation: {{ thread.subject }} | {{ settings.site_name }}{% endblock %}

{% block content %}
<section class="section-light py-4">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ url_for('main.home') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ url_for('contact.contact') }}">Contact</a></li>
                <li class="breadcrumb-item active">Conversation</li>
            </ol>
        </nav>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <!-- Thread Header -->
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="mb-1">{{ thread.subject }}</h5>
                            <small class="text-muted">Started on {{ thread.created_at.strftime('%B %d, %Y') }}</small>
                        </div>
                        {% if thread.is_closed %}
                        <span class="badge bg-secondary">Closed</span>
                        {% else %}
                        <span class="badge bg-success">Open</span>
                        {% endif %}
                    </div>
                </div>
                
                <!-- Messages -->
                <div class="message-thread mb-4">
                    {% for message in messages %}
                    <div class="message-item {% if message.is_from_user %}from-user{% else %}from-admin{% endif %}">
                        <div class="message-avatar">
                            {% if message.is_from_user %}
                            <i class="fas fa-user"></i>
                            {% else %}
                            <i class="fas fa-headset"></i>
                            {% endif %}
                        </div>
                        <div class="message-content">
                            <div class="message-bubble">
                                {{ message.message }}
                            </div>
                            <div class="message-time">
                                {% if message.is_from_user %}
                                {{ thread.name }}
                                {% else %}
                                {{ settings.site_name if settings else 'ScholarPress' }} Team
                                {% endif %}
                                &bull; {{ message.created_at.strftime('%b %d, %Y at %I:%M %p') }}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                
                <!-- Reply Form -->
                {% if not thread.is_closed %}
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-reply me-2"></i>Send a Reply
                    </div>
                    <div class="card-body">
                        <form action="{{ url_for('contact.view_thread', token=thread.secure_token) }}" method="POST">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            
                            <div class="mb-3">
                                <textarea class="form-control" name="message" rows="4" required
                                          placeholder="Type your reply here..."></textarea>
                            </div>
                            
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-paper-plane me-2"></i>Send Reply
                            </button>
                        </form>
                    </div>
                </div>
                {% else %}
                <div class="alert alert-secondary">
                    <i class="fas fa-lock me-2"></i>
                    This conversation has been closed and is no longer accepting replies.
                    If you need further assistance, please <a href="{{ url_for('contact.contact') }}">start a new conversation</a>.
                </div>
                {% endif %}
                
                <!-- Info Card -->
                <div class="card mt-4">
                    <div class="card-body">
                        <div class="d-flex align-items-start">
                            <i class="fas fa-info-circle text-primary me-3 mt-1"></i>
                            <div>
                                <h6 class="mb-1">Keep This Link Safe</h6>
                                <p class="text-muted small mb-0">
                                    This is your unique link to access this conversation. 
                                    Bookmark it or keep the email we sent you for future reference.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}