{% extends "dashboard/base.html" %}

{% block title %}Executions — {{ dashboard_title }}{% endblock %}
{% block page_title %}Executions{% endblock %}

{% block content %}
<div class="px-8 py-6">

  <!-- Page Header -->
  <div class="mb-6">
    <h1 class="text-2xl font-bold text-white tracking-tight">Execution History</h1>
    <p class="text-slate-400 text-sm mt-1">Monitor all agent invocations, performance, and costs.</p>
  </div>

  <!-- Stats Bar -->
  <div class="stats-bar mb-6">
    <div class="stats-bar-card">
      <div class="stats-bar-label">Total Executions</div>
      <div class="stats-bar-value">{{ exec_stats.total_executions if exec_stats else total }}</div>
    </div>
    <div class="stats-bar-card">
      <div class="stats-bar-label">Success Rate</div>
      <div class="stats-bar-value text-emerald-400">
        {% if exec_stats and exec_stats.total_executions > 0 %}
          {{ "%.0f"|format((exec_stats.success_count / exec_stats.total_executions) * 100) }}%
        {% else %}—{% endif %}
      </div>
    </div>
    <div class="stats-bar-card">
      <div class="stats-bar-label">Avg Duration</div>
      <div class="stats-bar-value">
        {% if exec_stats and exec_stats.avg_duration_ms %}
          {{ format_duration(exec_stats.avg_duration_ms) }}
        {% else %}—{% endif %}
      </div>
    </div>
    <div class="stats-bar-card">
      <div class="stats-bar-label">Total Cost</div>
      <div class="stats-bar-value text-amber-400">
        {% if exec_stats %}
          {{ format_cost(exec_stats.total_cost_usd) }}
        {% else %}—{% endif %}
      </div>
    </div>
  </div>

  <!-- Filter Bar -->
  <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-5">
    <div class="flex gap-3 flex-wrap items-center">
      <!-- Search -->
      <div class="relative">
        <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-lg text-slate-500">search</span>
        <input
          type="text"
          name="search"
          placeholder="Search executions..."
          value="{{ search or '' }}"
          class="input pl-9 pr-4 w-56 font-medium"
          hx-get="{{ base_path }}/dashboard/executions"
          hx-target="#exec-table-wrap"
          hx-swap="outerHTML"
          hx-trigger="keyup changed delay:400ms"
          hx-include="[name='status'],[name='agent_id'],[name='search'],[name='date_from'],[name='date_to'],[name='min_cost'],[name='max_cost']"
        />
      </div>

      <!-- Status Filter -->
      <div class="flex gap-0.5 bg-surface-2 border border-border-dark rounded-lg p-1">
        {% set statuses = [('', 'All'), ('running', 'Running'), ('completed', 'Completed'), ('failed', 'Failed')] %}
        {% for s_val, s_label in statuses %}
        <button
          name="status"
          value="{{ s_val }}"
          class="px-3 py-1.5 rounded-md text-xs font-bold transition-all {% if status_filter == s_val %}bg-primary text-white shadow-sm{% else %}text-slate-400 hover:text-white hover:bg-white/5{% endif %}"
          hx-get="{{ base_path }}/dashboard/executions?{% if agent_id_filter %}agent_id={{ agent_id_filter }}&{% endif %}status={{ s_val }}&page=1"
          hx-target="#exec-table-wrap"
          hx-swap="outerHTML"
        >{{ s_label }}</button>
        {% endfor %}
      </div>

      <!-- Agent Filter -->
      {% if agent_names %}
      <select
        class="input"
        hx-get="{{ base_path }}/dashboard/executions?status={{ status_filter }}&page=1"
        hx-target="#exec-table-wrap"
        hx-swap="outerHTML"
        hx-include="[name='agent_id']"
        name="agent_id"
        onchange="htmx.trigger(this, 'change')"
      >
        <option value="">All agents</option>
        {% for aid, aname in agent_names.items() %}
        <option value="{{ aid }}" {% if agent_id_filter == aid %}selected{% endif %}>{{ aname }}</option>
        {% endfor %}
      </select>
      {% endif %}

      <!-- Date Range -->
      <input type="date" name="date_from" value="{{ date_from or '' }}"
        class="input"
        hx-get="{{ base_path }}/dashboard/executions"
        hx-target="#exec-table-wrap"
        hx-swap="outerHTML"
        hx-trigger="change"
        hx-include="[name='status'],[name='agent_id'],[name='search'],[name='date_from'],[name='date_to'],[name='min_cost'],[name='max_cost']"
        title="From date"
      />
      <input type="date" name="date_to" value="{{ date_to or '' }}"
        class="input"
        hx-get="{{ base_path }}/dashboard/executions"
        hx-target="#exec-table-wrap"
        hx-swap="outerHTML"
        hx-trigger="change"
        hx-include="[name='status'],[name='agent_id'],[name='search'],[name='date_from'],[name='date_to'],[name='min_cost'],[name='max_cost']"
        title="To date"
      />

      <!-- Cost Range -->
      <input type="number" name="min_cost" step="0.0001" placeholder="Min $" value="{{ min_cost or '' }}"
        class="input"
        hx-get="{{ base_path }}/dashboard/executions"
        hx-target="#exec-table-wrap"
        hx-swap="outerHTML"
        hx-trigger="change"
        hx-include="[name='status'],[name='agent_id'],[name='search'],[name='date_from'],[name='date_to'],[name='min_cost'],[name='max_cost']"
      />
      <input type="number" name="max_cost" step="0.0001" placeholder="Max $" value="{{ max_cost or '' }}"
        class="input"
        hx-get="{{ base_path }}/dashboard/executions"
        hx-target="#exec-table-wrap"
        hx-swap="outerHTML"
        hx-trigger="change"
        hx-include="[name='status'],[name='agent_id'],[name='search'],[name='date_from'],[name='date_to'],[name='min_cost'],[name='max_cost']"
      />
    </div>

    <div class="flex items-center gap-2">
      <button
        class="flex items-center gap-2 h-9 px-3 rounded-lg bg-surface border border-border-dark text-sm font-medium text-slate-300 hover:bg-surface-2 transition-colors"
        hx-get="{{ base_path }}/dashboard/executions?status={{ status_filter }}&agent_id={{ agent_id_filter }}&page={{ page }}"
        hx-target="#exec-table-wrap"
        hx-swap="outerHTML"
      >
        <span class="material-symbols-outlined text-base">refresh</span>
        Refresh
      </button>
    </div>
  </div>

  <!-- Table Area -->
  <div id="exec-table-wrap"
    {% if has_running %}
    hx-get="{{ base_path }}/dashboard/executions"
    hx-trigger="every 5s"
    hx-swap="outerHTML"
    hx-include="[name='status'],[name='agent_id'],[name='search'],[name='date_from'],[name='date_to'],[name='min_cost'],[name='max_cost']"
    {% endif %}
  >
    {% include "dashboard/_exec_rows.html" %}
  </div>

</div>
{% endblock %}