{% if new_messages %}
<h4 id="participants" hx-swap-oob="true">{{ participants|join:" & " }}</h4>
{% endif %}

{% for message in messages %}
  {% if message.t != "rm" %}
  <wa-card
      class="dm-card"
      {% if forloop.last %}
      hx-get="{% url "messages" %}{% querystring id=chat_id offset=next_offset %}"
      hx-trigger="intersect once"
      hx-swap="afterend"
      {% endif %}
  >
    <div class="wa-flank">
      <a href="https://yaoi.chat/admin/users/info/{{ message.u.id }}" target="_blank">
        <wa-avatar
            image="{{ rocket_chat_root_url }}/avatar/{{ message.u.username }}"
            label="{{ message.u.username }}'s avatar"
            shape="rounded"
        ></wa-avatar>
      </a>
      <div class="wa-stack wa-gap-0">
        <div class="wa-split">
          <div class="wa-cluster">
            <span class="wa-heading-m">{{ message.u.name }}</span>
            <span class="wa-caption-m">@{{ message.u.username }}</span>
          </div>
          <div>
            <wa-tooltip for="msg{{ message.id }}">
              <wa-format-date
                  date="{{ message.ts }}"
                  year="numeric"
                  month="numeric"
                  day="numeric"
                  hour="numeric"
                  minute="numeric"
              ></wa-format-date>
            </wa-tooltip>
            <wa-relative-time
                id="msg{{ message.id }}"
                class="wa-caption-xs"
                date="{{ message.ts }}"
            ></wa-relative-time>
          </div>
        </div>
        {% if message.msg %}
          {% if message.hidden %}
            <span style="color: red; text-decoration: line-through">
              {{ message.msg|linebreaks }}
            </span>
            <br /><br />
            <span class="wa-caption-m">
              Deleted
              <wa-format-date
                  date="{{ message.editedAt }}"
                  year="numeric"
                  month="numeric"
                  day="numeric"
                  hour="numeric"
                  minute="numeric"
              ></wa-format-date>
              by @{{ message.editedBy.username }}
            </span>
          {% else %}
            {{ message.msg|linebreaks }}
          {% endif %}
        {% endif %}
        {% if message.attachments %}
          {% for attachment in message.attachments %}
            {% if attachment.image_size %}
              <wa-dialog light-dismiss id="lightbox-{{ message.id }}" style="--width: clamp(32rem, 60rem, 95%)">
                <img src="{{ rocket_chat_root_url }}{{ attachment.image_url }}" style="width: 100%"/>
              </wa-dialog>
              <img id="img-{{ message.id }}" src="{{ rocket_chat_root_url }}{{ attachment.image_url }}" />
              <script>
                if (typeof dialog{{ message.id }} == 'undefined') {
                  const dialog{{ message.id }} = document.querySelector('#lightbox-{{ message.id }}');
                  let openButton{{ message.id }} = document.querySelector('#img-{{ message.id }}');
                  openButton{{ message.id }}.addEventListener('click', () => dialog{{ message.id }}.open = true);
                }
              </script>
            {% endif %}
            {% if attachment.video_size %}
              <video
                controls
                width="100%"
              >
                <source src="{{ rocket_chat_root_url }}{{ attachment.video_url }}" type="{{ attachment.video_type }}">
              </video>
            {% endif %}
          {% endfor %}
        {% endif %}
      </div>
    </div>
    <div class="wa-cluster" style="justify-content: end;">
      {% if not message.hidden %}
        <wa-button
            appearance="plain"
            variant="danger"
            hx-get="{% url "delete_message" %}{% querystring msg_id=message.id room_id=message.rid %}"
        >
          <wa-icon name="trash"></wa-icon>
        </wa-button>
      {% endif %}
      <wa-button
          appearance="plain"
          variant="danger"
          hx-get="{% url "deactivate_user" %}{% querystring user_id=message.u.id %}"
          hx-swap="none"
      >
        <wa-icon name="ban"></wa-icon>
      </wa-button>
    </div>
  </wa-card>
  {% endif %}
{% endfor %}