{% extends 'base.html' %}
{% import 'macros.html' as m %}
{% block title %}{{ flow.name }}{% endblock %}
{% block content %}
<div class="space-y-6">
  <div>
    <a href="{{ url_for('pages.flows_list') }}" class="text-xs text-slate-500 hover:text-slate-300">&larr; Flows List</a>
    <h2 class="text-2xl font-bold text-white mt-1">{{ flow.name }}</h2>
    <p class="text-xs text-slate-500 font-mono">{{ flow.id }}</p>
  </div>

  <div class="space-y-4">
    <form method="post" action="{{ url_for('pages.toggle_active_action', flow_id=flow.id) }}" class="flex items-center gap-2">
      <button type="submit"
        class="inline-flex items-center gap-2 rounded-lg border px-4 py-2 text-sm font-medium transition-colors
        {% if flow.isActive %}text-status-success bg-status-successBg border-status-success/30 hover:bg-status-success/20
        {% else %}text-status-failed bg-status-failedBg border-status-failed/30 hover:bg-status-failed/20{% endif %}">
        <span class="h-2 w-2 rounded-full bg-current"></span>
        {% if flow.isActive %}فعال (Active){% else %}غیرفعال (Deactive){% endif %}
      </button>
      {% if toggle_error %}<span class="text-xs text-status-failed">{{ toggle_error }}</span>{% endif %}
    </form>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
      <div class="bg-surface-panel border border-surface-border rounded-xl p-5 space-y-3">
        <h3 class="text-sm font-semibold text-slate-200">فایل فلو</h3>
        {% if flow.file %}
        <div class="flex items-center justify-between gap-3 rounded-lg border border-surface-border bg-surface-raised/40 px-3 py-2">
          <a href="{{ url_for('flows.download_file', flow_id=flow.id) }}" class="text-sm text-brand-400 hover:underline truncate">{{ flow.file.originalName }}</a>
          <form method="post" action="{{ url_for('pages.delete_file_action', flow_id=flow.id) }}">
            <button type="submit" class="text-xs text-status-failed hover:underline shrink-0">حذف</button>
          </form>
        </div>
        {% endif %}
        <form method="post" action="{{ url_for('pages.upload_file_action', flow_id=flow.id) }}" enctype="multipart/form-data" class="flex items-center gap-3">
          <input type="file" name="file" class="flex-1 text-xs text-slate-400">
          <button type="submit" class="rounded-lg bg-brand-600 px-4 py-1.5 text-xs font-medium text-white hover:bg-brand-700">آپلود</button>
        </form>
      </div>

      <div class="bg-surface-panel border border-surface-border rounded-xl p-5 space-y-3">
        <h3 class="text-sm font-semibold text-slate-200">توضیحات و کاربرد فلو</h3>
        <form method="post" action="{{ url_for('pages.save_meta_action', flow_id=flow.id) }}" class="space-y-3">
          <input type="hidden" name="field" value="description">
          <textarea name="description" rows="4" placeholder="این فلو چه کاری انجام می‌دهد..."
            class="w-full rounded-lg border border-surface-border bg-surface-raised/40 px-3 py-2 text-sm text-slate-100 placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-brand-600/50">{{ flow.description or '' }}</textarea>
          <button type="submit" class="rounded-lg bg-brand-600 px-4 py-1.5 text-xs font-medium text-white hover:bg-brand-700">ذخیره</button>
        </form>
      </div>

      <div class="bg-surface-panel border border-surface-border rounded-xl p-5 space-y-3">
        <h3 class="text-sm font-semibold text-slate-200">توکن‌ها و سرویس‌های مورد استفاده</h3>
        <form method="post" action="{{ url_for('pages.save_meta_action', flow_id=flow.id) }}" class="space-y-3">
          <input type="hidden" name="field" value="servicesInfo">
          <textarea name="servicesInfo" rows="4" placeholder="مثلاً: تلگرام بات توکن، API صرافی X..."
            class="w-full rounded-lg border border-surface-border bg-surface-raised/40 px-3 py-2 text-sm text-slate-100 placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-brand-600/50">{{ flow.servicesInfo or '' }}</textarea>
          <button type="submit" class="rounded-lg bg-brand-600 px-4 py-1.5 text-xs font-medium text-white hover:bg-brand-700">ذخیره</button>
        </form>
      </div>
    </div>
  </div>

  {{ m.filters_bar(range_options, current_range, statuses, current_statuses, url_for('pages.flow_detail', flow_id=flow.id)) }}

  {{ m.runs_table(runs) }}
  <p class="text-xs text-slate-600">{{ runs|length }} run(s) — last updated {{ generated_at }}</p>
</div>
{% endblock %}
{% block extra_scripts %}
<script>setTimeout(() => location.reload(), 15000);</script>
{% endblock %}