{{ define "loginSection" }}
        <form
          id="loginForm"
          class="grid grid-cols-2 place-content-center border border-black rounded p-4 gap-6"
        >
          <div id="roomInput" class="flex flex-col gap-4">
            <p>Please specify room</p>
            <input
              id="roomName"
              type="text"
              name="roomName"
              value=""
              placeholder="room name!!!"
              hx-trigger="keyup changed delay:500ms"
              hx-post="/login/room-name-check"
              hx-target="#formButton"
              hx-swap="outerHTML"
              class="invalid:bg-red-700"
            />
            <input
              id="roomPassword"
              type="password"
              name="roomPassword"
              value=""
              placeholder="room password"
            />
          </div>
          <div id="personInput" class="flex flex-col gap-4">
            <p>And input your personal</p>
            <input
              id="personalName"
              type="text"
              name="personalName"
              value=""
              placeholder="personal name"
              class="invalid:bg-red-700"
            />
            <input
              id="personalPassword"
              type="password"
              name="personalPassword"
              value=""
              placeholder="personal password"
            />
          </div>
          {{ block "formButton" .IsRoomExisting }} {{ if not . }}
          <button
            id="formButton"
            class="col-span-full"
            hx-post="/login/create"
            hx-validate="true"
          >
            Create Room
          </button>
          {{ else }}
          <button
            id="formButton"
            class="col-span-full"
            hx-post="/login/join"
            hx-validate="true"
          >
            Join Room
          </button>
          {{ end }} {{ end }}
        </form>
        <script>
          window.addEventListener("DOMContentLoaded", (event) => {
            document.getElementById("loginForm").reset();
          });

          const requiredInputFunc = function (event) {
            // If the input is empty...
            if (this.value.trim() === "") {
              // ...set a custom validity message
              console.log("empty name");
              this.setCustomValidity("Please fill out this field.");
              this.checkValidity();
            } else {
              // If not empty, clear any custom validity message
              console.log("other");
              this.setCustomValidity("");
            }
          };

          // Find the input element
          const personalNameInput = document.getElementById("personalName");
          const roomNameInput = document.getElementById("roomName");

          // Listen for the 'htmx:validation:validate' event on the input element
          personalNameInput.addEventListener(
            "htmx:validation:validate",
            requiredInputFunc,
          );
          roomNameInput.addEventListener(
            "htmx:validation:validate",
            requiredInputFunc,
          );

          // You can also listen for the 'input' event to clear the validation message as the user types
          personalNameInput.addEventListener("input", function (event) {
            // Always clear the custom validity message when the user types
            this.setCustomValidity("");
          });
          roomNameInput.addEventListener("input", function (event) {
            // Always clear the custom validity message when the user types
            this.setCustomValidity("");
          });
        </script>
      {{ end }}