{#
Badge component for status and type indicators.

Usage:
    {% from "components/badge.html" import badge, status_badge, type_badge %}

    {{ badge("Active", "green") }}
    {{ status_badge("completed") }}
    {{ type_badge("EFFECT") }}
#}

{% macro badge(text, color="gray", class="") %}
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-{{ color }}-600/20 text-{{ color }}-400 {{ class }}">
    {{ text }}
</span>
{% endmacro %}

{% macro status_badge(status, class="") %}
{% set colors = {
    "completed": "green",
    "cached": "blue",
    "running": "yellow",
    "pending": "gray",
    "failed": "red",
    "active": "green",
    "inactive": "gray",
} %}
{% set color = colors.get(status, "gray") %}
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-{{ color }}-600/20 text-{{ color }}-400 {{ class }}">
    {% if status == "running" %}
    <svg class="animate-spin -ml-0.5 mr-1.5 h-3 w-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
    </svg>
    {% endif %}
    {{ status | capitalize }}
</span>
{% endmacro %}

{% macro type_badge(node_type, class="") %}
{% set colors = {
    "SOURCE": "blue",
    "EFFECT": "green",
    "OUTPUT": "purple",
    "ANALYSIS": "amber",
    "_LIST": "indigo",
} %}
{% set color = colors.get(node_type, "gray") %}
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-{{ color }}-600/20 text-{{ color }}-400 {{ class }}">
    {{ node_type }}
</span>
{% endmacro %}

{% macro role_badge(role, class="") %}
{% set colors = {
    "input": "blue",
    "output": "purple",
    "intermediate": "gray",
} %}
{% set color = colors.get(role, "gray") %}
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-{{ color }}-600/20 text-{{ color }}-400 {{ class }}">
    {{ role | capitalize }}
</span>
{% endmacro %}