109 lines
4.4 KiB
HTML
109 lines
4.4 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Ticket #{{ ticket.id }} - Support Center{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="row">
|
|
<div class="col-lg-8">
|
|
<div class="mb-4">
|
|
<a href="{% url 'dashboard' %}" class="text-decoration-none text-muted small">← Back to Dashboard</a>
|
|
</div>
|
|
|
|
<!-- Ticket Header -->
|
|
<div class="card p-4 p-md-5 mb-4">
|
|
<div class="d-flex justify-content-between align-items-start mb-4">
|
|
<div>
|
|
<span class="status-badge status-{{ ticket.status }} mb-2 d-inline-block">
|
|
{{ ticket.get_status_display }}
|
|
</span>
|
|
<h1 class="h2">{{ ticket.title }}</h1>
|
|
<p class="text-muted small">
|
|
Submitted by <strong>{{ ticket.created_by.username }}</strong> •
|
|
{{ ticket.created_at|date:"F j, Y, g:i a" }}
|
|
</p>
|
|
</div>
|
|
<div class="text-end">
|
|
<span class="badge bg-light text-dark fw-normal border">#{{ ticket.id }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-4 opacity-10">
|
|
|
|
<div class="ticket-description">
|
|
<p class="lead" style="white-space: pre-wrap;">{{ ticket.description }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Discussion Thread -->
|
|
<h4 class="mb-4">Discussion</h4>
|
|
<div class="discussion-container mb-5">
|
|
{% for comment in ticket.comments.all %}
|
|
<div class="thread-comment {% if comment.author.is_staff %}agent-reply{% endif %}">
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<span class="fw-bold small {% if comment.author.is_staff %}text-primary{% endif %}">
|
|
{{ comment.author.username }}
|
|
{% if comment.author.is_staff %}(Agent){% endif %}
|
|
</span>
|
|
<span class="text-muted small">{{ comment.created_at|timesince }} ago</span>
|
|
</div>
|
|
<p class="mb-0">{{ comment.text }}</p>
|
|
</div>
|
|
{% empty %}
|
|
<p class="text-muted italic small py-4 text-center border rounded">No replies yet.</p>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Reply Form -->
|
|
<div class="card p-4">
|
|
<h5 class="mb-3">Add a Reply</h5>
|
|
<form method="post">
|
|
{% csrf_token %}
|
|
<div class="mb-3">
|
|
{{ comment_form.text }}
|
|
</div>
|
|
<div class="text-end">
|
|
<button type="submit" class="btn btn-primary">Post Reply</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar Info -->
|
|
<div class="col-lg-4 mt-4 mt-lg-0">
|
|
<div class="card p-4 sticky-top" style="top: 100px;">
|
|
<h5 class="mb-4">Ticket Details</h5>
|
|
|
|
<div class="mb-3">
|
|
<label class="text-muted small d-block mb-1">Priority</label>
|
|
<span class="priority-{{ ticket.priority }} fw-semibold">{{ ticket.get_priority_display }}</span>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="text-muted small d-block mb-1">Category</label>
|
|
<span class="fw-semibold">{{ ticket.get_category_display }}</span>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="text-muted small d-block mb-1">Assigned To</label>
|
|
<span class="fw-semibold">{{ ticket.assigned_to.username|default:"Unassigned" }}</span>
|
|
</div>
|
|
|
|
{% if user.is_staff %}
|
|
<hr class="my-4">
|
|
<h5 class="mb-3">Manage Status</h5>
|
|
<form method="post">
|
|
{% csrf_token %}
|
|
<div class="mb-3">
|
|
<select name="status" class="form-select form-select-sm">
|
|
{% for code, name in ticket.STATUS_CHOICES %}
|
|
<option value="{{ code }}" {% if ticket.status == code %}selected{% endif %}>{{ name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="btn btn-outline-primary btn-sm w-100">Update Status</button>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|