<?= $this->extend('layout/auth') ?>

<?= $this->section('title') ?>Register<?= $this->endSection() ?>

<?= $this->section('content') ?>

<div class="mb-7">
    <h2 class="text-2xl font-bold text-slate-800">Create account</h2>
    <p class="text-slate-500 text-sm mt-1.5">Set up your account to get started</p>
</div>

<?php if (isset($errors) && !empty($errors)): ?>
    <div class="mb-5 p-4 rounded-xl bg-red-50/70 border border-red-200/60">
        <?php foreach ($errors as $error): ?>
            <p class="text-sm text-red-700 flex items-center gap-2 mb-1 last:mb-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <?= esc($error) ?>
            </p>
        <?php endforeach; ?>
    </div>
<?php endif; ?>

<?= form_open(site_url('/register'), ['class' => 'space-y-4.5']) ?>

    <?= csrf_field() ?>

    <div>
        <label for="full_name" class="block text-sm font-semibold text-slate-700 mb-2">Full Name</label>
        <div class="relative">
            <div class="absolute inset-y-0 left-0 flex items-center pl-3.5 pointer-events-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-[18px] h-[18px] text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                </svg>
            </div>
            <input
                type="text"
                name="full_name"
                id="full_name"
                value="<?= old('full_name') ?>"
                placeholder="John Doe"
                class="input-glass w-full pl-11 pr-4 py-3 rounded-xl text-slate-800 placeholder:text-slate-500 text-sm focus:outline-none"
                required
            >
        </div>
    </div>

    <div>
        <label for="username" class="block text-sm font-semibold text-slate-700 mb-2">Username</label>
        <div class="relative">
            <div class="absolute inset-y-0 left-0 flex items-center pl-3.5 pointer-events-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-[18px] h-[18px] text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16.5 7.5h-9v1.5h9V7.5zm0 3h-9v1.5h9v-1.5zm0 3h-5.25v1.5h5.25v-1.5zM5.25 4.5h13.5a2.25 2.25 0 012.25 2.25v10.5a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 17.25V6.75A2.25 2.25 0 015.25 4.5z" />
                </svg>
            </div>
            <input
                type="text"
                name="username"
                id="username"
                value="<?= old('username') ?>"
                placeholder="johndoe"
                class="input-glass w-full pl-11 pr-4 py-3 rounded-xl text-slate-800 placeholder:text-slate-500 text-sm focus:outline-none"
                required
                minlength="3"
            >
        </div>
    </div>

    <div>
        <label for="email" class="block text-sm font-semibold text-slate-700 mb-2">Email Address</label>
        <div class="relative">
            <div class="absolute inset-y-0 left-0 flex items-center pl-3.5 pointer-events-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-[18px] h-[18px] text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
                </svg>
            </div>
            <input
                type="email"
                name="email"
                id="email"
                value="<?= old('email') ?>"
                placeholder="you@example.com"
                class="input-glass w-full pl-11 pr-4 py-3 rounded-xl text-slate-800 placeholder:text-slate-500 text-sm focus:outline-none"
                required
            >
        </div>
    </div>

    <div>
        <label for="password" class="block text-sm font-semibold text-slate-700 mb-2">Password</label>
        <div class="relative">
            <div class="absolute inset-y-0 left-0 flex items-center pl-3.5 pointer-events-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-[18px] h-[18px] text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
                </svg>
            </div>
            <input
                type="password"
                name="password"
                id="password"
                placeholder="Minimum 6 characters"
                class="input-glass w-full pl-11 pr-4 py-3 rounded-xl text-slate-800 placeholder:text-slate-500 text-sm focus:outline-none"
                required
                minlength="6"
            >
        </div>
    </div>

    <div class="pt-1.5">
        <label class="flex items-start gap-2.5 cursor-pointer">
            <input type="checkbox" required class="w-4 h-4 mt-0.5 rounded border-slate-300 text-blue-600 focus:ring-blue-500">
            <span class="text-sm text-slate-600">I agree to the <a href="#" class="text-blue-600 hover:text-blue-700 font-medium">Terms of Service</a> and <a href="#" class="text-blue-600 hover:text-blue-700 font-medium">Privacy Policy</a></span>
        </label>
    </div>

    <button type="submit" class="btn-primary w-full py-3.5 rounded-xl text-white font-semibold text-sm shadow-lg shadow-blue-500/25 flex items-center justify-center gap-2">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z" />
        </svg>
        Create Account
    </button>

<?= form_close() ?>

<div class="mt-7 pt-6 border-t border-slate-200/70">
    <p class="text-center text-sm text-slate-600">
        Already have an account?
        <a href="<?= site_url('/login') ?>" class="font-semibold text-blue-600 hover:text-blue-700 transition">Sign in</a>
    </p>
</div>

<?= $this->endSection() ?>
