{{define "title"}}Sign up{{end}}

{{define "main"}}
    <div class="container">
      <h1>Register</h1>

      <form hx-post="/api/signup" hx-target="#error-container">
        <div class="form-group">
          <div
            id="error-container"
            style="color: red; margin-bottom: 10px"
          ></div>
          <label for="username">Username:</label>
          <input
            type="text"
            id="username"
            name="username"
            required
            minlength="3"
          />
        </div>

        <div class="form-group">
          <label for="password">Password:</label>
          <input
            type="password"
            id="password"
            name="password"
            required
            minlength="6"
          />
        </div>


        <div class="form-group">
          <label for="email">Email:</label>
          <input
            type="text"
            id="email"
            name="email"
            required
          />
        </div>

        <button type="submit" class="btn">Register</button>
      </form>

      <p style="text-align: center; margin-top: 20px">
        Already have an account? <a href="/login">Login here</a>
      </p>
    </div>
{{end}}