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

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

<?= $this->section('content') ?>
<div class="rounded-2xl border border-gray-200 bg-white p-8 shadow-md shadow-gray-200/50 sm:p-10">
    <div class="mb-6 text-center">
        <h1 class="text-xl font-semibold text-gray-900">Masuk ke admin</h1>
        <p class="mt-2 text-sm text-gray-500">Gunakan akun pegawai (sama seperti aplikasi mobile) atau akun panel administrator. Sesi menyimpan token API.</p>
    </div>

    <?php if (session()->getFlashdata('message')) : ?>
        <div class="mb-4 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800 shadow-sm" role="status">
            <?= esc(session()->getFlashdata('message')) ?>
        </div>
    <?php endif ?>
    <?php if (session()->getFlashdata('error')) : ?>
        <div class="mb-4 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800 shadow-sm" role="alert">
            <?= esc(session()->getFlashdata('error')) ?>
        </div>
    <?php endif ?>

    <form action="<?= site_url('admin/login') ?>" method="post" class="space-y-5">
        <?= csrf_field() ?>
        <div>
            <label for="username" class="mb-1.5 block text-sm font-medium text-gray-700">Username</label>
            <input type="text" name="username" id="username" value="<?= esc(old('username')) ?>"
                   class="h-11 w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm text-gray-800 shadow-sm placeholder:text-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
                   autocomplete="username" required>
        </div>
        <div>
            <label for="password" class="mb-1.5 block text-sm font-medium text-gray-700">Password</label>
            <input type="password" name="password" id="password"
                   class="h-11 w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm text-gray-800 shadow-sm placeholder:text-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
                   autocomplete="current-password" required>
        </div>
        <button type="submit" class="flex w-full items-center justify-center rounded-lg bg-blue-600 px-4 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-blue-700">
            Login
        </button>
    </form>
</div>
<?= $this->endSection() ?>
