{% comment %}
Status Badge Component
======================

A unified, reusable status badge component for parks, rides, and other entities.

Purpose:
    Displays a status badge with consistent styling across the application.
    Supports both static display and interactive HTMX-powered refresh.

Usage Examples:
    Basic badge (uses park_tags for config):
        {% include 'components/status_badge.html' with status='OPERATING' %}

    Clickable badge:
        {% include 'components/status_badge.html' with status='OPERATING' clickable=True %}

    Interactive badge with HTMX (for moderators):
        {% include 'components/status_badge.html' with status=park.status badge_id='park-header-badge' refresh_url=park_badge_url refresh_trigger='park-status-changed' scroll_target='park-status-section' can_edit=perms.parks.change_park %}

    Manual status display (without park_tags config lookup):
        {% include 'components/status_badge.html' with status=obj.status status_display=obj.get_status_display manual_mode=True %}

    Manual mode with custom classes:
        {% include 'components/status_badge.html' with status=obj.status status_display=obj.get_status_display status_classes='bg-blue-100 text-blue-800' manual_mode=True %}

Parameters:
    Required:
    - status: The status value (e.g., 'OPERATING', 'CLOSED_TEMP')

    Optional (auto mode - uses park_tags):
    - clickable: Enable click interactions (default: False)

    Optional (HTMX mode):
    - badge_id: ID for HTMX targeting
    - refresh_url: URL for HTMX refresh on trigger
    - refresh_trigger: HTMX trigger event name (e.g., 'park-status-changed')
    - scroll_target: Element ID to scroll to on click
    - can_edit: Whether user can edit/click the badge (default: False)

    Optional (manual mode):
    - manual_mode: Use status_display instead of park_tags config lookup (default: False)
    - status_display: Human-readable status text (used when manual_mode=True)
    - status_classes: CSS classes for badge styling (default: 'bg-gray-100 text-gray-800')

    Optional (styling):
    - size: Size variant 'sm', 'md', 'lg' (default: 'md')

Status Classes (auto mode - defined in park_tags):
    - OPERATING: Green (bg-green-100 text-green-800)
    - CLOSED_TEMP: Yellow (bg-yellow-100 text-yellow-800)
    - CLOSED_PERM: Red (bg-red-100 text-red-800)
    - CONSTRUCTION: Orange (bg-orange-100 text-orange-800)
    - DEMOLISHED: Gray (bg-gray-100 text-gray-800)
    - RELOCATED: Purple (bg-purple-100 text-purple-800)
    - SBNO: Amber (bg-amber-100 text-amber-800)

Dependencies:
    - park_tags template tags (for get_status_config filter, only needed in auto mode)
    - HTMX (optional, for interactive features)
    - Font Awesome icons (for dropdown indicator)

Accessibility:
    - Uses semantic button or span based on interactivity
    - Provides appropriate focus states
    - Uses color + text for status indication
{% endcomment %}

{% load park_tags %}

{# Determine sizing classes #}
{% with size=size|default:'md' %}
{% if size == 'sm' %}
    {% with size_classes='px-2 py-0.5 text-xs' icon_size='h-1.5 w-1.5' %}
        {% include 'components/status_badge_inner.html' %}
    {% endwith %}
{% elif size == 'lg' %}
    {% with size_classes='px-4 py-1.5 text-sm' icon_size='h-2.5 w-2.5' %}
        {% include 'components/status_badge_inner.html' %}
    {% endwith %}
{% else %}
    {% with size_classes='px-2.5 py-0.5 text-xs' icon_size='h-2 w-2' %}
        {% include 'components/status_badge_inner.html' %}
    {% endwith %}
{% endif %}
{% endwith %}