{% comment %}
Form Actions Component
======================

Renders form submit and cancel buttons with consistent styling.

Purpose:
    Provides a standardized form actions section with submit button,
    optional cancel button, and loading state support.

Usage Examples:
    Basic submit:
        {% include 'forms/partials/form_actions.html' %}

    With cancel:
        {% include 'forms/partials/form_actions.html' with show_cancel=True cancel_url='/list/' %}

    Custom text:
        {% include 'forms/partials/form_actions.html' with submit_text='Save Changes' %}

    With loading state:
        {% include 'forms/partials/form_actions.html' with show_loading=True loading_id='submit-loading' %}

    Right-aligned (default):
        {% include 'forms/partials/form_actions.html' %}

    Left-aligned:
        {% include 'forms/partials/form_actions.html' with align='left' %}

    HTMX form:
        {% include 'forms/partials/form_actions.html' with hx_disable='true' %}

Parameters:
    Optional (submit):
    - submit_text: Submit button text (default: 'Save')
    - submit_class: CSS class (default: 'btn-primary')
    - submit_disabled: Disable submit button (default: False)
    - submit_icon: Icon class for submit button (e.g., 'fas fa-check')

    Optional (cancel):
    - show_cancel: Show cancel button (default: False)
    - cancel_url: URL for cancel link
    - cancel_text: Cancel button text (default: 'Cancel')
    - cancel_class: CSS class (default: 'btn-secondary')

    Optional (loading):
    - show_loading: Show loading indicator on submit (default: False)
    - loading_id: ID for htmx-indicator (default: 'submit-loading')

    Optional (layout):
    - align: 'left', 'right', 'center', 'between' (default: 'right')
    - show_border: Show top border (default: True)

    Optional (HTMX):
    - hx_disable: Add hx-disable on submit (default: False)

Dependencies:
    - Tailwind CSS
    - HTMX (optional, for loading states)
    - Font Awesome (optional, for icons)

Accessibility:
    - Submit button is properly typed
    - Loading state announced to screen readers
{% endcomment %}

{% with submit_text=submit_text|default:'Save' cancel_text=cancel_text|default:'Cancel' align=align|default:'right' show_border=show_border|default:True %}

<div class="form-actions flex items-center gap-3 mt-6
            {% if show_border %}pt-4 border-t border-gray-200 dark:border-gray-700{% endif %}
            {% if align == 'left' %}justify-start
            {% elif align == 'center' %}justify-center
            {% elif align == 'between' %}justify-between
            {% else %}justify-end{% endif %}">

    {# Cancel button (left side for 'between' alignment) #}
    {% if show_cancel and align == 'between' %}
        {% if cancel_url %}
        <a href="{{ cancel_url }}"
           class="{{ cancel_class|default:'btn-secondary' }}">
            {{ cancel_text }}
        </a>
        {% else %}
        <button type="button"
                class="{{ cancel_class|default:'btn-secondary' }}"
                onclick="history.back()">
            {{ cancel_text }}
        </button>
        {% endif %}
    {% endif %}

    {# Button group #}
    <div class="flex items-center gap-3">
        {# Cancel button (for non-between alignment) #}
        {% if show_cancel and align != 'between' %}
            {% if cancel_url %}
            <a href="{{ cancel_url }}"
               class="{{ cancel_class|default:'btn-secondary' }}">
                {{ cancel_text }}
            </a>
            {% else %}
            <button type="button"
                    class="{{ cancel_class|default:'btn-secondary' }}"
                    onclick="history.back()">
                {{ cancel_text }}
            </button>
            {% endif %}
        {% endif %}

        {# Submit button #}
        <button type="submit"
                class="{{ submit_class|default:'btn-primary' }} relative"
                {% if submit_disabled %}disabled{% endif %}
                {% if hx_disable %}hx-disable{% endif %}>
            {# Icon (optional) #}
            {% if submit_icon %}
            <i class="{{ submit_icon }} mr-2" aria-hidden="true"></i>
            {% endif %}

            {# Text #}
            <span>{{ submit_text }}</span>

            {# Loading indicator (optional) #}
            {% if show_loading %}
            <span id="{{ loading_id|default:'submit-loading' }}"
                  class="htmx-indicator ml-2">
                <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                <span class="sr-only">Submitting...</span>
            </span>
            {% endif %}
        </button>
    </div>
</div>

{% endwith %}
