{% extends "base.html" %}
{% block content %}

  <div
    style="display: none;"
    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
    hx-post="{% url 'threshold_irc_network_info' net %}"
    hx-trigger="load, every 5s"
    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 5s"
    hx-target="#relays"
    hx-swap="outerHTML">
  </div>

  <div
    style="display: none;"
    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
    hx-post="{% url 'threshold_irc_network_channels' net %}"
    hx-trigger="load, every 5s"
    hx-target="#channels"
    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>

  <div class="columns">
    <div class="column">
      <div class="box">
        <div id="channels">
        </div>
      </div>
    </div>
    <div class="column">
      <div class="box">
        <div id="alerts">
        </div>
      </div>
    </div>
  </div>
  <div class="columns">
    <div class="column is-half">
      <div class="box">
        <form method="POST">
          <div class="field">
            <div class="field-body">
              <div class="field">
                <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>
            </div>
          </div>
          <div class="field">
            <div class="control">
              <button
                hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                class="button is-primary 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>
{% endblock %}
