{#
  Header Macros
  =============
  Reusable page header and navigation components.

  Usage:
    {% from 'shared/macros/headers.html' import page_header, section_header, breadcrumbs %}
    {{ page_header('User Management', action_label='Create User', action_url='/users/create') }}
    {{ section_header('Account Settings') }}
    {{ breadcrumbs([{'label': 'Home', 'url': '/'}, {'label': 'Users'}]) }}
#}


{#
  Page Header
  ===========
  A page header with title, optional subtitle, and action button.

  Parameters:
    - title: Page title
    - subtitle: Page subtitle (optional)
    - action_label: Action button text (optional)
    - action_url: Action button URL (optional)
    - action_icon: Action button icon (default: 'plus')
    - action_onclick: JavaScript onclick handler (optional, instead of URL)
    - back_url: Back button URL (optional)
    - back_label: Back button text (default: 'Back')
#}
{% macro page_header(title, subtitle=none, action_label=none, action_url=none, action_icon='plus', action_onclick=none, back_url=none, back_label='Back') %}
<div class="flex items-center justify-between my-6">
    <div>
        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
            {{ title }}
        </h2>
        {% if subtitle %}
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
            {{ subtitle }}
        </p>
        {% endif %}
    </div>
    <div class="flex items-center space-x-3">
        {% if back_url %}
        <a href="{{ back_url }}"
           class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray">
            <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
            {{ back_label }}
        </a>
        {% endif %}
        {% if action_label and (action_url or action_onclick) %}
        {% if action_url %}
        <a href="{{ action_url }}"
           class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
            <span x-html="$icon('{{ action_icon }}', 'w-4 h-4 mr-2')"></span>
            {{ action_label }}
        </a>
        {% else %}
        <button @click="{{ action_onclick }}"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
            <span x-html="$icon('{{ action_icon }}', 'w-4 h-4 mr-2')"></span>
            {{ action_label }}
        </button>
        {% endif %}
        {% endif %}
    </div>
</div>
{% endmacro %}


{#
  Page Header (Dynamic)
  =====================
  A page header where the title comes from Alpine.js.

  Parameters:
    - title_var: Alpine.js variable for the title
    - subtitle_var: Alpine.js variable for subtitle (optional)
    - ... other params same as page_header
#}
{% macro page_header_dynamic(title_var, subtitle_var=none, action_label=none, action_url=none, action_icon='plus', back_url=none, back_label='Back') %}
<div class="flex items-center justify-between my-6">
    <div>
        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200" x-text="{{ title_var }}"></h2>
        {% if subtitle_var %}
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1" x-text="{{ subtitle_var }}"></p>
        {% endif %}
    </div>
    <div class="flex items-center space-x-3">
        {% if back_url %}
        <a href="{{ back_url }}"
           class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray">
            <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
            {{ back_label }}
        </a>
        {% endif %}
        {% if action_label and action_url %}
        <a href="{{ action_url }}"
           class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
            <span x-html="$icon('{{ action_icon }}', 'w-4 h-4 mr-2')"></span>
            {{ action_label }}
        </a>
        {% endif %}
    </div>
</div>
{% endmacro %}


{#
  Section Header
  ==============
  A section header within a page.

  Parameters:
    - title: Section title
    - subtitle: Section subtitle (optional)
    - action_label: Action button text (optional)
    - action_onclick: Action button onclick (optional)
    - icon: Section icon (optional)
#}
{% macro section_header(title, subtitle=none, action_label=none, action_onclick=none, icon=none) %}
<div class="flex items-center justify-between mb-4">
    <div class="flex items-center">
        {% if icon %}
        <span x-html="$icon('{{ icon }}', 'w-5 h-5 mr-2 text-gray-500')"></span>
        {% endif %}
        <div>
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">{{ title }}</h3>
            {% if subtitle %}
            <p class="text-sm text-gray-500 dark:text-gray-400">{{ subtitle }}</p>
            {% endif %}
        </div>
    </div>
    {% if action_label and action_onclick %}
    <button @click="{{ action_onclick }}"
            class="px-3 py-1 text-sm font-medium text-purple-600 dark:text-purple-400 hover:bg-purple-50 dark:hover:bg-gray-700 rounded-lg transition-colors">
        {{ action_label }}
    </button>
    {% endif %}
</div>
{% endmacro %}


{#
  Breadcrumbs
  ===========
  Navigation breadcrumbs.

  Parameters:
    - items: List of breadcrumb items [{'label': '', 'url': ''}]
            Last item (without url) is treated as current page
    - separator: Separator character (default: '/')
#}
{% macro breadcrumbs(items, separator='/') %}
<nav class="flex mb-6" aria-label="Breadcrumb">
    <ol class="inline-flex items-center space-x-1 md:space-x-2 text-sm">
        {% for item in items %}
        <li class="inline-flex items-center">
            {% if not loop.first %}
            <span class="mx-2 text-gray-400">{{ separator }}</span>
            {% endif %}
            {% if item.url and not loop.last %}
            <a href="{{ item.url }}" class="text-gray-600 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 transition-colors">
                {{ item.label }}
            </a>
            {% else %}
            <span class="text-gray-900 dark:text-gray-200 font-medium">{{ item.label }}</span>
            {% endif %}
        </li>
        {% endfor %}
    </ol>
</nav>
{% endmacro %}


{#
  Card Header
  ===========
  A header for card sections.

  Parameters:
    - title: Card header title
    - subtitle: Card header subtitle (optional)
    - class_extra: Additional CSS classes
#}
{% macro card_header(title, subtitle=none, class_extra='') %}
<div class="mb-4 {{ class_extra }}">
    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">{{ title }}</h3>
    {% if subtitle %}
    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">{{ subtitle }}</p>
    {% endif %}
</div>
{% endmacro %}


{#
  Tab Header
  ==========
  A tab navigation header.

  Parameters:
    - tabs: List of tab items [{'id': '', 'label': '', 'icon': ''}]
    - active_var: Alpine.js variable for active tab
#}
{% macro tab_header(tabs, active_var='activeTab') %}
<div class="border-b border-gray-200 dark:border-gray-700 mb-6">
    <nav class="flex space-x-4" aria-label="Tabs">
        {% for tab in tabs %}
        <button
            @click="{{ active_var }} = '{{ tab.id }}'"
            class="px-4 py-2 text-sm font-medium border-b-2 transition-colors"
            :class="{{ active_var }} === '{{ tab.id }}'
                ? 'border-purple-600 text-purple-600 dark:text-purple-400'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'"
        >
            {% if tab.icon %}
            <span x-html="$icon('{{ tab.icon }}', 'w-4 h-4 inline mr-2')"></span>
            {% endif %}
            {{ tab.label }}
        </button>
        {% endfor %}
    </nav>
</div>
{% endmacro %}