{% extends 'core/base.html' %}

{% block content %}
<div class="row justify-content-center align-items-center" style="min-height: 70vh;">
    <div class="col-md-5 col-lg-4">
        <div class="card shadow-lg" style="border-radius: 20px;">
            <div class="card-header text-center py-4" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 20px 20px 0 0;">
                <div class="mb-3">
                    <i class="bi bi-house-heart-fill" style="font-size: 3rem; color: white;"></i>
                </div>
                <h4 class="card-title mb-0 text-white fw-bold">家庭日报系统</h4>
                <p class="text-white-50 mb-0 mt-2">请登录您的账户</p>
            </div>
            <div class="card-body p-4">
                <form method="POST">
                    {% csrf_token %}
                    <div class="mb-4">
                        <label for="username" class="form-label">
                            <i class="bi bi-person me-2 text-primary"></i>用户名
                        </label>
                        <input type="text" class="form-control form-control-lg" id="username" name="username" placeholder="请输入用户名" required>
                    </div>
                    <div class="mb-4">
                        <label for="password" class="form-label">
                            <i class="bi bi-lock me-2 text-primary"></i>密码
                        </label>
                        <input type="password" class="form-control form-control-lg" id="password" name="password" placeholder="请输入密码" required>
                    </div>
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="bi bi-box-arrow-in-right me-2"></i>登录
                        </button>
                    </div>
                </form>
            </div>
            <div class="card-footer text-center py-3" style="background: transparent; border-top: 1px solid rgba(0,0,0,0.05);">
                <small class="text-muted">
                    <i class="bi bi-shield-check me-1"></i>
                    安全登录保护中
                </small>
            </div>
        </div>
    </div>
</div>
{% endblock %}