{% extends "base.html" %}
{% block content %}
  <script>
    document.addEventListener("restore-relay-scroll", function(event) {
      var modalContent = document.getElementsByClassName("relay_table_container")[0];
      var maxScroll = modalContent.scrollHeight - modalContent.offsetHeight;
      var scrollpos = localStorage.getItem('scrollpos_relays_table');
      if (scrollpos == 'BOTTOM') {
        modalContent.scrollTop = maxScroll;
      } else if (scrollpos) {
        modalContent.scrollTop = scrollpos;
      };
    });

    document.addEventListener("htmx:beforeSwap", function(event) {
      var modalContent = document.getElementsByClassName("relay_table_container")[0];
      var scrollpos = modalContent.scrollTop;
      if(modalContent.scrollTop === (modalContent.scrollHeight - modalContent.offsetHeight)) {
        localStorage.setItem('scrollpos_relays_table', 'BOTTOM');
      } else {
        localStorage.setItem('scrollpos_relays_table', scrollpos);
      }

    });
  </script>
  <div
    style="display: none;"
    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
    hx-get="{% url 'threshold_irc_network_info' net %}"
    hx-trigger="load, every 60s"
    hx-target="#info"
    hx-swap="outerHTML">
  </div>

  <div
    style="display: none;"
    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
    hx-get="{% url 'threshold_irc_network_relays' net %}"
    hx-trigger="load, every 60s"
    hx-target="#relays"
    {# hx-swap="innerHTML" #}
  >
  </div>

  <div
    style="display: none;"
    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
    hx-get="{% url 'threshold_irc_network_channels' net %}"
    hx-trigger="load, every 60s"
    hx-target="#channels"
    hx-swap="outerHTML">
  </div>

  <div
    style="display: none;"
    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
    hx-get="{% url 'threshold_irc_network_actions' net %}"
    hx-trigger="load"
    hx-target="#actions"
    hx-swap="outerHTML">
  </div>


  <div
    style="display: none;"
    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
    hx-get="{% url 'threshold_irc_network_list' net %}"
    hx-trigger="load"
    hx-target="#stats"
    hx-swap="outerHTML">
  </div>

  <div class="columns">
    <div class="column">
      <div class="box">
        <div id="info">
        </div>
      </div>
    </div>
    <!-- <div class="column">
      <div class="box">
        <div id="relays">
        </div>
      </div>
    </div> -->
    <div class="column">
      <div class="box">
        <div>
          <div class="content" style="max-height: 30em; overflow: auto;">
            <div class="table-container relay_table_container" id="relays">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="columns">
    <div class="column">
      <div class="box">
        <div id="channels">
        </div>
      </div>
    </div>
    <div class="column">
      <div class="box">
        <div id="stats">
          Stats here
        </div>
      </div>
    </div>
  </div>
  <div class="columns">
    <div class="column">
      {# This is the only thing included without HTMX because it isn't interactive #}
      {# It needs no dynamic message element because it posts messages to chanels #}
      <div class="box">
        <form method="POST">
          <div class="field has-addons">
            <div class="control is-expanded has-icons-left">
              <input id="query" name="channel" class="input" type="text" placeholder="channel">
              <span class="icon is-small is-left">
                <i class="fa-solid fa-hashtag"></i>
              </span>
            </div>
            <div class="control">
              <button
                hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                class="button is-info is-fullwidth"
                hx-put="{% url 'threshold_irc_network_channel' net %}"
                hx-trigger="click"
                hx-target="#channels"
                hx-swap="outerHTML">
                Join
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="column">
      <div class="box">
        <div id="actions">
        </div>
      </div>
    </div>
  </div>
  <div id="modals-here">
  </div>
{% endblock %}