<!DOCTYPE html>
<html>
    <head>
        <title><%=networkName%> - Login</title>

        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

        <style>
            .login-container {
                max-width: 500px;
                margin: 50px auto;
                padding: 20px;
                box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
            }
        </style>
    </head>

    <body>
        <div class="container login-container">
            <h1 class="text-center"><%=networkName%> Login</h1>
            <form action="/login" method="post" class="mt-4">
                <div class="form-group">
                    <label for="username">Username:</label>
                    <input type="text" id="username" name="username" class="form-control" required>
                </div>

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

                <button type="submit" class="btn btn-primary btn-block">Login</button>
            </form>

            <p class="text-center mt-3">
                Don't have an account? <a href="/register">Register</a>
            </p>
        </div>

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </body>
</html>
