<?php
$officialLogo = trim(
    (string)($settings['logo_path'] ?? '')
);

if ($officialLogo === '') {
    $officialLogo = 'assets/img/logo.png';
}
?>

<div class="darlink-login-page">
    <div class="darlink-login-card">

        <div class="darlink-login-brand darlink-login-brand-centered">
            <div class="darlink-login-logo">
                <img
                    src="<?= htmlspecialchars(
                        $officialLogo,
                        ENT_QUOTES,
                        'UTF-8'
                    ) ?>"
                    alt="Logo officiel"
                >
            </div>

            <div class="darlink-login-brand-version">
                <?= htmlspecialchars(\App\Core\Version::label()) ?>
            </div>
        </div>

        <div class="darlink-login-separator"></div>

        <div class="darlink-login-heading">
            <h1>Connexion</h1>

            <p>
                Accédez à votre espace de gestion.
            </p>
        </div>

        <?php if (!empty($expired)): ?>
            <div class="alert alert-warning">
                <i class="bi bi-clock-history me-1"></i>
                Votre session a expiré. Veuillez vous reconnecter.
            </div>
        <?php endif; ?>

        <?php if (!empty($error)): ?>
            <div class="alert alert-danger">
                <i class="bi bi-exclamation-circle me-1"></i>
                <?= htmlspecialchars(
                    (string)$error,
                    ENT_QUOTES,
                    'UTF-8'
                ) ?>
            </div>
        <?php endif; ?>

        <form
            method="post"
            action="index.php?page=login_store"
            class="darlink-login-form"
        >
            <div class="darlink-form-group">
                <label
                    for="login"
                    class="darlink-label"
                >
                    Identifiant
                </label>

                <div class="darlink-login-input">
                    <i class="bi bi-person"></i>

                    <input
                        type="text"
                        id="login"
                        name="login"
                        value="<?= htmlspecialchars(
                            (string)($oldLogin ?? ''),
                            ENT_QUOTES,
                            'UTF-8'
                        ) ?>"
                        placeholder="Votre identifiant"
                        autocomplete="username"
                        required
                        autofocus
                    >
                </div>
            </div>

            <div class="darlink-form-group">
                <label
                    for="password"
                    class="darlink-label"
                >
                    Mot de passe
                </label>

                <div class="darlink-login-input">
                    <i class="bi bi-lock"></i>

                    <input
                        type="password"
                        id="password"
                        name="password"
                        placeholder="Votre mot de passe"
                        autocomplete="current-password"
                        required
                    >

                    <button
                        type="button"
                        class="darlink-login-password-toggle"
                        id="toggleLoginPassword"
                        title="Afficher le mot de passe"
                        aria-label="Afficher le mot de passe"
                    >
                        <i class="bi bi-eye"></i>
                    </button>
                </div>
            </div>

            <button
                type="submit"
                class="btn darlink-btn-primary darlink-login-submit"
            >
                <i class="bi bi-box-arrow-in-right me-1"></i>
                Se connecter
            </button>
        </form>

        <div class="darlink-login-footer">
            <div>© Darlink ERP</div>
            <div>Version <?= htmlspecialchars(\App\Core\Version::label()) ?></div>
        </div>

    </div>
</div>
  </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const button = document.getElementById(
        'toggleLoginPassword'
    );

    const input = document.getElementById(
        'password'
    );

    if (!button || !input) {
        return;
    }

    button.addEventListener('click', function () {
        const isHidden = input.type === 'password';

        input.type = isHidden
            ? 'text'
            : 'password';

        button.innerHTML = isHidden
            ? '<i class="bi bi-eye-slash"></i>'
            : '<i class="bi bi-eye"></i>';

        button.setAttribute(
            'aria-label',
            isHidden
                ? 'Masquer le mot de passe'
                : 'Afficher le mot de passe'
        );
    });
});
</script>