{{define "linklogin"}}
<div id="logindiv">
  You're about to join room#{{.}}; but first!
  <form class="space-y-6" hx-post="/login" hx-target="#ancestor">
      <label For="username" class="block text-sm font-medium leading-6 text-white-900">tell us your username</label>
      <div class="mt-2">
        <input id="username" name="username" hx-target="#login_notice" hx-swap="outerHTML" hx-post="/check/name" hx-trigger="input changed delay:400ms" autocomplete="username" required class="block w-full rounded-md border-0 bg-white py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 text-center"/>
        <input type="hidden" name="room_id" value={{.}}>
      </div>
  <div id="login_notice">this name looks available</div>
    <div>
      <button type="submit" class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Sign in</button>
    </div>
  </form>
</div>
{{end}}