<?php
// Ensure these variables are defined before this include:
// $request_title, $current_view, $is_logged_in, $asana_oauth_url

$views = [
  'overview'   => 'Overview',
  'checklist'  => 'Checklist',
  'timeline'   => 'Timeline',
  'insights'   => 'Insights',
  'subtasks'   => 'Subtasks',
];
?>
<header class="bg-white shadow sticky top-0 z-50 m-4">
  <div class="max-w-screen-4xl mx-auto px-4 py-4 flex flex-wrap items-center justify-between gap-4">

    <!-- Left: Task title + View links -->
    <div class="flex flex-wrap items-center gap-6">
      <h1 class="text-lg sm:text-xl font-semibold text-gray-800">
        Request: <?= esc_html($request_title) ?>
      </h1>

      <nav class="flex gap-4 text-sm text-gray-600">
        <?php foreach ($views as $slug => $label): ?>
          <a
            href="?view=<?= esc_attr($slug) ?>"
            class="<?= $current_view === $slug ? 'text-blue-600 font-medium' : 'hover:text-blue-600' ?>">
            <?= esc_html($label) ?>
          </a>
        <?php endforeach; ?>
      </nav>
    </div>

    <!-- Right: OAuth login / user -->
    <div class="flex items-center gap-4">
      <?php if (!$is_logged_in): ?>
        <a href="/?asana_frontend_login=1&redirect_to=<?= urlencode($_SERVER['REQUEST_URI']) ?>"
   class="text-sm px-4 py-1.5 rounded bg-blue-600 text-white hover:bg-blue-700">
  Log in with Asana
</a>

      <?php else: ?>
        <div class="flex items-center gap-2">
          <img src="<?= esc_attr($_SESSION['asana_user']['photo'] ?? 'https://via.placeholder.com/40') ?>" class="w-8 h-8 rounded-full" alt="Avatar">
          <span class="text-sm"><?= esc_html($_SESSION['asana_user']['name'] ?? 'User') ?></span>
        </div>
      <?php endif; ?>
    </div>

  </div>
</header>
