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

<h5 class="fw-semibold mb-4 text-center text-dark"><?= lang('Admin.login_title') ?></h5>

<?php if (session()->getFlashdata('error')): ?>
<div class="alert alert-danger alert-sm">
    <i class="bi bi-exclamation-triangle me-1"></i><?= esc(session()->getFlashdata('error')) ?>
</div>
<?php endif; ?>

<?php if ($errors = session()->getFlashdata('errors')): ?>
<div class="alert alert-warning">
    <?php foreach ((array)$errors as $e): ?>
    <div><?= esc($e) ?></div>
    <?php endforeach; ?>
</div>
<?php endif; ?>

<form action="<?= site_url('login') ?>" method="post" novalidate>
    <?= csrf_field() ?>

    <div class="mb-3">
        <label class="form-label fw-medium"><?= lang('Admin.email') ?></label>
        <div class="input-group">
            <span class="input-group-text"><i class="bi bi-envelope"></i></span>
            <input type="email" name="email" class="form-control"
                   value="<?= esc(old('email')) ?>"
                   placeholder="admin@example.com"
                   autocomplete="username" required>
        </div>
    </div>

    <div class="mb-3">
        <label class="form-label fw-medium"><?= lang('Admin.password') ?></label>
        <div class="input-group">
            <span class="input-group-text"><i class="bi bi-lock"></i></span>
            <input type="password" name="password" id="loginPassword"
                   class="form-control" placeholder="••••••••"
                   autocomplete="current-password" required>
            <button type="button" class="btn btn-outline-secondary" id="togglePwd" tabindex="-1">
                <i class="bi bi-eye" id="togglePwdIcon"></i>
            </button>
        </div>
    </div>

    <div class="d-grid mt-4">
        <button type="submit" class="btn btn-primary btn-lg fw-semibold">
            <i class="bi bi-box-arrow-in-right me-2"></i><?= lang('Admin.login_btn') ?>
        </button>
    </div>

    <div class="text-center mt-3">
        <a href="<?= site_url('forgot-password') ?>" class="text-muted small">
            <?= lang('Admin.forgot_password') ?>
        </a>
    </div>
</form>

<script>
document.getElementById('togglePwd').addEventListener('click', function () {
    const input = document.getElementById('loginPassword');
    const icon  = document.getElementById('togglePwdIcon');
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.replace('bi-eye', 'bi-eye-slash');
    } else {
        input.type = 'password';
        icon.classList.replace('bi-eye-slash', 'bi-eye');
    }
});
</script>

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