{% extends "adminpanel/base.html" %}
{% block title %}Messages — admin{% endblock %}
{% block heading %}Messages{% endblock %}

{% block content %}
<div class="pane">
  <div class="split">
    <div class="panel">
      <div class="panel-h"><h2>{{ client.full_name|default:"No client selected" }}</h2>
        <span class="mono act">{{ client.company }}</span></div>
      <div class="thread" id="thread">
        {% for m in thread %}
        <div class="msg {% if m.sender.is_staff %}me{% endif %}">
          <div class="mh">{% if m.sender.is_staff %}You{% else %}{{ client.full_name }}{% endif %} · {{ m.created_at|date:"j M Y · H:i" }}</div>
          <p>{{ m.body|linebreaksbr }}</p>
          {% if m.attachment %}<a class="att" href="{{ m.attachment.url }}">{{ m.attachment.name }}</a>{% endif %}
        </div>
        {% empty %}
        <div class="empty"><h3>No messages</h3><p>Nothing has been sent on this account yet.</p></div>
        {% endfor %}
      </div>
      {% if client %}
      <form method="post" enctype="multipart/form-data" class="composer">{% csrf_token %}
        <input name="body" placeholder="Reply to client">
        <button class="btn btn-primary">Send</button>
      </form>
      {% endif %}
    </div>
    <div class="panel">
      <div class="panel-h"><h2>Conversations</h2></div>
      <ul class="tickets">
        {% for c in clients %}
        <li><div><div class="tn"><a href="?client={{ c.pk }}">{{ c.full_name }}</a></div>
          <div class="tm">{{ c.company }}</div></div>
          {% if c == client %}<span class="status s-open">Open</span>{% endif %}</li>
        {% empty %}<li><div class="tn muted">No clients yet.</div></li>{% endfor %}
      </ul>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>var t = document.getElementById('thread'); if (t) t.scrollTop = t.scrollHeight;</script>
{% endblock %}