<form
  hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
  hx-post="{% url 'threshold_irc_network_edit' net %}"
  hx-target="this"
  hx-swap="outerHTML">
  <div class="table-container">
    <table class="table is-fullwidth is-hoverable">
      <thead>
        <th>attribute</th>
        <th>value</th>
      </thead>
      <tbody>
        {% for key, item in network.items %}
          <tr>
            <th>{{ key }}</th>
            <td>
              <div class="field">
                {% if key == 'auth' %}
                  <div class="select">
                    <select name="{{ key }}">
                      {% if item == 'sasl' %}
                        <option selected>sasl</option>
                      {% else %}
                        <option>sasl</option>
                      {% endif %}

                      {% if item == 'ns' %}
                        <option selected>ns</option>
                      {% else %}
                        <option>ns</option>
                      {% endif %}

                      {% if item == 'none' %}
                        <option selected>none</option>
                      {% else %}
                        <option>none</option>
                      {% endif %}
                    </select>
                  </div>
                {% elif key == 'security' %}
                  <div class="select">
                    <select name="{{ key }}">
                      {% if item == 'ssl' %}
                        <option selected>ssl</option>
                      {% else %}
                        <option>ssl</option>
                      {% endif %}

                      {% if item == 'plain' %}
                        <option selected>plain</option>
                      {% else %}
                        <option>plain</option>
                      {% endif %}
                    </select>
                  </div>
                {% else %}
                  <input class="input" type="text" name="{{ key }}" value="{{ item }}">
                {% endif %}
              </div>
            </td>
          </tr>
        {% endfor %}

      </tbody>
    </table>
    <button class="button is-primary">Submit</button>
    <button
      class="button is-primary"
      hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
      hx-get="{% url 'threshold_irc_network_info' net %}">
      Cancel
    </button>
  </div>
</form>
