{% extends "layout.html" %}
{% block content %}
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
  <!-- Scheduler Status -->
  <div class="p-6 rounded-xl bg-gradient-to-br from-[#f06824] via-[#f78d3e] to-[#ffb347] text-white shadow-xl transform hover:scale-[1.02] transition">
    <div class="flex items-center justify-between">
      <div>
        <div class="text-sm opacity-90">Scheduler</div>
        <div class="text-3xl font-semibold mt-1 flex items-center gap-2">
          {% if scheduler_running %}
            <span class="inline-block h-3 w-3 bg-green-400 rounded-full animate-pulse"></span>
            Running
          {% else %}
            <span class="inline-block h-3 w-3 bg-red-400 rounded-full animate-pulse"></span>
            Stopped
          {% endif %}
        </div>
      </div>
      <div class="opacity-90">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 drop-shadow-lg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6v6l4 2" />
        </svg>
      </div>
    </div>
  </div>

  <!-- Timezone -->
  <div class="p-6 rounded-xl bg-gradient-to-tr from-[#fff8f3] via-[#ffe4c8] to-[#ffd39b] border border-orange-100 shadow-md hover:shadow-lg transition transform hover:scale-[1.02]">
    <div class="flex items-center justify-between">
      <div>
        <div class="text-sm text-gray-600">Timezone</div>
        <div class="text-2xl font-semibold mt-1 text-gray-900">{{ timezone }}</div>
      </div>
      <div class="text-[#f06824]">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 drop-shadow-md" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3" />
        </svg>
      </div>
    </div>
  </div>

  <!-- Total Tasks -->
  <div class="p-6 rounded-xl bg-gradient-to-br from-[#fffbf5] via-[#fff2e3] to-[#ffd6a5] border border-orange-200 shadow-md hover:shadow-xl transform hover:scale-[1.03] transition">
    <div class="flex items-center justify-between">
      <div>
        <div class="text-sm text-gray-600">Total Tasks</div>
        <div class="text-3xl font-bold mt-1 text-[#d4571c]">{{ total_tasks }}</div>
      </div>
      <div class="text-[#f06824]">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 drop-shadow-md" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h7" />
        </svg>
      </div>
    </div>
  </div>
</div>

<div class="mt-6 grid grid-cols-1 md:grid-cols-4 gap-4">
  <div class="rounded-xl border border-green-100 bg-green-50 px-4 py-3">
    <div class="text-xs uppercase tracking-wide text-green-700">Scheduled</div>
    <div class="mt-1 text-2xl font-semibold text-green-900">{{ scheduled_tasks }}</div>
  </div>
  <div class="rounded-xl border border-yellow-100 bg-yellow-50 px-4 py-3">
    <div class="text-xs uppercase tracking-wide text-yellow-700">Paused</div>
    <div class="mt-1 text-2xl font-semibold text-yellow-900">{{ paused_tasks }}</div>
  </div>
  <div class="rounded-xl border border-blue-100 bg-blue-50 px-4 py-3">
    <div class="text-xs uppercase tracking-wide text-blue-700">Pending</div>
    <div class="mt-1 text-2xl font-semibold text-blue-900">{{ pending_tasks }}</div>
  </div>
  <div class="rounded-xl border border-gray-200 bg-gray-50 px-4 py-3">
    <div class="text-xs uppercase tracking-wide text-gray-600">Stores / Executors</div>
    <div class="mt-1 text-2xl font-semibold text-gray-900">{{ store_count }} / {{ executor_count }}</div>
  </div>
</div>

<!-- Recent Tasks Table -->
<div class="mt-10 bg-white border rounded-xl shadow-sm overflow-hidden">
  <div class="px-5 py-4 border-b flex items-center justify-between">
    <h2 class="text-lg font-semibold">Recent tasks</h2>
    <a href="{{ url_for('dashboard:tasks:index') }}"
       class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-[#f06824] text-white text-sm font-medium shadow hover:shadow-md hover:bg-[#e35d1e] transition">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 4v16m8-8H4" />
      </svg>
      Manage
    </a>
  </div>

  <div class="overflow-x-auto">
    <table class="min-w-full divide-y divide-gray-100">
      <thead class="bg-gray-50">
        <tr>
          <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID / Name</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Trigger</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Next run</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Store</th>
          <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
        </tr>
      </thead>
      <tbody class="bg-white divide-y divide-gray-100">
        {% if not tasks or tasks|length == 0 %}
          <tr>
            <td colspan="5" class="px-4 py-8 text-center text-gray-500">
              No tasks yet. <a href="{{ url_for('dashboard:tasks:index') }}" class="text-[#f06824] hover:underline">Create one</a>.
            </td>
          </tr>
        {% else %}
          {% for t in tasks[:10] %}
          <tr class="hover:bg-gray-50">
            <td class="px-4 py-3">
              <div class="font-mono text-xs break-all">{{ t.id }}</div>
              <div class="text-gray-500 text-sm">{{ t.name or '-' }}</div>
              <div class="mt-1 text-xs text-gray-500">{{ t.callable_reference or t.callable_name or '-' }}</div>
            </td>
            <td class="px-4 py-3">
              <span class="px-2 py-1 rounded-full border text-xs">{{ t.trigger_alias or t.trigger }}</span>
            </td>
            <td class="px-4 py-3">{{ t.next_run_time or '-' }}</td>
            <td class="px-4 py-3"><span class="font-mono text-xs">{{ t.store }}</span></td>
            <td class="px-4 py-3 text-right">
              {% if t.state == "scheduled" %}
                <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs bg-green-50 text-green-700 border border-green-200">
                  <span class="h-1.5 w-1.5 rounded-full bg-green-500"></span> Scheduled
                </span>
              {% elif t.state == "pending" %}
                <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs bg-blue-50 text-blue-700 border border-blue-200">
                  <span class="h-1.5 w-1.5 rounded-full bg-blue-500"></span> Pending
                </span>
              {% else %}
                <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs bg-yellow-50 text-yellow-700 border border-yellow-200">
                  <span class="h-1.5 w-1.5 rounded-full bg-yellow-500"></span> Paused
                </span>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        {% endif %}
      </tbody>
    </table>
  </div>
</div>

<!-- CTA Section -->
<div class="mt-10 flex justify-center">
  <a href="{{ url_for('dashboard:tasks:index') }}"
     class="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-gradient-to-r from-[#f06824] via-[#f78d3e] to-[#ffb347] text-white font-medium shadow-md hover:shadow-lg transform hover:-translate-y-0.5 transition-all">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 drop-shadow-sm" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" d="M12 4v16m8-8H4" />
    </svg>
    View Tasks
  </a>
</div>
{% endblock %}