{% extends "layouts/base.html" %}

{% block title %}Access Your Retoor's Cloud Account{% endblock %}

{% block head %}
    <link rel="stylesheet" href="/static/css/components/login.css">
{% endblock %}

{% block content %}
<div class="login-page-container">
    <h1>Access Your Retoor's Cloud Account</h1>
    <p class="subtitle">Flexible cloud storage tailored to your needs.</p>

    <section class="form-container">
        <h2>Login to your Account</h2>
        {% if error %}
            <p class="error">{{ error }}</p>
        {% endif %}
        <form action="/login" method="post">
            <div class="form-group">
                <label for="email">Email Address</label>
                <input type="email" id="email" name="email" required value="{{ data.email or '' }}">
                {% if errors.email %}
                    <p class="error">{{ errors.email }}</p>
                {% endif %}
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required>
                {% if errors.password %}
                    <p class="error">{{ errors.password }}</p>
                {% endif %}
            </div>
            <a href="/forgot_password" class="forgot-password-link">Forgot Password?</a>
            <button type="submit" class="btn-primary">Log In Securely</button>
        </form>
        <p class="create-account-link">Don't have an account? <a href="/register">Create an Account</a></p>
    </section>
</div>
{% endblock %}