<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= esc($title ?? 'Sign In') ?> | PULSE</title>
    <meta name="csrf-token" content="<?= csrf_hash() ?>">
    <link rel="icon" type="image/svg+xml" href="<?= base_url('assets/img/pulse-logo.svg') ?>">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <link rel="stylesheet" href="<?= base_url('assets/css/enterprise.css') ?>">
</head>
<body class="auth-body">

<div class="auth-split">
    <aside class="auth-split-hero" aria-hidden="false">
        <div class="auth-binary-bg" aria-hidden="true">
            <div class="auth-binary-layer auth-binary-layer--1"></div>
            <div class="auth-binary-layer auth-binary-layer--2"></div>
        </div>
        <div class="auth-hero-content">
            <img src="<?= base_url('assets/img/pulse-logo.svg') ?>" alt="" class="auth-hero-logo" width="72" height="72">
            <h1 class="auth-hero-title">PULSE</h1>
            <p class="auth-hero-tagline">Enterprise Resource Platform</p>
            <div class="auth-hero-pulse-line" aria-hidden="true">
                <svg viewBox="0 0 200 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0 20 H40 L55 8 L70 32 L85 14 L100 20 H200" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
        </div>
    </aside>

    <main class="auth-split-panel">
        <div class="auth-card">
            <div class="auth-card-header">
                <img src="<?= base_url('assets/img/pulse-logo.svg') ?>" alt="PULSE" class="auth-brand-logo" width="40" height="40">
                <div>
                    <div class="auth-brand-title">Welcome back</div>
                    <div class="auth-brand-subtitle">Sign in to your account</div>
                </div>
            </div>

            <?= $this->renderSection('content') ?>
        </div>
    </main>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
<script src="<?= base_url('assets/js/app.js') ?>"></script>
</body>
</html>
