<form action="" method="post" class="container py-4">
    <h2 class="text-center mb-4">Create an Account</h2>
    <fieldset>
        <!-- Username -->
        <div class="mb-3 row">
            <label for="username" class="col-lg-6 col-form-label text-end">Username:</label>
            <div class="col-lg-2">
                <input type="text" class="form-control" name="username" id="username" required>
            </div>
        </div>

        <!-- Email -->
        <div class="mb-3 row">
            <label for="email" class="col-lg-6 col-form-label text-end">Email:</label>
            <div class="col-lg-2">
                <input type="email" class="form-control" name="email" id="email" required>
            </div>
        </div>

        <!-- Re-enter Email -->
        <div class="mb-3 row">
            <label for="email2" class="col-lg-6 col-form-label text-end">Re-Enter Email:</label>
            <div class="col-lg-2">
                <input type="email" class="form-control" name="email2" id="email2" required>
            </div>
        </div>

        <!-- Password -->
        <div class="mb-3 row">
            <label for="password" class="col-lg-6 col-form-label text-end">Password:</label>
            <div class="col-lg-2">
                <input type="password" class="form-control" name="password" id="password" required>
            </div>
        </div>

        <!-- Re-enter Password -->
        <div class="mb-3 row">
            <label for="password2" class="col-lg-6 col-form-label text-end">Re-Enter Password:</label>
            <div class="col-lg-2">
                <input type="password" class="form-control" name="password2" id="password2" required>
            </div>
        </div>

        <!-- Terms of Service -->
        <div class="mb-3 text-center">
            <div class="">
                <input type="checkbox" class="form-check-input" name="terms" id="terms" value="1" required>
                <label for="terms" class="form-check-label">
                    I have read and agree to the <a href="/home/terms" class="text-primary text-decoration-none">Terms of Service</a>
                </label>
            </div>
            <div class="terms mt-2 mx-auto">
                {TERMS}
            </div>
        </div>

        <!-- Hidden Token -->
        <input type="hidden" name="token" value="{TOKEN}">

        <!-- Submit Button -->
        <div class="text-center">
            <button type="submit" name="submit" value="submit" class="btn btn-primary btn-lg">Sign up</button>
        </div>
    </fieldset>
</form>
