{% include "head.html" %}
<div class="content h-full">
  <h1>Chat</h1>
  <div class="section h-[90vh]">
    <div class="m-2 h-full flex flex-col">
      <div id="messagelist" class="flex-1 grow overflow-scroll">
        <template id="message_template">
          <div class="p-2 border-l-2 border-sky-100 flex gap-4">
            <div class="msg_timestamp flex-none font-thin text-sm text-sky-400">timestamp</div>
            <div class="msg_from flex-none font-bold text-sky-900" onclick="call_clicked(this)">CALL-SSID</div>
            <div class="msg_comment flex-1 text-sky-800">COMMENT</div>
          </div>
        </template>
        {% for packet in packets %}
        {% match packet.comment %}{% when Some with (comment) %}
        <div class="p-2 border-l-2 border-sky-100 flex gap-4">
          <div class="flex-none font-thin text-sm text-sky-400">{{ packet.received_at_iso()|e }}</div>
          <div class="flex-none font-bold text-sky-900" onclick="call_clicked(this)">{{ packet.from_callsign|e }}-{{ packet.from_ssid|e }}</div>
          <div class="flex-1 text-sky-800">{{ comment|e }}</div>
        </div>
        {% when None %}{% endmatch %}
        {% endfor %}
      </div>
      <div class="m-2 flex-none grow-0 h-16">
        <div class="flex gap-2">
          <div class="flex-none">
            <label for="dest">Message for:</label><input class="textinput" type="text" id="dest" value="" placeholder="callsign-ssid">
          </div>
          <div class="flex-1">
            <input class="textinput w-full" type="text" id="whisker_comment" value="" placeholder="Type your message here">
          </div>
          <div class="flex-none">
            <button class="btn" type="button" onclick="btn_chat_send_message()">Send</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% include "foot.html" %}
{# vi:set et sw=2 ts=2: #}