{% extends "base.html" %}


{% block content %}
  <div class="wa-grid" style="height: fit-content">
    <wa-card id="dms">
      <wa-resize-observer>
        <div>
          <table hx-get="{% url "dm-table" %}" hx-trigger="load, every 30s" hx-swap="outerHTML">
            <thead>
              <tr>
                <th>Participants</th>
                <th>Updated</th>
                <th>Messages</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td colspan="4" style="text-align: center">Waiting for data...</td>
              </tr>
            </tbody>
          </table>
          <div id="pagination">
          </div>
        </div>
      </wa-resize-observer>
    </wa-card>
    <div style="height: 100%;">
      <wa-card with-header style="height: 100%; overflow-y: scroll" id="messagePanel">
        <div slot="header"><h4 id="participants">Select a DM to view</h4></div>
        <div class="wa-stack" id="messages" style="display: flex; flex-direction: column-reverse; overflow-y: scroll"></div>
      </wa-card>
    </div>
  </div>

  <script>
  const dmPanel = document.querySelector('#dms');
  const observer = dmPanel.querySelector('wa-resize-observer');
  const messagePanel = document.querySelector('#messages')
  observer.addEventListener('wa-resize', event => {
      console.log(event.detail.entries[0])
      messagePanel.style.height = event.detail.entries[0].borderBoxSize[0].blockSize + "px";
  })
  </script>

{% endblock %}