{#
  BPJudge UI Contract v1 macros.

  Import with:
    {% import "components/ui/v1.html" as ui_v1 %}

  Do not use `ui` as the alias: Hydro exposes its navigation registry through
  that global template name, and shadowing it breaks shared layout rendering.

  Text is escaped by the template environment. Translate user-facing copy at
  the call site so these primitives remain independent from business logic.
#}

{% macro help(text, label='使用说明') -%}
<span data-ui-help="{{ label }}">{{ text }}</span>
{%- endmacro %}

{% macro badge(text, tone='neutral', extra_class='') -%}
<span class="ui-badge ui-badge--{{ tone }}{% if extra_class %} {{ extra_class }}{% endif %}">{{ text }}</span>
{%- endmacro %}

{% macro category_label(text, category=0) -%}
{% set category = category if category in [0, 1, 2, 3, 4, 5, 6, 7, 8] else 0 -%}
<span class="ui-category-label ui-category-label--{{ category }}">{{ text }}</span>
{%- endmacro %}

{% macro stat(value, label, detail=none, extra_class='') -%}
<div class="ui-stat{% if extra_class %} {{ extra_class }}{% endif %}">
  <div class="ui-stat__value">{{ value }}</div>
  <div class="ui-stat__label">{{ label }}</div>
  {% if detail %}<div class="ui-stat__detail">{{ detail }}</div>{% endif %}
</div>
{%- endmacro %}

{% macro empty_state(title, description=none, icon_class=none, extra_class='') -%}
<div class="ui-empty-state{% if extra_class %} {{ extra_class }}{% endif %}">
  {% if icon_class %}<div class="ui-empty-state__icon"><span class="{{ icon_class }}" aria-hidden="true"></span></div>{% endif %}
  <div class="ui-empty-state__title">{{ title }}</div>
  {% if description %}<div class="ui-empty-state__description">{{ description }}</div>{% endif %}
  {% if caller %}<div class="ui-empty-state__actions">{{ caller() }}</div>{% endif %}
</div>
{%- endmacro %}

{% macro panel(title=none, description=none, extra_class='', body_class='') -%}
<section class="ui-panel{% if extra_class %} {{ extra_class }}{% endif %}">
  {% if title or description %}
  <header class="ui-panel__header">
    {% if title %}<h2 class="ui-panel__title">{{ title }}</h2>{% endif %}
    {% if description %}<div class="ui-panel__description">{{ description }}</div>{% endif %}
  </header>
  {% endif %}
  <div class="ui-panel__body{% if body_class %} {{ body_class }}{% endif %}">{% if caller %}{{ caller() }}{% endif %}</div>
</section>
{%- endmacro %}

{% macro page_header(title, description=none, extra_class='') -%}
<header class="ui-hero{% if extra_class %} {{ extra_class }}{% endif %}">
  <div class="ui-hero__content">
    <h1 class="ui-hero__title">{{ title }}</h1>
    {% if description %}<div class="ui-hero__description">{{ description }}</div>{% endif %}
  </div>
  {% if caller %}<div class="ui-hero__actions">{{ caller() }}</div>{% endif %}
</header>
{%- endmacro %}

{% macro alert(title, description=none, tone='neutral', extra_class='') -%}
<div class="ui-alert ui-alert--{{ tone }}{% if extra_class %} {{ extra_class }}{% endif %}" role="status">
  <div class="ui-alert__title">{{ title }}</div>
  {% if description %}<div class="ui-alert__body">{{ description }}</div>{% endif %}
</div>
{%- endmacro %}

{% macro sortable_handle(label, described_by=none, enabled=true, extra_class='') -%}
<button type="button" class="ui-sortable-list__handle{% if extra_class %} {{ extra_class }}{% endif %}" draggable="{% if enabled %}true{% else %}false{% endif %}" data-ui-sortable-handle="true" aria-label="{{ label }}"{% if described_by %} aria-describedby="{{ described_by }}"{% endif %}{% if not enabled %} disabled{% endif %}>
  <span class="ui-sortable-list__handle-visual" aria-hidden="true">⠿</span>
</button>
{%- endmacro %}

{% macro sortable_index(value, label=none, extra_class='') -%}
<span class="ui-sortable-list__index{% if extra_class %} {{ extra_class }}{% endif %}" data-ui-sortable-index="true"{% if label %} aria-label="{{ label }}"{% endif %}>{{ value }}</span>
{%- endmacro %}

{% macro sortable_action(text, label, action=none, disabled=false, href=none, button_type='button', name=none, value=none, icon_class=none, tone='neutral', extra_class='') -%}
{% if href and disabled %}
<span class="ui-sortable-list__action{% if tone == 'danger' %} ui-sortable-list__action--danger{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}" aria-label="{{ label }}" aria-disabled="true"{% if action %} data-ui-sortable-action="{{ action }}"{% endif %}>
{% elif href %}
<a class="ui-sortable-list__action{% if tone == 'danger' %} ui-sortable-list__action--danger{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}" href="{{ href }}" aria-label="{{ label }}"{% if action %} data-ui-sortable-action="{{ action }}"{% endif %}>
{% else %}
<button type="{% if button_type == 'submit' %}submit{% else %}button{% endif %}" class="ui-sortable-list__action{% if tone == 'danger' %} ui-sortable-list__action--danger{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}" aria-label="{{ label }}"{% if action %} data-ui-sortable-action="{{ action }}"{% endif %}{% if name %} name="{{ name }}"{% endif %}{% if value is not none %} value="{{ value }}"{% endif %}{% if disabled %} disabled{% endif %}>
{% endif %}
  <span class="ui-sortable-list__action-visual{% if icon_class %} ui-sortable-list__action-visual--icon{% endif %}" aria-hidden="true">{% if icon_class %}<span class="{{ icon_class }}" aria-hidden="true"></span>{% else %}{{ text }}{% endif %}</span>
{% if href and disabled %}</span>{% elif href %}</a>{% else %}</button>{% endif %}
{%- endmacro %}