{% load render styled_username can_delete %}

{% for shout in shouts %}
<div class="shoutbox__shout">
  <div class="shoutbox__shout__content">
    <time datetime="{{shout.created_at|date:'c'}}">{{shout.created_at | date:'g:i A'}}</time>
    <span><a href="{% url 'punkweb_bb:profile' shout.user.id %}">{{shout.user|styled_username}}</a>: </span>
    <span>{{ shout.content|render_shout }}</span>
  </div>
  {% if shout|can_delete:request.user %}
  <div class="shoutbox__shout__actions">
    <button
      class="pw-icon-button default danger sm"
      title="Delete"
      hx-get="{% url 'punkweb_bb:shout_delete' shout.id %}"
      hx-target="#modal-portal"
    >
      <span class="material-symbols-outlined">delete</span>
    </button>
  </div>
  {% endif %}
</div>
{% endfor %}