{% extends "adminpanel/base.html" %}
{% load money %}
{% block title %}{{ ticket.reference }} — admin{% endblock %}
{% block heading %}{{ ticket.reference }}{% endblock %}

{% block content %}
<div class="pane" style="max-width:820px">
  <a class="back" href="{% url 'admin_tickets' %}">&larr; All tickets</a>
  <div class="panel">
    <div class="panel-h"><h2>{{ ticket.subject }}</h2>
      <span class="status {{ ticket.get_status_display|status_class }} act">{{ ticket.get_status_display }}</span></div>
    <div class="panel-b">
      <dl class="dl" style="margin-bottom:18px">
        <dt>Client</dt><dd><a href="{% url 'admin_client' ticket.client.pk %}" style="color:var(--gold)">{{ ticket.client }}</a></dd>
        <dt>Priority</dt><dd>{{ ticket.get_priority_display }}</dd>
        <dt>Project</dt><dd>{{ ticket.project.name|default:"—" }}</dd>
        <dt>Opened</dt><dd>{{ ticket.created_at|date:"j M Y · H:i" }}</dd>
      </dl>
      <div class="thread" style="max-height:none;padding:0">
        <div class="msg"><div class="mh">{{ ticket.client }} · {{ ticket.created_at|date:"j M Y · H:i" }}</div>
          <p>{{ ticket.message|linebreaksbr }}</p>
          {% if ticket.attachment %}<a class="att" href="{{ ticket.attachment.url }}">{{ ticket.attachment.name }}</a>{% endif %}</div>
        {% for r in ticket.replies.all %}
        <div class="msg {% if r.author.is_staff %}me{% endif %}">
          <div class="mh">{% if r.author.is_staff %}You{% else %}{{ ticket.client }}{% endif %} · {{ r.created_at|date:"j M Y · H:i" }}</div>
          <p>{{ r.body|linebreaksbr }}</p></div>
        {% endfor %}
      </div>
      <form method="post" style="margin-top:20px">{% csrf_token %}
        <div class="field"><label for="body">Reply to client</label>
          <textarea id="body" name="body" style="min-height:110px" placeholder="Your reply is emailed to the client and shown in their portal."></textarea></div>
        <div style="display:flex;gap:10px;flex-wrap:wrap">
          <button class="btn btn-primary">Send reply</button>
        </div>
      </form>
      <form method="post" style="margin-top:12px;display:flex;gap:10px;flex-wrap:wrap">{% csrf_token %}
        <button class="btn" name="status" value="pending">Mark pending</button>
        <button class="btn" name="status" value="resolved">Mark resolved</button>
        <button class="btn" name="status" value="open">Reopen</button>
      </form>
    </div>
  </div>
</div>
{% endblock %}