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

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

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

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

    <section class="form-container">
        <h2>Create an Account</h2>
        {% if error %}
            <p class="error">{{ error }}</p>
        {% endif %}
        <form action="/register" method="post">
            <div class="form-group">
                <label for="full_name">Full Name</label>
                <input type="text" id="full_name" name="full_name" required value="{{ data.full_name or '' }}">
                {% if errors.full_name %}
                    <p class="error">{{ errors.full_name }}</p>
                {% endif %}
            </div>
            <div class="form-group">
                <label for="email">Work 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>
            <div class="form-group">
                <label for="confirm_password">Confirm Password</label>
                <input type="password" id="confirm_password" name="confirm_password" required>
                {% if errors.confirm_password %}
                    <p class="error">{{ errors.confirm_password }}</p>
                {% endif %}
            </div>
            <div class="terms-checkbox">
                <input type="checkbox" id="terms" name="terms" required>
                <label for="terms">I agree to the <a href="/terms">Terms of Service</a> & <a href="/privacy">Privacy Policy</a></label>
            </div>
            <button type="submit" class="btn-primary">Create Account</button>
        </form>
        <p class="login-link">Already have an account? <a href="/login">Log In</a></p>
    </section>
</div>
{% endblock %}