{% load index %}
{% load static %}
{% load nsep %}

<script src="{% static 'modal.js' %}"></script>
<div id="modal" class="modal is-active is-clipped">
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="box">
      <h4 class="subtitle is-4">Edit aliases</h4>
      <form
        hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
        hx-post="{% url 'threshold_irc_aliases_edit' %}"
        hx-target="#aliases"
        hx-swap="outerHTML">
        <div class="content" style="max-height: 30em; overflow: auto;">
          <div class="table-container">
            <table class="table is-fullwidth is-hoverable">
              <thead>
                <th>num</th>
                <th>nick</th>
                <th>realname</th>
                <th>emails</th>
              </thead>
              <tbody>
                {% for alias in aliases %}
                  <tr>
                    <td>
                      {{ alias.num }}
                    </td>
                    <td>
                      <div class="field">
                        <input class="input" type="text" name="{{ alias.num }}|nick" value="{{ alias.nick }}">
                      </div>
                    </td>
                    <td>
                      <div class="field">
                        <input class="input" type="text" name="{{ alias.num }}|realname" value="{{ alias.realname }}">
                      </div>
                    </td>
                    <td>
                      <div class="field">
                        <textarea class="textarea" name="{{ alias.num }}|emails">{{ alias.emails|nsep }}</textarea>
                      </div>
                    </td>
                  </tr>
                {% endfor %}

              </tbody>
            </table>

          </div>
        </div>
        <button
          type="button"
          class="button is-light modal-close-button">
          Cancel
        </button>
        <button type="submit" class="button is-info modal-close-button">Submit</button>
        <script>activateButtons();</script>
      </form>

    </div>
    <button class="modal-close is-large" aria-label="close"></button>
  </div>
</div>