{# Inner status badge template - do not use directly, use status_badge.html instead #}
{# This template expects: status, size_classes, icon_size, and optionally other params #}

{# When manual_mode is true, use provided status_display and default classes #}
{# Otherwise use get_status_config filter from park_tags #}

{# Wrapper with optional HTMX refresh #}
{% if badge_id %}
<span id="{{ badge_id }}"
      {% if refresh_url and refresh_trigger %}
      hx-get="{{ refresh_url }}"
      hx-trigger="{{ refresh_trigger }} from:body"
      hx-swap="outerHTML"
      {% endif %}>
{% endif %}

{% if manual_mode %}
    {# Manual mode: use provided status_display and derive classes from status value #}
    {% with badge_label=status_display|default:status badge_classes=status_classes|default:'bg-gray-100 text-gray-800' show_icon=True %}
    {% if can_edit and scroll_target %}
        <button type="button"
                onclick="document.getElementById('{{ scroll_target }}').scrollIntoView({behavior: 'smooth'})"
                class="status-badge inline-flex items-center {{ size_classes }} rounded-full font-medium transition-all hover:ring-2 hover:ring-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 cursor-pointer {{ badge_classes }}"
                aria-label="View status options for {{ badge_label }}">
            {% if show_icon %}
            <svg class="-ml-0.5 mr-1.5 {{ icon_size }}" fill="currentColor" viewBox="0 0 8 8" aria-hidden="true">
                <circle cx="4" cy="4" r="3" />
            </svg>
            {% endif %}
            {{ badge_label }}
            <i class="fas fa-chevron-down ml-1.5 text-xs" aria-hidden="true"></i>
        </button>
    {% elif clickable %}
        <span class="status-badge inline-flex items-center {{ size_classes }} rounded-full font-medium transition-all hover:ring-2 hover:ring-blue-500 cursor-pointer {{ badge_classes }}"
              role="button"
              tabindex="0">
            {% if show_icon %}
            <svg class="-ml-0.5 mr-1.5 {{ icon_size }}" fill="currentColor" viewBox="0 0 8 8" aria-hidden="true">
                <circle cx="4" cy="4" r="3" />
            </svg>
            {% endif %}
            {{ badge_label }}
            <i class="fas fa-chevron-down ml-1.5 text-xs" aria-hidden="true"></i>
        </span>
    {% else %}
        <span class="status-badge inline-flex items-center {{ size_classes }} rounded-full font-medium {{ badge_classes }}">
            {% if show_icon %}
            <svg class="-ml-0.5 mr-1.5 {{ icon_size }}" fill="currentColor" viewBox="0 0 8 8" aria-hidden="true">
                <circle cx="4" cy="4" r="3" />
            </svg>
            {% endif %}
            {{ badge_label }}
        </span>
    {% endif %}
    {% endwith %}
{% else %}
    {# Auto mode: use get_status_config filter from park_tags #}
    {% with status_config=status|get_status_config %}
    {% if can_edit and scroll_target %}
        <button type="button"
                onclick="document.getElementById('{{ scroll_target }}').scrollIntoView({behavior: 'smooth'})"
                class="status-badge inline-flex items-center {{ size_classes }} rounded-full font-medium transition-all hover:ring-2 hover:ring-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 cursor-pointer {{ status_config.classes }}"
                aria-label="View status options for {{ status_config.label }}">
            {% if status_config.icon %}
            <svg class="-ml-0.5 mr-1.5 {{ icon_size }}" fill="currentColor" viewBox="0 0 8 8" aria-hidden="true">
                <circle cx="4" cy="4" r="3" />
            </svg>
            {% endif %}
            {{ status_config.label }}
            <i class="fas fa-chevron-down ml-1.5 text-xs" aria-hidden="true"></i>
        </button>
    {% elif clickable %}
        <span class="status-badge inline-flex items-center {{ size_classes }} rounded-full font-medium transition-all hover:ring-2 hover:ring-blue-500 cursor-pointer {{ status_config.classes }}"
              role="button"
              tabindex="0">
            {% if status_config.icon %}
            <svg class="-ml-0.5 mr-1.5 {{ icon_size }}" fill="currentColor" viewBox="0 0 8 8" aria-hidden="true">
                <circle cx="4" cy="4" r="3" />
            </svg>
            {% endif %}
            {{ status_config.label }}
            <i class="fas fa-chevron-down ml-1.5 text-xs" aria-hidden="true"></i>
        </span>
    {% else %}
        <span class="status-badge inline-flex items-center {{ size_classes }} rounded-full font-medium {{ status_config.classes }}">
            {% if status_config.icon %}
            <svg class="-ml-0.5 mr-1.5 {{ icon_size }}" fill="currentColor" viewBox="0 0 8 8" aria-hidden="true">
                <circle cx="4" cy="4" r="3" />
            </svg>
            {% endif %}
            {{ status_config.label }}
        </span>
    {% endif %}
    {% endwith %}
{% endif %}

{% if badge_id %}
</span>
{% endif %}