{% extends "layout.html" %}
{% block title %}Register - Runit{% endblock %}
{% block content %}
<div class="auth-container">
    <div class="auth-card fade-in">
        <div class="auth-header">
            <div class="auth-logo">runit</div>
            <div class="auth-title">Create your account</div>
        </div>
        <div class="auth-body">
            <form action="{{ register_action }}" method="post">
                {% for (category, message) in get_flashed_messages(request) %}
                <div class="alert alert-{{ category }} mb-3">
                    <i class="fas fa-{% if category == 'danger' %}exclamation-circle{% elif category == 'success' %}check-circle{% else %}info-circle{% endif %}"></i>
                    <span>{{ message }}</span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                {% endfor %}
                
                <div class="form-group">
                    <label class="form-label" for="name">Name</label>
                    <input type="text" class="form-control" name="name" id="name" required placeholder="Your name">
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="email">Email Address</label>
                    <input type="email" class="form-control" name="email" id="email" required placeholder="you@example.com">
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="password">Password</label>
                    <input type="password" class="form-control" name="password" id="password" required placeholder="Create a password">
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="cpassword">Confirm Password</label>
                    <input type="password" class="form-control" name="cpassword" id="cpassword" required placeholder="Confirm your password">
                </div>
                
                <button type="submit" class="btn btn-accent w-100 mt-2">
                    <i class="fas fa-user-plus fa-fw"></i>
                    Create Account
                </button>
            </form>
        </div>
        <div class="auth-footer">
            Already have an account? <a href="{{ signin_page_url }}">Sign in</a>
        </div>
    </div>
    <button class="theme-toggle position-absolute" style="bottom: 20px; left: 20px;" onclick="toggleTheme()" title="Toggle theme">
        <i class="fas fa-sun"></i>
        <i class="fas fa-moon"></i>
    </button>
</div>
{% endblock %}