{% extends 'backoffice/base.html' %}

{% block title %}Demo WebSocket{% endblock %}

{% block extra_js %}
  <script src="https://unpkg.com/htmx-ext-ws@2.0.1/ws.js"></script>
{% endblock %}

{% block main %}
  <h1 class="text-2xl font-semibold mb-4">Demo WebSocket</h1>
  <p class="mb-4 opacity-70">
    Verifica el cableado de Django Channels + htmx: el formulario envía el mensaje por WebSocket y
    <code>EchoConsumer</code> lo devuelve como HTML que se añade al registro de abajo.
  </p>

  <div hx-ext="ws" ws-connect="/ws/backoffice/echo/" class="max-w-md">
    <form ws-send class="flex gap-2 mb-4">
      <input type="text" name="message" class="input input-bordered w-full" placeholder="Escribe un mensaje" autocomplete="off">
      <button class="btn btn-primary">Enviar</button>
    </form>
  </div>

  <div id="ws-demo-log" class="flex flex-col gap-1 max-w-md"></div>
{% endblock %}