<div class="dropdown nav-item mx-2">
    <a
        href="#"
        class="d-flex align-items-center text-white text-decoration-none dropdown-toggle"
        id="userDropdown"
        data-bs-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false">
        <i class="fa fa-user"></i>
    </a>
    <div class="dropdown-menu dropdown-menu-dark dropdown-menu-end text-small shadow" aria-labelledby="userDropdown" style="min-width: 300px;">
        <form method="post" action="{ROOT_URL}home/login" id="signin" class="px-4 py-3">
            <input type="hidden" name="rurl" id="rurl" value="{CURRENT_URL}">
            <input type="hidden" name="token" value="{TOKEN}">

            <!-- Username -->
            <div class="form-group mb-3">
                <input id="username"
                    type="text"
                    class="form-control"
                    name="username"
                    placeholder="Username">
            </div>

            <!-- Password -->
            <div class="form-group mb-3">
                <input id="password"
                    type="password"
                    class="form-control"
                    name="password"
                    placeholder="Password">
            </div>

            <!-- Remember Me -->
            <div class="form-check form-switch mb-3">
                <input class="form-check-input" type="checkbox" role="switch" name="remember" id="remember" value="true">
                <label class="form-check-label" for="remember">Stay Logged In</label>
            </div>

            <!-- Submit and Register Buttons -->
            <div class="d-flex gap-1">
                <button name="submit" value="submit" type="submit" class="btn btn-primary flex-fill">
                    Sign in
                </button>
                <a href="{ROOT_URL}register" class="btn btn-outline-primary flex-fill">
                    Create new
                </a>
            </div>
        </form>
    </div>
</div>
