thrillwiki_django_no_react/backend/templates/components/ui/action_bar.html

{% comment %}
Action Bar Component
====================

Standardized container for action buttons with consistent layout and spacing.

Purpose:
    Provides a consistent action button container for page headers, card footers,
    and section actions with responsive layout.

Usage Examples:
    Basic action bar:
        {% include 'components/ui/action_bar.html' %}
            {% block actions %}
                <a href="{% url 'item:edit' %}" class="btn btn-primary">Edit</a>
            {% endblock %}
        {% endinclude %}

    With primary and secondary actions:
        {% include 'components/ui/action_bar.html' with
            primary_action_url='/create/'
            primary_action_text='Create Park'
            primary_action_icon='fas fa-plus'
            secondary_action_url='/import/'
            secondary_action_text='Import'
        %}

    Between alignment (cancel left, submit right):
        {% include 'components/ui/action_bar.html' with align='between' %}

    Multiple actions via slot:
        {% include 'components/ui/action_bar.html' %}
            {% block actions %}
                <button class="btn btn-ghost">Preview</button>
                <button class="btn btn-outline">Save Draft</button>
                <button class="btn btn-primary">Publish</button>
            {% endblock %}
        {% endinclude %}

Parameters:
    Optional:
    - align: 'left', 'right', 'center', 'between' (default: 'right')
    - mobile_stack: Stack vertically on mobile (default: True)
    - show_border: Show top border (default: False)
    - padding: Add padding (default: True)

    Primary action:
    - primary_action_url: URL for primary button
    - primary_action_text: Primary button text
    - primary_action_icon: Primary button icon class
    - primary_action_class: Primary button CSS class (default: 'btn-primary')

    Secondary action:
    - secondary_action_url: URL for secondary button
    - secondary_action_text: Secondary button text
    - secondary_action_icon: Secondary button icon class
    - secondary_action_class: Secondary button CSS class (default: 'btn-outline')

    Tertiary action:
    - tertiary_action_url: URL for tertiary button
    - tertiary_action_text: Tertiary button text
    - tertiary_action_class: Tertiary button CSS class (default: 'btn-ghost')

Blocks:
    - actions: Custom action buttons slot

Dependencies:
    - Tailwind CSS for styling
    - Font Awesome icons (optional)
    - Button component styles from components.css

Accessibility:
    - Uses proper button/link semantics
    - Focus states for keyboard navigation
{% endcomment %}

{% with align=align|default:'right' mobile_stack=mobile_stack|default:True show_border=show_border|default:False padding=padding|default:True %}

<div class="action-bar flex flex-wrap items-center gap-3
            {% if mobile_stack %}flex-col sm:flex-row{% endif %}
            {% if padding %}py-4{% endif %}
            {% if show_border %}pt-4 border-t border-border{% endif %}
            {% if align == 'left' %}justify-start
            {% elif align == 'center' %}justify-center
            {% elif align == 'between' %}justify-between
            {% else %}justify-end{% endif %}">

    {# Left side actions (for 'between' alignment) #}
    {% if align == 'between' %}
    <div class="flex items-center gap-3 {% if mobile_stack %}w-full sm:w-auto{% endif %}">
        {# Tertiary action (left side) #}
        {% if tertiary_action_url or tertiary_action_text %}
        {% if tertiary_action_url %}
        <a href="{{ tertiary_action_url }}"
           class="{{ tertiary_action_class|default:'btn btn-ghost' }} {% if mobile_stack %}w-full sm:w-auto{% endif %}">
            {% if tertiary_action_icon %}<i class="{{ tertiary_action_icon }} mr-2" aria-hidden="true"></i>{% endif %}
            {{ tertiary_action_text }}
        </a>
        {% else %}
        <button type="button"
                class="{{ tertiary_action_class|default:'btn btn-ghost' }} {% if mobile_stack %}w-full sm:w-auto{% endif %}"
                onclick="history.back()">
            {% if tertiary_action_icon %}<i class="{{ tertiary_action_icon }} mr-2" aria-hidden="true"></i>{% endif %}
            {{ tertiary_action_text|default:'Cancel' }}
        </button>
        {% endif %}
        {% endif %}
    </div>
    {% endif %}

    {# Main actions group #}
    <div class="flex items-center gap-3 {% if mobile_stack %}w-full sm:w-auto {% if align == 'between' %}justify-end{% endif %}{% endif %}">
        {# Custom actions slot #}
        {% block actions %}{% endblock %}

        {# Tertiary action (non-between alignment) #}
        {% if tertiary_action_text and align != 'between' %}
        {% if tertiary_action_url %}
        <a href="{{ tertiary_action_url }}"
           class="{{ tertiary_action_class|default:'btn btn-ghost' }} {% if mobile_stack %}w-full sm:w-auto{% endif %}">
            {% if tertiary_action_icon %}<i class="{{ tertiary_action_icon }} mr-2" aria-hidden="true"></i>{% endif %}
            {{ tertiary_action_text }}
        </a>
        {% else %}
        <button type="button"
                class="{{ tertiary_action_class|default:'btn btn-ghost' }} {% if mobile_stack %}w-full sm:w-auto{% endif %}">
            {% if tertiary_action_icon %}<i class="{{ tertiary_action_icon }} mr-2" aria-hidden="true"></i>{% endif %}
            {{ tertiary_action_text }}
        </button>
        {% endif %}
        {% endif %}

        {# Secondary action #}
        {% if secondary_action_text %}
        {% if secondary_action_url %}
        <a href="{{ secondary_action_url }}"
           class="{{ secondary_action_class|default:'btn btn-outline' }} {% if mobile_stack %}w-full sm:w-auto{% endif %}">
            {% if secondary_action_icon %}<i class="{{ secondary_action_icon }} mr-2" aria-hidden="true"></i>{% endif %}
            {{ secondary_action_text }}
        </a>
        {% else %}
        <button type="button"
                class="{{ secondary_action_class|default:'btn btn-outline' }} {% if mobile_stack %}w-full sm:w-auto{% endif %}">
            {% if secondary_action_icon %}<i class="{{ secondary_action_icon }} mr-2" aria-hidden="true"></i>{% endif %}
            {{ secondary_action_text }}
        </button>
        {% endif %}
        {% endif %}

        {# Primary action #}
        {% if primary_action_text %}
        {% if primary_action_url %}
        <a href="{{ primary_action_url }}"
           class="{{ primary_action_class|default:'btn btn-primary' }} {% if mobile_stack %}w-full sm:w-auto{% endif %}">
            {% if primary_action_icon %}<i class="{{ primary_action_icon }} mr-2" aria-hidden="true"></i>{% endif %}
            {{ primary_action_text }}
        </a>
        {% else %}
        <button type="submit"
                class="{{ primary_action_class|default:'btn btn-primary' }} {% if mobile_stack %}w-full sm:w-auto{% endif %}">
            {% if primary_action_icon %}<i class="{{ primary_action_icon }} mr-2" aria-hidden="true"></i>{% endif %}
            {{ primary_action_text }}
        </button>
        {% endif %}
        {% endif %}
    </div>
</div>

{% endwith %}