{% extends "base.html" %}

{% block title %}Sign In - Command Center{% endblock %}

{% block content %}
<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem;">
    <div style="width: 100%; max-width: 400px;">
        <!-- Logo -->
        <div style="text-align: center; margin-bottom: 2rem;">
            <div style="display: inline-flex; align-items: center; gap: 0.5rem;">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
                    <rect width="32" height="32" rx="8" fill="hsl(240, 5.9%, 10%)"/>
                    <path d="M10 16L14 20L22 12" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span style="font-size: 1.25rem; font-weight: 700; color: var(--foreground);">Command Center</span>
            </div>
            <p style="font-size: 0.875rem; color: var(--muted-foreground); margin-top: 0.5rem;">
                Revenue Intelligence for Home Improvement
            </p>
        </div>

        <!-- Login Card -->
        <div class="card">
            <div class="card-header">
                <h1 class="card-title">Sign in to your account</h1>
                <p class="card-description">
                    Enter your email and password to access your Command Center
                </p>
            </div>
            <div class="card-content">
                <form method="POST" action="{{ url_for('auth.login') }}">
                    <div class="form-group">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" id="email" name="email" class="form-input" 
                               placeholder="you@company.com" required autofocus>
                    </div>
                    <div class="form-group">
                        <label for="password" class="form-label">Password</label>
                        <input type="password" id="password" name="password" class="form-input" 
                               placeholder="Enter your password" required>
                    </div>
                    <div class="form-group">
                        <div class="checkbox-group">
                            <input type="checkbox" id="remember" name="remember" class="form-checkbox">
                            <label for="remember" style="font-size: 0.875rem; color: var(--muted-foreground);">Remember me</label>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary btn-block btn-lg">Sign in</button>
                </form>
            </div>
            <div class="card-footer" style="text-align: center;">
                <p style="font-size: 0.875rem; color: var(--muted-foreground);">
                    Don't have an account? 
                    <a href="{{ url_for('auth.register') }}" style="color: var(--primary); font-weight: 500;">Create one</a>
                </p>
            </div>
        </div>

        <!-- Marketing link -->
        <p style="text-align: center; margin-top: 1.5rem; font-size: 0.8125rem; color: var(--muted-foreground);">
            <a href="{{ url_for('marketing.index') }}" style="color: var(--muted-foreground);">
                ← Back to commandsovereignty.com
            </a>
        </p>
    </div>
</div>
{% endblock %}