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

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

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

<div class="mb-7">
    <h2 class="text-2xl font-bold text-slate-800">Welcome back</h2>
    <p class="text-slate-500 text-sm mt-1.5">Sign in to your account to continue</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('/login'), ['class' => 'space-y-5']) ?>

    <?= csrf_field() ?>

    <div>
        <label for="username" class="block text-sm font-semibold text-slate-700 mb-2">Username or Email</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="text"
                name="username"
                id="username"
                value="<?= old('username') ?>"
                placeholder="Enter your username or email"
                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="Enter your password"
                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 class="flex items-center justify-between">
        <label class="flex items-center gap-2 cursor-pointer">
            <input type="checkbox" name="remember" class="w-4 h-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500">
            <span class="text-sm text-slate-600">Remember me</span>
        </label>
        <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-700 transition">Forgot password?</a>
    </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="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
        </svg>
        Sign In
    </button>

<?= form_close() ?>

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

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