{{define "title"}}
Atridad Lahiji // Tools // SSE Demo
{{end}}

{{define "navcontent"}}
Atridad Lahiji // Tools // SSE Demo
{{end}}

{{define "description"}}
A demo of my SSE implementation.
{{end}}

{{define "head"}}
{{end}}

{{define "main"}}
<div class="tool-page">
  <h1>Server Sent Events Demo</h1>

  <p>This page demonstrates the use of the <a href="https://htmx.org/extensions/sse/" class="tool-link">HTMX SSE
      Extension</a> to receive Server Sent Events on the "default" channel.</p>
  <p>Any events received on the "default" channel will appear below:</p>
  <div hx-ext="sse" sse-connect="/api/sse" sse-swap="message" class="sse-message-container">
    Waiting for SSE Message...
  </div>

  <p>Here you can send messages on the default channel:</p>
  <form hx-post="/api/tools/sendsse" hx-trigger="submit" hx-swap="none" class="form-group">
    <div class="form-group">
      <label for="message">Message</label>
      <input type="text" id="message" name="message" value="Hello world!" placeholder="Enter your message here" />
    </div>

    <button type="submit" class="tool-button">Send Event</button>
  </form>
</div>
{{end}}

{{define "foot"}}
<script src="/public/js/htmx.sse.js"></script>
{{end}}
