<div class="login-wrapper">
    <div class="login-container">
        <div class="login-header text-center">
            <h3>Login</h3>
        </div>
        <% if (typeof message !== 'undefined' && message) { %>
            <div class="alert alert-danger text-center" role="alert" style="text-transform: uppercase;">
                <%= message %>
            </div>
        <% } %>
        <form action="/auth/login" method="post">
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="fas fa-user-circle"></i></span>
                    </div>
                    <input type="text" class="form-control" id="username" name="username" placeholder="Username" required autocomplete="username">
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="fas fa-lock"></i></span>
                    </div>
                    <input type="password" class="form-control" id="password" name="password" placeholder="Password" required autocomplete="current-password">
                </div>
            </div>
            <button type="submit" class="btn btn-primary btn-block">LOGIN</button>
        </form>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>