{% extends "client/base.html" %}
{% load money %}
{% block title %}Support — client portal{% endblock %}
{% block heading %}Support tickets{% endblock %}

{% block content %}
<div class="pane">
  <div class="split">
    <div class="panel">
      <div class="panel-h"><h2>Your tickets</h2><span class="mono act">{{ tickets|length }} total</span></div>
      <ul class="tickets">
        {% for t in tickets %}
        <li>
          <div><div class="tn"><a href="{% url 'client_ticket' t.reference %}">{{ t.subject }}</a></div>
            <div class="tm">{{ t.reference }} · {{ t.created_at|date:"j M Y" }} · {{ t.replies.count }} repl{{ t.replies.count|pluralize:"y,ies" }}</div></div>
          <span class="status">{{ t.get_priority_display }}</span>
          <span class="status {{ t.get_status_display|status_class }}">{{ t.get_status_display }}</span>
        </li>
        {% empty %}<li><div class="tn muted">No tickets yet. Raise one on the right when something needs fixing.</div></li>{% endfor %}
      </ul>
    </div>

    <div class="panel">
      <div class="panel-h"><h2>New ticket</h2></div>
      <div class="panel-b">
        <form method="post" enctype="multipart/form-data" novalidate>{% csrf_token %}
          <div class="field"><label for="subject">Subject</label>
            <input id="subject" name="subject" value="{{ values.subject|default:'' }}" placeholder="What is wrong?">
            {% with msg=errors.subject %}{% include "partials/error.html" %}{% endwith %}</div>
          <div class="field"><label for="project">Related to</label>
            <select id="project" name="project">
              <option value="">Something else</option>
              {% for p in projects %}<option value="{{ p.pk }}">{{ p.name }}</option>{% endfor %}
            </select></div>
          <div class="field"><label for="priority">Priority</label>
            <select id="priority" name="priority">
              {% for value, label in priorities %}<option value="{{ value }}" {% if value == 'normal' %}selected{% endif %}>{{ label }}</option>{% endfor %}
            </select></div>
          <div class="field"><label for="message">Message</label>
            <textarea id="message" name="message" placeholder="What happened, what you expected, and when it started.">{{ values.message|default:'' }}</textarea>
            {% with msg=errors.message %}{% include "partials/error.html" %}{% endwith %}</div>
          <div class="field"><label for="attachment">Attachment</label>
            <input id="attachment" name="attachment" type="file"></div>
          <button class="btn btn-primary btn-block">Create ticket</button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}