{% load joinsep %}

<div id="aliases">
  {% if message is not None %}
    <div class="notification is-{{ class }}" hx-ext="remove-me" remove-me="3s">
      {{ message }}
    </div>
  {% endif %}
  {% if aliases is not None %}
    <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>
                  {{ alias.nick }}
                </td>
                <td>
                  {{ alias.realname }}
                </td>
                <td>
                  {{ alias.emails|joinsep:', ' }}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  {% endif %}
</div>