<!-- templates/parents/login.html -->
{% extends 'base.html' %}
{% load static %}

{% block title %}Parent Portal Login - Rapha-Bethel BNPS{% endblock %}

{% block extra_css %}
<style>
    .login-container {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%);
    }
    .login-card {
        background: white;
        border-radius: 15px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        padding: 40px;
        width: 100%;
        max-width: 400px;
    }
    .login-logo {
        text-align: center;
        margin-bottom: 30px;
    }
    .login-logo img {
        max-height: 80px;
    }
    .login-title {
        text-align: center;
        color: #333;
        margin-bottom: 10px;
        font-weight: 600;
    }
    .login-subtitle {
        text-align: center;
        color: #666;
        margin-bottom: 25px;
        font-size: 0.9rem;
    }
    .form-group {
        margin-bottom: 20px;
    }
    .form-control {
        height: 45px;
        border-radius: 8px;
        border: 1px solid #ddd;
        padding: 0 15px;
        width: 100%;
    }
    .form-control:focus {
        border-color: #2193b0;
        box-shadow: 0 0 0 0.2rem rgba(33, 147, 176, 0.25);
        outline: none;
    }
    .btn-login {
        background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%);
        color: white;
        height: 45px;
        border-radius: 8px;
        font-weight: 600;
        width: 100%;
        border: none;
        cursor: pointer;
        transition: transform 0.3s;
    }
    .btn-login:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(33, 147, 176, 0.4);
    }
    .error-message {
        color: #dc3545;
        text-align: center;
        margin-top: 15px;
        font-size: 0.9rem;
    }
    .info-message {
        background: #e7f3ff;
        border-left: 4px solid #2193b0;
        padding: 12px;
        margin-bottom: 20px;
        border-radius: 5px;
        font-size: 0.85rem;
        color: #555;
    }
    .back-link {
        text-align: center;
        margin-top: 20px;
    }
    .back-link a {
        color: #666;
        text-decoration: none;
        font-size: 0.9rem;
    }
    .back-link a:hover {
        color: #2193b0;
    }
    .forgot-link {
        text-align: center;
        margin-top: 15px;
    }
    .forgot-link a {
        color: #999;
        text-decoration: none;
        font-size: 0.8rem;
    }
    .forgot-link a:hover {
        color: #2193b0;
    }
</style>
{% endblock %}

{% block content %}
<div class="login-container">
    <div class="login-card">
        <div class="login-logo">
            <img src="{% static 'admin/img/logo-yellow.jpeg' %}" alt="Rapha-Bethel BNPS">
        </div>
        
        <h3 class="login-title">Parent Portal</h3>
        <p class="login-subtitle">Access your child's academic information</p>
        
        <div class="info-message">
            <i class="fas fa-info-circle me-2"></i>
            Parents: Use the credentials provided by the school administration.
        </div>
        
        <form method="post" action="{% url 'parents:login' %}">
            {% csrf_token %}
            
            <div class="form-group">
                <input type="text" name="username" class="form-control" 
                       placeholder="Username (Parent ID or Email)" required autofocus>
            </div>
            
            <div class="form-group">
                <input type="password" name="password" class="form-control" 
                       placeholder="Password" required>
            </div>
            
            <button type="submit" class="btn-login">
                <i class="fas fa-sign-in-alt me-2"></i> Access Portal
            </button>
            
            {% if form.errors %}
            <div class="error-message">
                <i class="fas fa-exclamation-circle"></i>
                Invalid username or password. Please try again.
            </div>
            {% endif %}
        </form>
        
        <div class="forgot-link">
            <a href="{% url 'parents:password_reset' %}">
                <i class="fas fa-question-circle me-1"></i> Forgot Password?
            </a>
        </div>
        
        <div class="back-link">
            <a href="{% url 'home' %}">
                <i class="fas fa-arrow-left me-1"></i> Back to Home
            </a>
        </div>
    </div>
</div>
{% endblock %}