<?php
    header('Cache-Control: no-cache, must-revalidate');
    header('Pragma: no-cache');
    header('Expires: 0');
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?= $this->v('page_title', 'Verify Staff ID'); ?></title>
  <link rel="icon" href="<?= PROOT; ?>images/favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="<?= PROOT; ?>js/Olibs/bootstrap/bootstrap.min.css">
  <link rel="stylesheet" href="<?= PROOT; ?>js/Olibs/fontawesome/css/all.min.css">
  <link rel="stylesheet" href="<?= PROOT; ?>css/pacific.css?v=<?= @filemtime(ROOT . '/css/pacific.css') ?: '1'; ?>">
  <style>
    body { background:#F5F7FB; color:#0F1220; font-family: 'Open Sans', system-ui, -apple-system, sans-serif; }
    .verify-shell { max-width: 480px; margin: 0 auto; padding: 24px 16px 64px; }
    .verify-brand { display:flex; align-items:center; gap:10px; margin-bottom:20px; color:#2626F5; font-weight:700; }
    .verify-brand img { height: 28px; }
    .verify-card { background:#fff; border-radius:14px; padding:22px; box-shadow: 0 1px 3px rgba(15,18,32,.06), 0 8px 24px -12px rgba(38,38,245,.10); }
    .verify-status-bar { height: 6px; border-radius: 6px 6px 0 0; margin: -22px -22px 18px; }
    .status-valid    .verify-status-bar { background: #16A34A; }
    .status-expired  .verify-status-bar { background: #F59E0B; }
    .status-revoked  .verify-status-bar { background: #DC2626; }
    .status-unknown  .verify-status-bar,
    .status-malformed .verify-status-bar { background: #6B7484; }
    .verdict { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
    .verdict-valid    { color: #16A34A; }
    .verdict-expired  { color: #B45309; }
    .verdict-revoked  { color: #B91C1C; }
    .verdict-neutral  { color: #6B7484; }
    .portrait { width:96px; height:128px; object-fit:cover; border-radius:8px; border:1px solid #E2E7EF; background:#EBEFFA; }
    .kv { display:grid; grid-template-columns: 100px 1fr; gap: 4px 12px; margin-top: 14px; font-size: 13px; }
    .kv dt { color:#6B7484; font-weight:500; text-transform:uppercase; letter-spacing:.04em; font-size: 10.5px; align-self:center; }
    .kv dd { margin:0; color:#0F1220; font-weight:600; }
    .footer-note { text-align:center; color:#6B7484; font-size:11.5px; margin-top: 22px; letter-spacing:.02em; }
    .search-input { border:1px solid #E2E7EF; border-radius:8px; padding: 10px 12px; width:100%; font-family: 'JetBrains Mono', ui-monospace, monospace; text-transform:uppercase; }
    .search-input:focus { outline:none; border-color:#2626F5; box-shadow: 0 0 0 3px rgba(38,38,245,.12); }
    .btn-verify { background:#2626F5; color:#fff; border:none; border-radius:8px; padding: 10px 16px; font-weight:600; }
    .btn-verify:hover { background:#1414D6; color:#fff; }
  </style>
</head>
<body>
  <div class="verify-shell">
    <div class="verify-brand">
      <img src="<?= PROOT; ?>images/logo.png" alt="Pacific Group">
      <span>PACIFIC GROUP</span>
    </div>
    <?= $this->content('body'); ?>
    <div class="footer-note">Pacific Group Company Limited &middot; Verification</div>
  </div>
</body>
</html>
