{% extends "base.html" %}

{% block title %}Ticket {{ ticket.ticket_number }} - LSMC Hub{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1>Ticket {{ ticket.ticket_number }}</h1>
        <p class="text-muted">Created {{ ticket.created_at | format_dt(user_preferences) }}</p>
    </div>
    <div>
        <span class="badge badge-{{ 'success' if revision.status == 'RESOLVED' else 'secondary' if revision.status == 'CLOSED' else 'primary' if revision.status == 'IN_PROGRESS' else 'default' }}">
            {{ revision.status.replace('_', ' ') }}
        </span>
    </div>
</div>

<div class="flex gap-lg">
    <!-- Main Content -->
    <div style="flex: 2;">
        <div class="card">
            <div class="card-header">
                <h2 class="card-title">{{ revision.subject }}</h2>
            </div>
            
            <div class="card-section">
                <h3>Description</h3>
                <p style="white-space: pre-wrap;">{{ revision.description }}</p>
            </div>

            {% if revision.resolution_notes %}
            <div class="card-section">
                <h3>Resolution</h3>
                <p style="white-space: pre-wrap;">{{ revision.resolution_notes }}</p>
                {% if revision.resolved_at %}
                <p class="text-muted">
                    Resolved on {{ revision.resolved_at | format_dt(user_preferences) }}
                </p>
                {% endif %}
            </div>
            {% endif %}

            {% if user.is_internal and revision.status not in ['RESOLVED', 'CLOSED'] %}
            <div class="card-section">
                <h3>Resolve Ticket</h3>
                <form method="post" action="/support/{{ ticket.id }}/resolve">
                    <div class="form-group">
                        <label for="resolution_notes">Resolution Notes *</label>
                        <textarea 
                            id="resolution_notes" 
                            name="resolution_notes" 
                            rows="4"
                            required
                            placeholder="Describe how the issue was resolved"
                        ></textarea>
                    </div>
                    <button type="submit" class="btn btn-success">Mark as Resolved</button>
                </form>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Sidebar -->
    <div style="flex: 1;">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Details</h3>
            </div>
            
            <div class="detail-list">
                <div class="detail-item">
                    <span class="detail-label">Type</span>
                    <span class="detail-value">
                        <span class="badge badge-default">
                            {{ revision.ticket_type.replace('_', ' ') }}
                        </span>
                    </span>
                </div>

                <div class="detail-item">
                    <span class="detail-label">Priority</span>
                    <span class="detail-value">
                        <span class="badge badge-{{ 'danger' if revision.priority == 'URGENT' else 'warning' if revision.priority == 'HIGH' else 'default' }}">
                            {{ revision.priority }}
                        </span>
                    </span>
                </div>

                <div class="detail-item">
                    <span class="detail-label">Status</span>
                    <span class="detail-value">
                        <span class="badge badge-{{ 'success' if revision.status == 'RESOLVED' else 'secondary' if revision.status == 'CLOSED' else 'primary' if revision.status == 'IN_PROGRESS' else 'default' }}">
                            {{ revision.status.replace('_', ' ') }}
                        </span>
                    </span>
                </div>

                {% if revision.assigned_to %}
                <div class="detail-item">
                    <span class="detail-label">Assigned To</span>
                    <span class="detail-value">{{ revision.assigned_to }}</span>
                </div>
                {% endif %}

                {% if revision.related_order_id %}
                <div class="detail-item">
                    <span class="detail-label">Related TRF</span>
                    <span class="detail-value">
                        <a href="/trfs/{{ revision.related_order_id }}" class="link">
                            View TRF
                        </a>
                    </span>
                </div>
                {% endif %}

                {% if revision.related_shipment_id %}
                <div class="detail-item">
                    <span class="detail-label">Related Shipment</span>
                    <span class="detail-value">
                        <a href="/shipments/{{ revision.related_shipment_id }}" class="link">
                            View Shipment
                        </a>
                    </span>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="mt-md">
    <a href="/support" class="btn btn-secondary">← Back to Tickets</a>
</div>
{% endblock %}