{% load spellbook_tags %}
<header class="sb-page-header sb-mb-6 sb-pb-4 sb-border-b sb-border-solid sb-border-neutral-25">
  <!-- Top Row: Back button + Title -->
  <div class="sb-flex sb-items-center sb-justify-between sb-mb-3">
    {% if parent_dir_url %}
    <a href="{{ parent_dir_url }}"
       class="sb-flex sb-items-center sb-gap-1 sb-text-sm sb-secondary sb-no-underline sb-hover:primary sb-transition">
      <span>←</span>
      <span>Back to {{ parent_dir_name }}</span>
    </a>
    {% else %}
    <div></div> {# Spacer when no back button #}
    {% endif %}

    <div class="sb-text-right">
      <h1 class="sb-text-3xl sb-font-bold sb-primary sb-m-0">{{ title }}</h1>
      {% if author %}
      <p class="sb-text-sm sb-text-secondary-color sb-mt-1 sb-m-0">by {{ author }}</p>
      {% endif %}
    </div>
  </div>

  <!-- Bottom Row: Prev/Next navigation -->
  {% if prev_page or next_page %}
  <div class="sb-flex sb-justify-between sb-gap-2 sb-pt-3 sb-border-t sb-border-solid sb-border-neutral-25">
    {% if prev_page %}
    <a href="{% spellbook_url prev_page %}"
       class="sb-flex sb-items-center sb-gap-1 sb-px-3 sb-py-2 sb-rounded sb-bg-secondary-10 sb-primary sb-no-underline sb-transition sb-hover:bg-secondary-25 sb-hover:primary-75">
      <span>←</span>
      <span class="sb-text-sm">Previous</span>
    </a>
    {% else %}
    <div></div>
    {% endif %}

    {% if next_page %}
    <a href="{% spellbook_url next_page %}"
       class="sb-flex sb-items-center sb-gap-1 sb-px-3 sb-py-2 sb-rounded sb-bg-secondary-10 sb-primary sb-no-underline sb-transition sb-hover:bg-secondary-25 sb-hover:primary-75">
      <span class="sb-text-sm">Next</span>
      <span>→</span>
    </a>
    {% endif %}
  </div>
  {% endif %}
</header>
