{% comment %}
HTMX Loading Indicator Component
================================

A standardized loading indicator for HTMX requests.

Purpose:
    Provides consistent loading feedback during HTMX requests.
    Can be used inline, block, or as an overlay.

Usage Examples:
    Inline spinner (in button/link):
        <button hx-get="/api/data" hx-indicator="#btn-loading">
            Load Data
            {% include 'htmx/components/loading_indicator.html' with id='btn-loading' inline=True size='sm' %}
        </button>

    Block indicator (below content):
        <div hx-get="/api/list" hx-indicator="#list-loading">
            Content here
        </div>
        {% include 'htmx/components/loading_indicator.html' with id='list-loading' message='Loading items...' %}

    Overlay indicator (covers container):
        <div class="relative" hx-get="/api/data" hx-indicator="#overlay-loading">
            Content to cover
            {% include 'htmx/components/loading_indicator.html' with id='overlay-loading' mode='overlay' %}
        </div>

    Custom spinner:
        {% include 'htmx/components/loading_indicator.html' with id='custom-loading' spinner='border' %}

Parameters:
    Optional:
    - id: Unique identifier for the indicator (used with hx-indicator)
    - message: Loading text to display (default: 'Loading...')
    - mode: 'inline', 'block', or 'overlay' (default: 'block')
    - inline: Shortcut for mode='inline' (backwards compatible)
    - size: 'sm', 'md', 'lg' (default: 'md')
    - spinner: 'spin' (fa-spinner) or 'border' (CSS animation) (default: 'border')

Dependencies:
    - HTMX for .htmx-indicator class behavior
    - Tailwind CSS for styling
    - Font Awesome icons (for 'spin' spinner)

Accessibility:
    - Uses role="status" and aria-live="polite" for screen readers
    - aria-hidden while not loading (HTMX handles visibility)
    - Loading message announced to screen readers
{% endcomment %}

{# Support both 'inline' param and 'mode' param #}
{# Priority: explicit mode > inline shortcut > default to 'block' #}
{# Determine actual_mode: use mode if provided, else if inline is true use 'inline', else default to 'block' #}

{% if mode == 'overlay' %}
{# ============================================
   Overlay Mode - Covers parent element
   Parent must have position: relative
   ============================================ #}
<div class="htmx-indicator absolute inset-0 flex items-center justify-center bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm z-10 rounded-lg"
     {% if id %}id="{{ id }}"{% endif %}
     role="status"
     aria-live="polite">
    <div class="flex flex-col items-center gap-3">
        {# Spinner #}
        {% if spinner == 'spin' %}
        <i class="fas fa-spinner fa-spin {% if size == 'sm' %}text-xl{% elif size == 'lg' %}text-5xl{% else %}text-3xl{% endif %} text-blue-500"
           aria-hidden="true"></i>
        {% else %}
        <div class="{% if size == 'sm' %}w-6 h-6 border-3{% elif size == 'lg' %}w-12 h-12 border-4{% else %}w-8 h-8 border-4{% endif %} border-blue-500 rounded-full animate-spin border-t-transparent"
             aria-hidden="true"></div>
        {% endif %}
        {# Message #}
        <span class="{% if size == 'sm' %}text-sm{% elif size == 'lg' %}text-lg{% else %}text-base{% endif %} font-medium text-gray-700 dark:text-gray-300">
            {{ message|default:"Loading..." }}
        </span>
    </div>
</div>

{% elif mode == 'inline' or inline %}
{# ============================================
   Inline Mode - For use within buttons/links
   ============================================ #}
<span class="htmx-indicator inline-flex items-center gap-2"
      {% if id %}id="{{ id }}"{% endif %}
      role="status"
      aria-live="polite">
    {% if spinner == 'spin' or spinner == '' %}
    <i class="fas fa-spinner fa-spin {% if size == 'sm' %}text-sm{% elif size == 'lg' %}text-lg{% endif %} text-blue-500"
       aria-hidden="true"></i>
    {% else %}
    <div class="{% if size == 'sm' %}w-4 h-4 border-2{% elif size == 'lg' %}w-6 h-6 border-3{% else %}w-5 h-5 border-2{% endif %} border-current rounded-full animate-spin border-t-transparent"
         aria-hidden="true"></div>
    {% endif %}
    {% if message %}<span class="text-gray-500 dark:text-gray-400">{{ message }}</span>{% endif %}
    {% if not message %}<span class="sr-only">Loading...</span>{% endif %}
</span>

{% else %}
{# ============================================
   Block Mode (default) - Centered block
   ============================================ #}
<div class="htmx-indicator flex items-center justify-center {% if size == 'sm' %}p-2{% elif size == 'lg' %}p-6{% else %}p-4{% endif %}"
     {% if id %}id="{{ id }}"{% endif %}
     role="status"
     aria-live="polite">
    <div class="flex items-center gap-3">
        {# Spinner #}
        {% if spinner == 'spin' %}
        <i class="fas fa-spinner fa-spin {% if size == 'sm' %}text-lg{% elif size == 'lg' %}text-3xl{% else %}text-2xl{% endif %} text-blue-500"
           aria-hidden="true"></i>
        {% else %}
        <div class="{% if size == 'sm' %}w-5 h-5 border-3{% elif size == 'lg' %}w-10 h-10 border-4{% else %}w-8 h-8 border-4{% endif %} border-blue-500 rounded-full animate-spin border-t-transparent"
             aria-hidden="true"></div>
        {% endif %}
        {# Message #}
        <span class="{% if size == 'sm' %}text-sm{% elif size == 'lg' %}text-lg{% else %}text-base{% endif %} text-gray-600 dark:text-gray-300">
            {{ message|default:"Loading..." }}
        </span>
    </div>
</div>
{% endif %}
