orion/app/templates/shared/macros/headers.html

{#
  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 %}


{#
  Refresh Button
  ==============
  A button with loading state for refresh actions.

  Parameters:
    - loading_var: Alpine.js variable for loading state (default: 'loading')
    - onclick: Alpine.js click handler (default: 'refresh()')
    - label: Button label (default: 'Refresh')
    - loading_label: Label while loading (default: 'Loading...')
    - variant: 'primary' | 'secondary' (default: 'primary')
#}
{% macro refresh_button(loading_var='loading', onclick='refresh()', label='Refresh', loading_label='Loading...', variant='primary') %}
{% set variants = {
    'primary': 'text-white bg-purple-600 border-transparent hover:bg-purple-700 focus:shadow-outline-purple',
    'secondary': 'text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 focus:shadow-outline-gray'
} %}
<button
    @click="{{ onclick }}"
    :disabled="{{ loading_var }}"
    class="flex items-center px-4 py-2 text-sm font-medium leading-5 transition-colors duration-150 border rounded-lg focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed {{ variants[variant] }}"
>
    <span x-show="!{{ loading_var }}" x-html="$icon('refresh', 'w-4 h-4 mr-2')"></span>
    <span x-show="{{ loading_var }}" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
    <span x-text="{{ loading_var }} ? '{{ loading_label }}' : '{{ label }}'"></span>
</button>
{% endmacro %}


{#
  Action Button (with loading)
  ============================
  A generic action button with loading state.

  Parameters:
    - label: Button label
    - loading_label: Label while loading
    - loading_var: Alpine.js variable for loading state
    - onclick: Alpine.js click handler
    - icon: Button icon (default: 'check')
    - variant: 'primary' | 'secondary' | 'danger' (default: 'primary')
#}
{% macro action_button(label, loading_label, loading_var, onclick, icon='check', variant='primary') %}
{% set variants = {
    'primary': 'text-white bg-purple-600 border-transparent hover:bg-purple-700 focus:shadow-outline-purple',
    'secondary': 'text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 focus:shadow-outline-gray',
    'danger': 'text-white bg-red-600 border-transparent hover:bg-red-700 focus:shadow-outline-red'
} %}
<button
    @click="{{ onclick }}"
    :disabled="{{ loading_var }}"
    class="flex items-center px-4 py-2 text-sm font-medium leading-5 transition-colors duration-150 border rounded-lg focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed {{ variants[variant] }}"
>
    <span x-show="!{{ loading_var }}" x-html="$icon('{{ icon }}', 'w-4 h-4 mr-2')"></span>
    <span x-show="{{ loading_var }}" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
    <span x-text="{{ loading_var }} ? '{{ loading_label }}' : '{{ label }}'"></span>
</button>
{% endmacro %}


{#
  Back Button
  ===========
  A simple back navigation button.

  Parameters:
    - url: Back URL
    - label: Button label (default: 'Back')
#}
{% macro back_button(url, label='Back') %}
<a href="{{ 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>
    {{ label }}
</a>
{% endmacro %}


{#
  Page Header (Flexible)
  ======================
  A flexible page header that accepts custom content via caller().
  Use this when you need custom action buttons or dynamic content.

  Parameters:
    - title: Page title (static string)
    - title_var: Alpine.js variable for dynamic title (use instead of title)
    - subtitle: Page subtitle (static string)
    - subtitle_var: Alpine.js variable for dynamic subtitle
    - subtitle_show: Alpine.js condition for showing subtitle (e.g., 'user')

  Usage:
    {% call page_header_flex(title='Dashboard') %}
      {{ refresh_button() }}
    {% endcall %}

    {% call page_header_flex(title_var="user?.name || 'User'", subtitle_show='user') %}
      {{ back_button('/admin/users') }}
    {% endcall %}
#}
{% macro page_header_flex(title=none, title_var=none, subtitle=none, subtitle_var=none, subtitle_show=none) %}
<div class="flex items-center justify-between my-6">
    <div>
        {% if title_var %}
        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200" x-text="{{ title_var }}"></h2>
        {% else %}
        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">{{ title }}</h2>
        {% endif %}
        {% if subtitle_var %}
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1"{% if subtitle_show %} x-show="{{ subtitle_show }}"{% endif %} x-text="{{ subtitle_var }}"></p>
        {% elif subtitle %}
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1"{% if subtitle_show %} x-show="{{ subtitle_show }}"{% endif %}>{{ subtitle }}</p>
        {% endif %}
    </div>
    <div class="flex items-center space-x-3">
        {{ caller() }}
    </div>
</div>
{% endmacro %}


{#
  Page Header (with Refresh)
  ==========================
  A common pattern: static header with refresh button.

  Parameters:
    - title: Page title
    - subtitle: Page subtitle (optional)
    - loading_var: Alpine.js variable for loading state (default: 'loading')
    - refresh_action: Alpine.js refresh action (default: 'refresh()')
#}
{% macro page_header_refresh(title, subtitle=none, loading_var='loading', refresh_action='refresh()') %}
<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">
        {{ refresh_button(loading_var=loading_var, onclick=refresh_action) }}
    </div>
</div>
{% endmacro %}


{#
  Detail Page Header
  ==================
  Common pattern for detail pages with dynamic title and back button.

  Parameters:
    - title_var: Alpine.js expression for title (e.g., "user?.name || 'User Details'")
    - subtitle_template: Jinja template string for subtitle (rendered as-is)
    - subtitle_show: Alpine.js condition for showing subtitle
    - back_url: URL for back button
    - back_label: Back button label (default: 'Back')
#}
{% macro detail_page_header(title_var, back_url, subtitle_show=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 caller is defined %}
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1"{% if subtitle_show %} x-show="{{ subtitle_show }}"{% endif %}>
            {{ caller() }}
        </p>
        {% endif %}
    </div>
    {{ back_button(back_url, back_label) }}
</div>
{% endmacro %}


{#
  Edit Page Header
  ================
  Common pattern for edit pages with static title, dynamic subtitle, and back button.

  Parameters:
    - title: Static title (e.g., 'Edit Store')
    - subtitle_var: Alpine.js expression for subtitle parts
    - subtitle_show: Alpine.js condition for showing subtitle
    - back_url: URL for back button
    - back_label: Back button label (default: 'Back')
#}
{% macro edit_page_header(title, back_url, subtitle_show=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 caller is defined %}
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1"{% if subtitle_show %} x-show="{{ subtitle_show }}"{% endif %}>
            {{ caller() }}
        </p>
        {% endif %}
    </div>
    {{ back_button(back_url, back_label) }}
</div>
{% endmacro %}