pollo/pages/templates/dashboard.html

{{define "title"}}
Pollo // Dashboard
{{end}}

{{define "headercontent"}}
Pollo // Dashboard
{{end}}

{{define "head"}}
<link rel="stylesheet" href="/public/css/styles.css" />
{{end}}

{{define "main"}}
<div class="flex flex-col items-center justify-center gap-8">
  <h1 class="flex flex-row flex-wrap text-center justify-center items-center gap-1 text-4xl font-bold">
    Hi, {{.Props.Name}}!
  </h1>
  <!-- Form to create a new room -->
  <form class="flex flex-col gap-2" method="POST" hx-post="/api/room" hx-target="#room-list" hx-swap="outerHTML" hx-on--after-request="this.reset()">
    <input class="input input-bordered input-primary w-full max-w-xs" type="text" name="roomName" placeholder="Room Name" required>
    <button type="submit" class="btn btn-primary">Create Room</button>
  </form>

  <div class="overflow-x-auto">
    <table class="table text-center">
        <thead>
        <tr class="border-white">
            <th>Room Name</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody id="room-list" hx-get="/api/room" hx-trigger="load" hx-swap="outerHTML">
        </tbody>
    </table>
  </div>
</div>
{{end}}

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