{% extends "base.html" %}
{% load scoped_tags %}

{% block title %}Scheduling{% endblock %}
{% block page_title %}Scheduling{% endblock %}
{% block page_subtitle %}Recurring schedules and scoped job execution (Layer 16){% endblock %}
{% block layer_indicator %}L16 Scheduling{% endblock %}

{% block content %}

{# Recurring Schedules #}
<div class="mb-8">
  <div class="flex items-center justify-between mb-4">
    <h2 class="text-base font-semibold text-slate-900">Recurring Schedules</h2>
    <span class="text-sm text-slate-500">{{ schedules|length }} schedule{{ schedules|length|pluralize }}</span>
  </div>

  {% if schedules %}
  <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
    <table class="min-w-full divide-y divide-slate-200">
      <thead class="bg-slate-50">
        <tr>
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Name</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Type</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Expression</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Status</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Owner</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Created</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-200">
        {% for sched in schedules %}
        <tr class="hover:bg-slate-50">
          <td class="px-4 py-3 text-sm font-medium text-slate-900">{{ sched.name|default:"Unnamed" }}</td>
          <td class="px-4 py-3">
            {% if sched.cron_expression %}
            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-purple-50 text-purple-700 ring-1 ring-purple-600/20">CRON</span>
            {% elif sched.interval_seconds %}
            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700 ring-1 ring-blue-600/20">INTERVAL</span>
            {% else %}
            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-slate-50 text-slate-600 ring-1 ring-slate-500/20">—</span>
            {% endif %}
          </td>
          <td class="px-4 py-3 text-xs font-mono text-slate-600">{% if sched.cron_expression %}{{ sched.cron_expression }}{% elif sched.interval_seconds %}Every {{ sched.interval_seconds }}s{% else %}—{% endif %}</td>
          <td class="px-4 py-3">{% include "components/_state_badge.html" with state=sched.lifecycle|default:"ACTIVE" %}</td>
          <td class="px-4 py-3 text-xs font-mono text-slate-400">{{ sched.owner_id|truncate_id }}</td>
          <td class="px-4 py-3 text-xs text-slate-400">{{ sched.created_at|format_dt }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  {% include "components/_empty_state.html" with title="No recurring schedules" message="Cron and interval schedules will appear here once configured." %}
  {% endif %}
</div>

{# Scheduled Actions #}
<div class="mb-8">
  <div class="flex items-center justify-between mb-4">
    <h2 class="text-base font-semibold text-slate-900">Scheduled Actions</h2>
    <span class="text-sm text-slate-500">{{ actions|length }} action{{ actions|length|pluralize }}</span>
  </div>

  {% if actions %}
  <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
    <table class="min-w-full divide-y divide-slate-200">
      <thead class="bg-slate-50">
        <tr>
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Name</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Action Type</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Next Run</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">State</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Owner</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Config</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-200">
        {% for action in actions %}
        <tr class="hover:bg-slate-50">
          <td class="px-4 py-3 text-sm font-medium text-slate-900">{{ action.name|default:"Unnamed" }}</td>
          <td class="px-4 py-3">
            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-slate-50 text-slate-600 ring-1 ring-slate-500/20">{{ action.action_type }}</span>
          </td>
          <td class="px-4 py-3 text-xs text-slate-600">
            {% if action.next_run_at %}
            <span class="font-medium">{{ action.next_run_at|format_dt }}</span>
            {% else %}
            <span class="text-slate-400">Not scheduled</span>
            {% endif %}
          </td>
          <td class="px-4 py-3">{% include "components/_state_badge.html" with state=action.state|default:action.lifecycle|default:"PENDING" %}</td>
          <td class="px-4 py-3 text-xs font-mono text-slate-400">{{ action.owner_id|truncate_id }}</td>
          <td class="px-4 py-3">
            {% if action.config %}
            <pre class="text-xs text-slate-500 font-mono bg-slate-50 rounded px-2 py-1 max-w-xs overflow-x-auto">{{ action.config|pretty_json }}</pre>
            {% else %}
            <span class="text-xs text-slate-400">None</span>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  {% include "components/_empty_state.html" with title="No scheduled actions" message="Scheduled actions run at specific times. Create actions to automate recurring tasks." %}
  {% endif %}
</div>

{# Recent Jobs #}
<div>
  <div class="flex items-center justify-between mb-4">
    <h2 class="text-base font-semibold text-slate-900">Recent Jobs</h2>
    <span class="text-sm text-slate-500">{{ recent_jobs|length }} job{{ recent_jobs|length|pluralize }}</span>
  </div>

  {% if recent_jobs %}
  <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
    <table class="min-w-full divide-y divide-slate-200">
      <thead class="bg-slate-50">
        <tr>
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Job</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Action Type</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">State</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Owner</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Started</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Completed</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-200">
        {% for job in recent_jobs %}
        <tr class="hover:bg-slate-50">
          <td class="px-4 py-3 text-sm font-medium text-slate-900">{{ job.name|default:"Unnamed Job" }}</td>
          <td class="px-4 py-3">
            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-slate-50 text-slate-600 ring-1 ring-slate-500/20">{{ job.action_type|default:"—" }}</span>
          </td>
          <td class="px-4 py-3">{% include "components/_state_badge.html" with state=job.state|default:"PENDING" %}</td>
          <td class="px-4 py-3 text-xs font-mono text-slate-400">{{ job.owner_id|truncate_id }}</td>
          <td class="px-4 py-3 text-xs text-slate-400">{{ job.started_at|format_dt|default:"—" }}</td>
          <td class="px-4 py-3 text-xs text-slate-400">{{ job.completed_at|format_dt|default:"—" }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-6">
    <p class="text-sm text-slate-400 text-center">No jobs have been executed yet.</p>
  </div>
  {% endif %}
</div>
{% endblock %}