%# /templates/login.html.ep
% layout 'default';
% title 'Login';

<% content_for head => begin %>
    <link rel="stylesheet" href="/css/auth.css">
    <script src="/js/auth.js"></script>
<% end %>

<div class="auth-container">
    <h1 class="auth-header">Login</h1>
    
    % if (my $msg = param('msg')) {
        <div class="alert">
            % if ($msg eq 'invalid') {
                Invalid username or password.
            % } elsif ($msg eq 'pending') {
                Account pending approval.
            % }
        </div>
    % }

    <form method="POST" action="/login">
        <div class="form-group">
            <label for="username">Username</label>
            <input type="text" id="username" name="username" required autofocus>
        </div>
        
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" id="password" name="password" required>
        </div>
        
        <div class="button-container">
            <input type="submit" value="Login">
        </div>
    </form>
    
    <p class="auth-footer">
        Don't have an account? <a href="/register">Register here</a>
    </p>
</div>