{#
/**
 * @file
 * FlowDrop Page Header Component
 *
 * Header with logo, page title, and actions.
 *
 * Available variables:
 * - page_title: The current page title
 * - primary_action: Primary action button {label, url, icon}
 * - module_path: Path to flowdrop_ui_components module
 *
 * Slots:
 * - actions: Additional action buttons
 */
#}

{% set logo_path = module_path ~ '/assets/flowdrop-logo.svg' %}

<header class="fd-page-header">
  <div class="fd-page-header__start">
    {# FlowDrop Logo #}
    <a href="/admin/flowdrop" class="fd-page-header__logo" title="FlowDrop Dashboard">
      <img src="{{ logo_path }}" alt="FlowDrop" class="fd-page-header__logo-img" />
    </a>
    
    {% if page_title %}
      <h1 class="fd-page-header__page-title">{{ page_title }}</h1>
    {% endif %}
  </div>
  
  <div class="fd-page-header__end">
    {{ actions }}
    
    {% if primary_action and primary_action.label %}
      <a href="{{ primary_action.url|default('#') }}" class="fd-page-header__primary-action">
        {% if primary_action.icon %}
          {{ primary_action.icon|raw }}
        {% else %}
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
          </svg>
        {% endif %}
        <span>{{ primary_action.label }}</span>
      </a>
    {% endif %}
  </div>
</header>
