{% extends "client/base.html" %}
{% block title %}Messages — client portal{% endblock %}
{% block heading %}Messages{% endblock %}

{% block content %}
<div class="pane">
  <div class="panel">
    <div class="panel-h"><h2>Teniola Ayodele</h2><span class="status s-live act">Usually replies in a few hours</span></div>
    <div class="thread" id="thread">
      {% for m in thread %}
      <div class="msg {% if m.sender == user %}me{% endif %}">
        <div class="mh">{% if m.sender == user %}You{% else %}{{ m.sender.get_full_name|default:"Teniola" }}{% 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 yet</h3><p>Send the first one — anything about your project belongs here so it stays on the record.</p></div>
      {% endfor %}
    </div>
    <form method="post" enctype="multipart/form-data" class="composer">{% csrf_token %}
      <select name="project" style="max-width:200px">
        <option value="">General</option>
        {% for p in projects %}<option value="{{ p.id }}">{{ p.name }}</option>{% endfor %}
      </select>
      <input name="body" placeholder="Write a message">
      <button class="btn btn-primary">Send</button>
    </form>
  </div>
</div>
{% endblock %}

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