{% if feedback %}
<div class="table-container">
  <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
    <tr>
      <th style="width:10%">User ID</th>
      <th style="width:20%">Username</th>
      <th>Body</th>
      <th style="width:10%">Delete</th>
    </tr>
    {% for message in feedback %}
    <tr>
      <td>{{ message.user-id }}</td>
      <td>{{ message.user.name }}</td>
      <td>{{ message.body }}</td>
      <td>
        <button class="button has-text-danger"
                hx-confirm="Delete message id {{message.id}}?"
                hx-delete="/contact/{{ message.id }}/delete"
                hx-include="[name='admin-form']"
                hx-swap="outerHTML swap:1s"
                hx-target="closest tr"
                hx-trigger="click">Delete</button>
      </td>
    </tr>
    {% endfor %}
  </table>
</div>
{% else %}
<div class="message is-info">
  <div class="message-header">
    No Messages
  </div>
  <div class="message-body">
    Squeaky clean!
  </div>
</div>
{% endif %}