@()

@main("Login") {
    <div class="login-box">
        <div class="card login-card p-4">
            <div class="card-body">
                <h3 class="text-center mb-4">Login</h3>

                <form action="@routes.UserController.login_Post()" method="post">
                    <div class="mb-3">
                        <label for="username" class="form-label">Username</label>
                        <input type="text" class="form-control" id="username" name="username" placeholder="Enter Username" required>
                    </div>

                    <div class="mb-3">
                        <label for="password" class="form-label">Password</label>
                        <input type="password" class="form-control" id="password" name="password" placeholder="Enter password" required>
                    </div>

                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <a href="#" class="text-decoration-none">Forgot password?</a>
                    </div>

                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary">Login</button>
                    </div>
                </form>

                <p class="text-center mt-3">
                    Don’t have an account?
                    <a href="#" class="text-decoration-none">Sign up</a>
                </p>
            </div>
        </div>
    </div>
    <script src="@routes.Assets.versioned("/javascripts/particles.js")"></script>
    <div id="particles-js" style="background-color: rgb(182, 25, 36);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50% 50%;"></div>
}