{% extends 'base.html' %}
{% block title %}Flows List{% endblock %}
{% block content %}
<div class="space-y-6">
  <div class="flex items-center justify-between">
    <div>
      <h2 class="text-2xl font-bold text-white">Flows List</h2>
      <p class="text-xs text-slate-500 mt-1">برای مشاهده لیست اجراهای هر فلو روی آن کلیک کنید</p>
    </div>
    <form method="post" action="{{ url_for('pages.refresh_flows_action') }}">
      <button type="submit" class="rounded-lg bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700">دریافت</button>
    </form>
  </div>

  {% if refresh_message %}
  <p class="text-xs {% if refresh_ok %}text-status-success{% else %}text-status-failed{% endif %}">{{ refresh_message }}</p>
  {% endif %}

  <div class="space-y-3">
    {% for flow in flows %}
    <a href="{{ url_for('pages.flow_detail', flow_id=flow.id) }}"
       class="block bg-surface-panel border border-surface-border rounded-xl px-5 py-4 hover:border-brand-600/50 hover:bg-surface-raised transition-colors">
      <div class="flex items-center justify-between gap-4 flex-wrap">
        <div class="min-w-0">
          <p class="font-semibold text-slate-100 truncate">{{ flow.name }}</p>
          <p class="text-xs text-slate-500 font-mono truncate">{{ flow.id }}</p>
        </div>
        <div class="flex gap-4 text-sm shrink-0">
          {% for label, value, cls in [('24H', flow.ranges['24h'].total, 'text-slate-200'),
                                         ('7D', flow.ranges['7d'].total, 'text-slate-200'),
                                         ('30D', flow.ranges['30d'].total, 'text-slate-200'),
                                         ('SUCCESS', flow.ranges['30d'].success, 'text-status-success'),
                                         ('FAILED', flow.ranges['30d'].failed, 'text-status-failed')] %}
          <div class="text-center">
            <p class="font-semibold {{ cls }}">{{ value }}</p>
            <p class="text-[10px] text-slate-500 uppercase">{{ label }}</p>
          </div>
          {% endfor %}
        </div>
      </div>
    </a>
    {% else %}
    <p class="text-slate-400">No flows synced yet.</p>
    {% endfor %}
  </div>
</div>
{% endblock %}