thrillwiki_django_no_react/backend/templates/components/layout/page_header.html

{% comment %}
Page Header Component
=====================

Standardized page header with title, subtitle, icon, and action buttons.

Purpose:
    Provides consistent page header layout across the application with
    responsive design and optional breadcrumb integration.

Usage Examples:
    Basic header:
        {% include 'components/layout/page_header.html' with title='Parks' %}

    With subtitle:
        {% include 'components/layout/page_header.html' with title='Cedar Point' subtitle='Sandusky, Ohio' %}

    With icon:
        {% include 'components/layout/page_header.html' with title='Parks' icon='fas fa-map-marker-alt' %}

    With actions:
        {% include 'components/layout/page_header.html' with title='Parks' %}
            {% block page_header_actions %}
                <a href="{% url 'parks:create' %}" class="btn btn-primary">
                    <i class="fas fa-plus mr-2"></i>Add Park
                </a>
            {% endblock %}
        {% endinclude %}

    Full example:
        {% include 'components/layout/page_header.html' with
            title=park.name
            subtitle=park.location
            icon='fas fa-building'
            show_breadcrumbs=True
            badge_text='Active'
            badge_variant='success'
        %}

Parameters:
    Required:
    - title: Page title text

    Optional:
    - subtitle: Subtitle or description
    - icon: Icon class (e.g., 'fas fa-home')
    - show_breadcrumbs: Include breadcrumbs (default: False)
    - badge_text: Status badge text
    - badge_variant: 'success', 'warning', 'error', 'info' (default: 'info')
    - size: 'sm', 'md', 'lg' for title size (default: 'lg')
    - align: 'left', 'center' (default: 'left')
    - border: Show bottom border (default: True)
    - actions_slot: HTML for action buttons

Blocks:
    - page_header_actions: Action buttons area

Dependencies:
    - Tailwind CSS for styling
    - Font Awesome icons (optional)
    - breadcrumbs.html component (if show_breadcrumbs=True)

Accessibility:
    - Uses semantic heading element
    - Actions have proper button semantics
{% endcomment %}

{% with size=size|default:'lg' align=align|default:'left' border=border|default:True show_breadcrumbs=show_breadcrumbs|default:False %}

<header class="page-header mb-6 {% if border %}pb-6 border-b border-border{% endif %}">
    {# Breadcrumbs (optional) #}
    {% if show_breadcrumbs and breadcrumbs %}
    <div class="mb-4">
        {% include 'components/navigation/breadcrumbs.html' %}
    </div>
    {% endif %}

    <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between {% if align == 'center' %}sm:justify-center text-center{% endif %}">
        {# Title Section #}
        <div class="flex-1 min-w-0 {% if align == 'center' %}flex flex-col items-center{% endif %}">
            <div class="flex items-center gap-3 {% if align == 'center' %}justify-center{% endif %}">
                {# Icon #}
                {% if icon %}
                <div class="flex-shrink-0 w-10 h-10 sm:w-12 sm:h-12 rounded-lg bg-primary/10 flex items-center justify-center">
                    <i class="{{ icon }} text-primary {% if size == 'sm' %}text-lg{% elif size == 'lg' %}text-xl sm:text-2xl{% else %}text-xl{% endif %}" aria-hidden="true"></i>
                </div>
                {% endif %}

                {# Title and Subtitle #}
                <div class="min-w-0">
                    <div class="flex items-center gap-3 flex-wrap">
                        <h1 class="font-bold text-foreground truncate
                                   {% if size == 'sm' %}text-xl sm:text-2xl
                                   {% elif size == 'lg' %}text-2xl sm:text-3xl lg:text-4xl
                                   {% else %}text-2xl sm:text-3xl{% endif %}">
                            {{ title }}
                        </h1>

                        {# Status Badge #}
                        {% if badge_text %}
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                     {% if badge_variant == 'success' %}bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300
                                     {% elif badge_variant == 'warning' %}bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300
                                     {% elif badge_variant == 'error' %}bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300
                                     {% else %}bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300{% endif %}">
                            {{ badge_text }}
                        </span>
                        {% endif %}
                    </div>

                    {# Subtitle #}
                    {% if subtitle %}
                    <p class="mt-1 text-muted-foreground truncate
                              {% if size == 'sm' %}text-sm{% elif size == 'lg' %}text-base sm:text-lg{% else %}text-base{% endif %}">
                        {{ subtitle }}
                    </p>
                    {% endif %}

                    {# Meta info slot #}
                    {% if meta %}
                    <div class="mt-2 flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
                        {{ meta }}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        {# Actions Section #}
        {% if actions_slot or block.page_header_actions %}
        <div class="flex-shrink-0 flex flex-wrap items-center gap-3 {% if align == 'center' %}justify-center{% else %}sm:justify-end{% endif %}">
            {% if actions_slot %}
                {{ actions_slot }}
            {% endif %}
            {% block page_header_actions %}{% endblock %}
        </div>
        {% endif %}
    </div>
</header>

{% endwith %}