{% load i18n %}

<div
  {% if websocket_config.tag_id %}id="{{ websocket_config.tag_id }}"{% endif %}
  data-insight-websocket
  data-insight-stream-mode="htmx-ws-html"
  hx-ext="ws"
  ws-connect="{{ websocket_config.request_url }}"
>
  <div
    {% if websocket_config.tag_id %}id="{{ websocket_config.tag_id }}-output"{% endif %}
    data-insight-websocket-output
    class="px-4 py-2 mt-4 bg-insight-surface rounded-insight-surface shadow-insight-surface"
    role="log"
    aria-live="polite"
    aria-atomic="false"
  >
    {% if websocket_config.initial_content %}
      {{ websocket_config.initial_content|safe }}
    {% else %}
      <p class="text-insight-body">{% trans "Wait for messages..." %}</p>
    {% endif %}
  </div>
  <span class="block mt-4 text-sm text-insight-headline">
    {% trans "Status:" %}
    <span
      {% if websocket_config.tag_id %}id="{{ websocket_config.tag_id }}-status"{% endif %}
      data-insight-websocket-status
      role="status"
      aria-live="polite"
    >
      <b>{% trans "Establishing connection..." %}</b>
    </span>
  </span>
  <span class="block mt-2 text-xs text-insight-body">
    {% trans "URL:" %} {{ websocket_config.request_url }}
  </span>
  <span class="block text-xs text-insight-body">
    {% trans "Mode: HTMX WebSocket Extension (expects HTML)" %}
  </span>
</div>