{{template "base" .}}

{{define "title"}}Login - Webhooker{{end}}

{{define "head"}}
<style>
    body {
        background-color: #f8f9fa;
    }
    .login-container {
        max-width: 400px;
        margin: 100px auto;
    }
    .login-card {
        background: white;
        border-radius: 10px;
        box-shadow: 0 0 20px rgba(0,0,0,0.1);
        padding: 40px;
    }
    .login-header {
        text-align: center;
        margin-bottom: 30px;
    }
    .login-header h1 {
        font-size: 2rem;
        font-weight: 600;
        color: #333;
    }
    .login-header p {
        color: #666;
        margin-top: 10px;
    }
    .form-control:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    }
    .btn-primary {
        width: 100%;
        padding: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .error-message {
        margin-top: 15px;
    }
</style>
{{end}}

{{define "content"}}
<div class="container">
    <div class="login-container">
        <div class="login-card">
            <div class="login-header">
                <h1>Webhooker</h1>
                <p>Sign in to your account</p>
            </div>

            {{if .Error}}
            <div class="alert alert-danger error-message" role="alert">
                {{.Error}}
            </div>
            {{end}}

            <form method="POST" action="/pages/login">
                <div class="mb-3">
                    <label for="username" class="form-label">Username</label>
                    <input type="text" class="form-control" id="username" name="username" 
                           placeholder="Enter your username" required autofocus>
                </div>
                
                <div class="mb-4">
                    <label for="password" class="form-label">Password</label>
                    <input type="password" class="form-control" id="password" name="password" 
                           placeholder="Enter your password" required>
                </div>

                <button type="submit" class="btn btn-primary">Sign In</button>
            </form>
            
            <div class="mt-4 text-center text-muted">
                <small>© 2025 Webhooker. All rights reserved.</small>
            </div>
        </div>
    </div>
</div>
{{end}}