{% extends "base.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% load i18n %}

{% block content %}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h2 class="h4 mb-0">Ticket #{{ ticket.id }}: {{ ticket.subject }}</h2>
        <div>
        {% if ticket.status != 'resolved' %}
            <a href="{% url 'ticket_update' ticket.id %}" class="btn btn-sm btn-outline-success">
                Update Ticket Status
            </a>
        {% endif %}
        <a href="{% url 'ticket_list' %}" class="btn btn-sm btn-outline-secondary">
            Back to List
        </a>
        </div>
    </div>
    <div class="card-body">
        <div class="row mb-4">
            <div class="col-md-6">
                <p><strong>Status:</strong>
                    <span class="badge
                        {% if ticket.status == 'open' %}bg-primary
                        {% elif ticket.status == 'in_progress' %}bg-info
                        {% elif ticket.status == 'resolved' %}bg-success
                        {% else %}bg-secondary{% endif %}">
                        {{ ticket.get_status_display }}
                    </span>
                </p>
                <p><strong>Priority:</strong>
                    <span class="badge
                        {% if ticket.priority == 'low' %}bg-success
                        {% elif ticket.priority == 'medium' %}bg-warning
                        {% elif ticket.priority == 'high' %}bg-danger
                        {% else %}bg-dark{% endif %}">
                        {{ ticket.get_priority_display }}
                    </span>
                </p>
            </div>
            <div class="col-md-6">
                <p><strong>Created:</strong> {{ ticket.created_at|date:"M d, Y H:i" }}</p>
                <p><strong>Last Updated:</strong> {{ ticket.updated_at|date:"M d, Y H:i" }}</p>
            </div>
        </div>

        <div class="mb-4">
            <h3 class="h5">Description</h3>
            <div class="p-3 bg-light rounded">
                {{ ticket.description|linebreaks }}
            </div>
        </div>

        <!-- You can add comments/replies section here later -->
    </div>
</div>
{% endblock %}