{% extends 'layout.twig' %}
{% block title %}#{{ ticket.number }} {{ ticket.subject }} — {{ brand.name }}{% endblock %}
{% block content %}
    <section class="page-head">
        <div class="container">
            <p class="breadcrumbs"><a href="{{ app_url('/portal') }}">My Tickets</a> / {{ ticket.number }}</p>
            <h1>{{ ticket.subject }}</h1>
            <p class="muted">
                Status: <span class="badge status-{{ ticket.status }}">{{ ticket.status }}</span>
                · Priority: <span class="badge priority-{{ ticket.priority }}">{{ ticket.priority }}</span>
            </p>
        </div>
    </section>
    <section class="container">
        <div class="ticket-thread">
            {% for r in replies %}
                <article class="reply {{ r.user_role in ['admin','agent'] ? 'reply-staff' : 'reply-customer' }}">
                    <header class="reply-head">
                        <strong>{{ r.user_name ?: r.from_name ?: r.from_email }}</strong>
                        <span class="muted small">{{ r.created_at|time_ago }}</span>
                        {% if r.source == 'email' %}<span class="badge">via email</span>{% endif %}
                    </header>
                    <div class="reply-body prose">{{ r.body_html|md }}</div>
                    {% if r.attachments %}
                        <div class="attachments">
                            {% for a in r.attachments %}
                                <a class="attachment" href="{{ app_url(a.path) }}" target="_blank" rel="noopener">📎 {{ a.original_name }} <span class="muted small">({{ a.size|bytes }})</span></a>
                            {% endfor %}
                        </div>
                    {% endif %}
                </article>
            {% endfor %}
        </div>

        {% if ticket.status != 'closed' %}
        <h2 class="section-title">Reply</h2>
        <form method="post" action="{{ app_url('/tickets/' ~ ticket.number ~ '/' ~ ticket.access_token) }}" enctype="multipart/form-data" class="form">
            {{ csrf_field()|raw }}
            <div class="form-row">
                <textarea name="body" id="reply-body" rows="8" required></textarea>
            </div>
            <div class="form-row">
                <label>Attachments</label>
                <input type="file" name="attachments[]" multiple>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Post Reply</button>
            </div>
        </form>
        {% endif %}
    </section>
{% endblock %}
{% block scripts %}
    {% include 'partials/tinymce.twig' with {selector: '#reply-body', allow_images: false} %}
{% endblock %}