{# Dashboard stat cards partial — auto-refreshed via dashboard-refresh event.
   Rendered inside #dashboard-stats wrapper in dashboard/index.html, and as
   the response body of /dashboard/stats fragment route.
   Required context: stats, cost_stats, budget_cap, pending_count,
   company_count, ats_tracked_count, ats_last_scan. #}

{% set budget_pct = (cost_stats.today / budget_cap * 100) if budget_cap > 0 else 0 %}
{% if budget_pct >= 100 %}
<div class="bg-red-900/60 border border-red-700 rounded-lg px-4 py-3 flex items-center justify-between mb-4">
  <span class="text-red-200 text-sm">
    Budget cap reached. Paid scoring providers paused. Free tiers (Ollama, Groq, Cerebras, Gemini, Claude CLI) still active.
  </span>
  <div class="flex gap-3 text-xs">
    <button hx-get="{{ url_for('dashboard.cost_detail') }}" hx-target="#cost-detail-panel" hx-swap="innerHTML"
            class="text-red-300 hover:text-red-200 underline">View costs</button>
    <a href="{{ url_for('settings.index') }}" class="text-red-300 hover:text-red-200 underline">Adjust in Settings</a>
  </div>
</div>
{% endif %}

<div class="grid grid-cols-1 sm:grid-cols-5 gap-4">

  <!-- Total Jobs -->
  <div class="bg-slate-800 rounded-xl border border-slate-700 p-5 flex flex-col gap-1">
    <span class="text-xs font-medium text-slate-400 uppercase tracking-wider">Total Jobs</span>
    <span class="text-4xl font-bold text-slate-100">{{ stats.total_jobs }}</span>
    {% if stats.stale_count > 0 %}
    <span class="text-xs text-amber-500">{{ stats.stale_count }} stale</span>
    {% endif %}
  </div>

  <!-- New Today -->
  <div class="bg-slate-800 rounded-xl border {% if stats.new_today > 0 %}border-emerald-600{% else %}border-slate-700{% endif %} p-5 flex flex-col gap-1">
    <span class="text-xs font-medium text-slate-400 uppercase tracking-wider">New Today</span>
    <span class="text-4xl font-bold {% if stats.new_today > 0 %}text-emerald-400{% else %}text-slate-100{% endif %}">
      {{ stats.new_today }}
    </span>
  </div>

  <!-- In Review -->
  <div class="bg-slate-800 rounded-xl border border-slate-700 p-5 flex flex-col gap-1">
    <span class="text-xs font-medium text-slate-400 uppercase tracking-wider">In Review</span>
    <span class="text-4xl font-bold text-slate-100">{{ stats.reviewing_count }}</span>
  </div>

  <!-- Today's Cost -->
  {% if budget_pct >= 100 %}
    {% set cost_border = "border-red-600" %}
    {% set cost_text = "text-red-400" %}
  {% elif budget_pct >= 80 %}
    {% set cost_border = "border-amber-600" %}
    {% set cost_text = "text-amber-400" %}
  {% else %}
    {% set cost_border = "border-slate-700" %}
    {% set cost_text = "text-slate-100" %}
  {% endif %}

  <div class="bg-slate-800 rounded-xl border {{ cost_border }} p-5 flex flex-col gap-1 cursor-pointer"
       hx-get="{{ url_for('dashboard.cost_detail') }}" hx-target="#cost-detail-panel" hx-swap="innerHTML">
    <span class="text-xs font-medium text-slate-400 uppercase tracking-wider">Today's Cost</span>
    <span class="text-2xl font-bold {{ cost_text }}">${{ "%.2f" | format(cost_stats.today) }}</span>
    <span class="text-xs text-slate-500">${{ "%.2f" | format(cost_stats.month) }} / ${{ "%.0f" | format(budget_cap) }} this month</span>
    <a href="{{ url_for('costs.index') }}"
       class="text-xs text-indigo-400 hover:text-indigo-300 transition-colors mt-1"
       hx-on:click="event.stopPropagation()">View details &rarr;</a>
  </div>

  <!-- Pending Review -->
  <div class="bg-slate-800 rounded-xl border {% if pending_count > 0 %}border-amber-600{% else %}border-slate-700{% endif %} p-5 flex flex-col gap-1">
    <span class="text-xs font-medium text-slate-400 uppercase tracking-wider">Pending Review</span>
    <span class="text-4xl font-bold {% if pending_count > 0 %}text-amber-400{% else %}text-slate-100{% endif %}">
      {{ pending_count }}
    </span>
  </div>

</div>

<!-- ATS Discovery stat card (below main stats row) -->
<div class="mt-4">
  <a href="{{ url_for('companies.index') }}" class="block bg-slate-800 rounded-xl border border-slate-700 p-4 hover:border-indigo-600 transition-colors">
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-3">
        <svg class="w-5 h-5 text-indigo-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
        </svg>
        <div>
          <span class="text-xs font-medium text-slate-400 uppercase tracking-wider">ATS Discovery</span>
          <div class="flex items-center gap-2 mt-0.5">
            <span class="text-sm font-semibold text-slate-100">{{ company_count }} companies tracked</span>
            {% if ats_tracked_count > 0 %}
            <span class="text-xs text-slate-400">({{ ats_tracked_count }} on ATS)</span>
            {% endif %}
          </div>
        </div>
      </div>
      <div class="text-right">
        {% if ats_last_scan %}
        <div class="text-xs text-slate-400">Last scan: {{ ats_last_scan.scanned_at | relative_date }}</div>
        <div class="text-xs text-emerald-400 mt-0.5">
          +{{ ats_last_scan.total_found or 0 }} jobs from {{ ats_last_scan.companies_scanned }} companies
        </div>
        {% else %}
        <span class="text-xs text-slate-500">No ATS scans yet</span>
        {% endif %}
      </div>
    </div>
  </a>
</div>

<!-- Cost detail expandable panel -->
<div id="cost-detail-panel"></div>