{% extends 'base.html' %}

{% block title %}Register - KeepItGoing{% endblock %}

{% block auth_content %}
<div class="auth-card">
    <h1 class="auth-title">Create Account</h1>

    {% if errors %}
    <div class="alert alert-error">
        {% for field, error in errors.items %}
        <p>{{ error }}</p>
        {% endfor %}
    </div>
    {% endif %}

    <form method="post">
        {% csrf_token %}
        <div class="form-group">
            <label class="form-label" for="email">Email</label>
            <input type="email" class="form-input" id="email" name="email"
                   value="{{ email|default:'' }}" required autofocus>
        </div>
        <div class="form-group">
            <label class="form-label" for="username">Username</label>
            <input type="text" class="form-input" id="username" name="username"
                   value="{{ username|default:'' }}" required>
        </div>
        <div class="form-row">
            <div class="form-group">
                <label class="form-label" for="first_name">First Name</label>
                <input type="text" class="form-input" id="first_name" name="first_name"
                       value="{{ first_name|default:'' }}">
            </div>
            <div class="form-group">
                <label class="form-label" for="last_name">Last Name</label>
                <input type="text" class="form-input" id="last_name" name="last_name"
                       value="{{ last_name|default:'' }}">
            </div>
        </div>
        <div class="form-group">
            <label class="form-label" for="timezone">Timezone</label>
            <select class="form-input" id="timezone" name="timezone">
                <option value="UTC" {% if timezone == 'UTC' or not timezone %}selected{% endif %}>UTC</option>
                <option value="America/New_York" {% if timezone == 'America/New_York' %}selected{% endif %}>Eastern Time (ET)</option>
                <option value="America/Chicago" {% if timezone == 'America/Chicago' %}selected{% endif %}>Central Time (CT)</option>
                <option value="America/Denver" {% if timezone == 'America/Denver' %}selected{% endif %}>Mountain Time (MT)</option>
                <option value="America/Los_Angeles" {% if timezone == 'America/Los_Angeles' %}selected{% endif %}>Pacific Time (PT)</option>
                <option value="Europe/London" {% if timezone == 'Europe/London' %}selected{% endif %}>London (GMT)</option>
                <option value="Europe/Paris" {% if timezone == 'Europe/Paris' %}selected{% endif %}>Paris (CET)</option>
                <option value="Asia/Tokyo" {% if timezone == 'Asia/Tokyo' %}selected{% endif %}>Tokyo (JST)</option>
            </select>
        </div>
        <div class="form-group">
            <label class="form-label" for="password">Password</label>
            <input type="password" class="form-input" id="password" name="password" required>
        </div>
        <div class="form-group">
            <label class="form-label" for="password_confirm">Confirm Password</label>
            <input type="password" class="form-input" id="password_confirm" name="password_confirm" required>
        </div>
        <button type="submit" class="btn btn-primary btn-full">Register</button>
    </form>

    <p class="auth-footer">
        Already have an account? <a href="{% url 'login' %}">Login</a>
    </p>
</div>
{% endblock %}