{% comment %}
Statistics Card Component
=========================

A reusable card component for displaying statistics and metrics.

Purpose:
    Renders a consistent statistics card with label, value, optional icon,
    and optional link. Used for displaying metrics on detail pages.

Usage Examples:
    Basic stat:
        {% include 'components/stats_card.html' with label='Total Rides' value=park.ride_count %}

    Stat with icon:
        {% include 'components/stats_card.html' with label='Rating' value='4.5/5' icon='fas fa-star' %}

    Clickable stat:
        {% include 'components/stats_card.html' with label='Total Rides' value=42 link=rides_url %}

    Priority stat (highlighted):
        {% include 'components/stats_card.html' with label='Operator' value=park.operator.name priority=True %}

    Stat with subtitle:
        {% include 'components/stats_card.html' with label='Height' value='250 ft' subtitle='76 meters' %}

Parameters:
    Required:
    - label: Stat label/title
    - value: Stat value to display

    Optional:
    - icon: Font Awesome icon class (e.g., 'fas fa-star')
    - link: URL to link to (makes card clickable)
    - subtitle: Secondary text below value
    - priority: Boolean to highlight as priority card (default: False)
    - size: Size variant 'sm', 'md', 'lg' (default: 'md')
    - value_class: Additional CSS classes for value

Dependencies:
    - Tailwind CSS for styling
    - Font Awesome icons (optional)

Accessibility:
    - Uses semantic dt/dd structure for label/value
    - Clickable cards use proper link semantics
    - Priority cards use visual emphasis, not just color
{% endcomment %}

{% with priority=priority|default:False size=size|default:'md' %}

{% if link %}
<a href="{{ link }}"
   class="block bg-white rounded-lg shadow-lg dark:bg-gray-800 p-compact card-stats transition-transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-blue-500 {% if priority %}card-stats-priority{% endif %}">
{% else %}
<div class="bg-white rounded-lg shadow-lg dark:bg-gray-800 p-compact card-stats {% if priority %}card-stats-priority{% endif %}">
{% endif %}

    <div class="text-center">
        {# Label #}
        <dt class="{% if size == 'sm' %}text-xs{% elif size == 'lg' %}text-base{% else %}text-sm{% endif %} font-semibold text-gray-900 dark:text-white">
            {% if icon %}
            <i class="{{ icon }} mr-1 text-gray-500 dark:text-gray-400" aria-hidden="true"></i>
            {% endif %}
            {{ label }}
        </dt>

        {# Value #}
        <dd class="mt-1 {% if size == 'sm' %}text-lg{% elif size == 'lg' %}text-3xl{% else %}text-2xl{% endif %} font-bold text-sky-900 dark:text-sky-400 {{ value_class }}{% if link %} hover:text-sky-800 dark:hover:text-sky-300{% endif %}">
            {{ value|default:"N/A" }}
        </dd>

        {# Subtitle (optional) #}
        {% if subtitle %}
        <dd class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
            {{ subtitle }}
        </dd>
        {% endif %}
    </div>

{% if link %}
</a>
{% else %}
</div>
{% endif %}

{% endwith %}