<div class="pw-card fluid">
  <div class="pw-card-header">
    Shoutbox
  </div>

  <div class="shoutbox__shouts" id="shoutlist" hx-get="{% url 'punkweb_bb:shout_list' %}" hx-trigger="load, every 15s"
    hx-on::after-request="shoutboxScrollToBottom(event)">
  </div>

  {% if request.user.is_authenticated %}
  <form
    class="shoutbox__form"
    hx-post="{% url 'punkweb_bb:shout_create' %}"
    hx-target="#shoutlist"
    hx-on::after-request="this.reset(); shoutboxScrollToBottom(event)"
  >
    <input class="pw-input fluid shoutbox__input" autocomplete="off" name="content" type="text"
      placeholder="Type your message here..." />
  </form>
  {% endif %}
</div>