<?php
// /elms/coordinator/partials/topbar.php
$user = $_SESSION['user']['name'] ?? 'Coordinator';
?>
<header class="ec-topbar">
  <button class="toggle" id="ecSidebarToggle" aria-label="Toggle sidebar">
    <i class="bi bi-list"></i>
  </button>
  <div class="title"><?php echo h($PAGE_TITLE ?? 'Coordinator'); ?></div>
  <div class="spacer"></div>
  <div class="scope">
    <a href="?scope=all" class="btn-chip <?php echo ($_GET['scope']??'')==='all'?'on':''; ?>">All branches</a>
    <a href="?scope=my"  class="btn-chip <?php echo ($_GET['scope']??'')==='my'?'on':''; ?>">My branch</a>
  </div>
  <div class="user">
    <i class="bi bi-person-circle"></i> <?php echo h($user); ?>
  </div>
</header>

<style>
.ec-topbar{ position:sticky; top:0; z-index:100; height:56px; display:flex; align-items:center; gap:12px; padding:0 16px; background:#fff; border-bottom:1px solid #e8eef7; }
.ec-topbar .toggle{ background:transparent; border:none; font-size:1.4rem; }
.ec-topbar .title{ font-weight:700; font-size:1.05rem; }
.ec-topbar .spacer{ flex:1; }
.btn-chip{ display:inline-block; padding:6px 10px; font-size:.85rem; border:1px solid #ccd6ea; border-radius:999px; color:#2b3b57; margin-left:4px; text-decoration:none;}
.btn-chip.on{ background:#e8f7f3; border-color:#a4e4d5; color:#0b6b57; }
</style>

<script>
document.addEventListener('DOMContentLoaded', function(){
  const btn = document.getElementById('ecSidebarToggle');
  const aside = document.getElementById('ec-coord-sidebar');
  if (btn && aside) btn.addEventListener('click', () => aside.classList.toggle('open'));
});
</script>
