{% macro status_badge(status) -%}
{% set styles = {
  'success': 'text-status-success bg-status-successBg border-status-success/30',
  'failed': 'text-status-failed bg-status-failedBg border-status-failed/30',
  'running': 'text-status-running bg-status-runningBg border-status-running/30',
  'pending': 'text-status-pending bg-status-pendingBg border-status-pending/30'
} %}
{% set labels = {'success':'Success','failed':'Failed','running':'Running','pending':'Pending'} %}
<span class="inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium {{ styles[status] }}">
  {% if status == 'running' %}
  <span class="relative flex h-1.5 w-1.5">
    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-status-running opacity-75"></span>
    <span class="relative inline-flex rounded-full h-1.5 w-1.5 bg-status-running"></span>
  </span>
  {% else %}
  <span class="h-1.5 w-1.5 rounded-full bg-current"></span>
  {% endif %}
  {{ labels[status] }}
</span>
{%- endmacro %}

{% macro filters_bar(range_options, current_range, statuses, current_statuses, base_url) -%}
<form method="get" action="{{ base_url }}" class="flex flex-wrap items-center gap-4" id="filters-form">
  <select name="range" onchange="document.getElementById('filters-form').submit()"
          class="bg-surface-panel border border-surface-border text-sm rounded-lg px-3 py-2 text-slate-200 focus:outline-none focus:ring-2 focus:ring-brand-600/50">
    {% for value, label in range_options %}
    <option value="{{ value }}" {% if value == current_range %}selected{% endif %}>{{ label }}</option>
    {% endfor %}
  </select>
  <div class="flex items-center gap-2">
    {% for s in statuses %}
      <label class="cursor-pointer transition-opacity {% if s in current_statuses %}opacity-100{% else %}opacity-40 hover:opacity-70{% endif %}">
        <input type="checkbox" name="status" value="{{ s }}" class="hidden"
               onchange="document.getElementById('filters-form').submit()"
               {% if s in current_statuses %}checked{% endif %}>
        {{ status_badge(s) }}
      </label>
    {% endfor %}
    {% if current_statuses %}
      <a href="{{ base_url }}?range={{ current_range }}" class="text-xs text-slate-500 hover:text-slate-300 underline underline-offset-2 ms-1">پاک کردن</a>
    {% endif %}
  </div>
</form>
{%- endmacro %}

{% macro runs_table(runs, show_flow=False) -%}
{% if runs|length == 0 %}
<div class="bg-surface-panel border border-surface-border rounded-xl px-4 py-10 text-center text-sm text-slate-500">
  اجرایی برای این فیلترها یافت نشد.
</div>
{% else %}
<div class="bg-surface-panel border border-surface-border rounded-xl overflow-hidden">
<table class="w-full text-sm">
<thead class="bg-surface-raised/60 text-slate-400">
<tr>
  <th class="text-left px-4 py-3 font-medium">Run ID</th>
  {% if show_flow %}<th class="text-left px-4 py-3 font-medium">Flow</th>{% endif %}
  <th class="text-left px-4 py-3 font-medium">Status</th>
  <th class="text-left px-4 py-3 font-medium">Started</th>
  <th class="text-left px-4 py-3 font-medium">Finished</th>
</tr>
</thead>
<tbody>
{% for run in runs %}
<tr class="border-t border-surface-border hover:bg-surface-raised/40">
  <td class="px-4 py-3 font-mono text-xs text-slate-300">{{ run.id }}</td>
  {% if show_flow %}<td class="px-4 py-3 text-slate-200">{{ run.flowName }}</td>{% endif %}
  <td class="px-4 py-3">{{ status_badge(run.status) }}</td>
  <td class="px-4 py-3 text-slate-400">{{ run.startedAt }}</td>
  <td class="px-4 py-3 text-slate-400">{{ run.finishedAt or '—' }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
{%- endmacro %}