{% extends "base.html" %}
{% from "components/forms.html" import text_input, button_primary, form_errors, checkbox %}

{% block title %}Create Account - CmdForge{% endblock %}

{% block content %}
<div class="min-h-[70vh] flex items-center justify-center px-4 py-12">
    <div class="w-full max-w-md">
        <div class="text-center mb-8">
            <a href="{{ url_for('web.home') }}" class="inline-flex items-center justify-center">
                <svg class="w-10 h-10 text-indigo-600" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                </svg>
            </a>
            <h1 class="mt-4 text-2xl font-bold text-gray-900">Create your account</h1>
            <p class="mt-2 text-gray-600">
                Start publishing tools and join the community
            </p>
        </div>

        <div class="bg-white rounded-lg border border-gray-200 p-8 shadow-sm">
            {{ form_errors(errors) }}

            <form action="{{ url_for('web.register') }}" method="POST">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

                {{ text_input(
                    name='email',
                    label='Email address',
                    type='email',
                    placeholder='you@example.com',
                    required=true,
                    value=email or '',
                    help='We\'ll send a verification email to this address'
                ) }}

                {{ text_input(
                    name='slug',
                    label='Username',
                    type='text',
                    placeholder='your-username',
                    required=true,
                    value=slug or '',
                    help='This will be your unique identifier (e.g., your-username/tool-name)'
                ) }}

                {{ text_input(
                    name='display_name',
                    label='Display name',
                    type='text',
                    placeholder='Your Name',
                    required=true,
                    value=display_name or ''
                ) }}

                {{ text_input(
                    name='password',
                    label='Password',
                    type='password',
                    placeholder='At least 8 characters',
                    required=true,
                    help='Use a mix of letters, numbers, and symbols'
                ) }}

                {{ text_input(
                    name='password_confirm',
                    label='Confirm password',
                    type='password',
                    placeholder='Confirm your password',
                    required=true
                ) }}

                <div class="mb-6">
                    <div class="flex items-start">
                        <input type="checkbox"
                               name="terms"
                               id="terms"
                               required
                               class="mt-1 h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                        <label for="terms" class="ml-3 text-sm text-gray-600">
                            I agree to the
                            <a href="{{ url_for('web.terms') }}" class="text-indigo-600 hover:text-indigo-800">Terms of Service</a>
                            and
                            <a href="{{ url_for('web.privacy') }}" class="text-indigo-600 hover:text-indigo-800">Privacy Policy</a>
                        </label>
                    </div>
                </div>

                {{ button_primary('Create account', full_width=true) }}
            </form>
        </div>

        <p class="mt-6 text-center text-sm text-gray-600">
            Already have an account?
            <a href="{{ url_for('web.login') }}" class="text-indigo-600 hover:text-indigo-800 font-medium">
                Sign in
            </a>
        </p>
    </div>
</div>
{% endblock %}