{% extends "base.html" %}
{% set active_page = 'jobs' %}
{% block title %}Backup Jobs — vSphere Backup Manager{% endblock %}

{% block head %}
<style>
  .jobs-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px;
  }
  .jobs-summary {
    display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px;
  }
  .jobs-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 20px;
    text-align: center;
    min-width: 100px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(8px);
  }
  .jobs-stat-val { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
  .jobs-stat-lbl { font-size: 11px; color: var(--text-muted); margin-top: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

  .jobs-table-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    backdrop-filter: blur(8px);
  }

  .status-icon { font-size: 16px; }

  .job-actions { display: flex; gap: 8px; }

  .empty-state {
    text-align: center; padding: 64px; color: var(--text-secondary);
  }
  .empty-icon { font-size: 52px; margin-bottom: 16px; opacity: .4; }

  .running-pulse {
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .6; transform: scale(0.98); }
  }

  .schedule-tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(6, 182, 212, 0.08);
    border: 1px solid rgba(6, 182, 212, 0.2);
    color: var(--accent-2);
    font-size: 11px; padding: 3px 10px; border-radius: 100px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
</style>
{% endblock %}

{% block content %}
<div class="topbar">
  <div>
    <div class="topbar-title">Backup Jobs</div>
    <div class="topbar-subtitle">All scheduled and completed backup jobs</div>
  </div>
  <div class="topbar-actions">
    <a href="/jobs/create" class="btn btn-primary btn-sm">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
      Create Job
    </a>
  </div>
</div>

<div class="content">
  <!-- Summary chips -->
  <div class="jobs-summary">
    <div class="jobs-stat">
      <div class="jobs-stat-val">{{ jobs|length }}</div>
      <div class="jobs-stat-lbl">Total</div>
    </div>
    <div class="jobs-stat">
      <div class="jobs-stat-val" style="color:var(--accent)">{{ jobs|selectattr('status','equalto','running')|list|length }}</div>
      <div class="jobs-stat-lbl">Running</div>
    </div>
    <div class="jobs-stat">
      <div class="jobs-stat-val" style="color:var(--success)">{{ jobs|selectattr('status','equalto','finished')|list|length }}</div>
      <div class="jobs-stat-lbl">Finished</div>
    </div>
    <div class="jobs-stat">
      <div class="jobs-stat-val" style="color:var(--warning)">{{ jobs|selectattr('status','equalto','queued')|list|length }}</div>
      <div class="jobs-stat-lbl">Queued</div>
    </div>
    <div class="jobs-stat">
      <div class="jobs-stat-val" style="color:var(--danger)">{% set fcnt = namespace(n=0) %}{% for j in jobs %}{% if j.status.startswith('failed') %}{% set fcnt.n = fcnt.n + 1 %}{% endif %}{% endfor %}{{ fcnt.n }}</div>
      <div class="jobs-stat-lbl">Failed</div>
    </div>
    <div class="jobs-stat">
      <div class="jobs-stat-val" style="color:var(--accent-2)">{{ scheduled_count }}</div>
      <div class="jobs-stat-lbl">Scheduled</div>
    </div>
  </div>

  {% if jobs %}
  <div class="jobs-table-wrap">
    <table>
      <thead>
        <tr>
          <th>Job</th>
          <th>VM</th>
          <th>Status</th>
          <th>Schedule</th>
          <th>Started</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for job in jobs %}
        <tr>
          <td>
            <div style="font-weight:600;font-size:13px;">
              {{ job.label or ('Job #' + job.id[:8]) }}
            </div>
            <div class="text-small text-muted mono">{{ job.id[:12] }}…</div>
          </td>
          <td>
            <span style="font-weight:500;">{{ job.vm_name }}</span>
          </td>
          <td>
            {% if job.status == 'running' %}
              <span class="badge badge-purple running-pulse">Running</span>
            {% elif job.status == 'finished' %}
              <span class="badge badge-green">Finished</span>
            {% elif job.status == 'queued' %}
              <span class="badge badge-yellow">Queued</span>
            {% elif job.status.startswith('failed') %}
              <span class="badge badge-red" title="{{ job.status }}">Failed</span>
            {% else %}
              <span class="badge badge-gray">{{ job.status }}</span>
            {% endif %}
          </td>
          <td>
            {% if job.schedule_type and job.schedule_type != 'now' %}
              <span class="schedule-tag" style="margin-bottom: 4px;">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 4px;"><path d="M23 4v6h-6"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
                {{ job.schedule_type|capitalize }}
              </span>
            {% else %}
              <span class="text-muted text-small" style="display: block; margin-bottom: 4px;">One-time</span>
            {% endif %}
            <div class="text-muted" style="font-size:11px; margin-top: 2px;">
              {% if job.retention_type == 'keep_count' %}
                Keep: {{ job.retention_value }} backups
              {% elif job.retention_type == 'keep_days' %}
                Keep: {{ job.retention_value }} days
              {% else %}
                Keep: All
              {% endif %}
            </div>
          </td>
          <td class="text-small text-muted">
            {{ job.started_fmt }}
          </td>
          <td>
            <div class="job-actions" style="display: flex; gap: 8px;">
              <a href="/job/{{ job.id }}" class="btn btn-ghost btn-sm">View</a>
              {% if job.status != 'running' and job.status != 'queued' %}
              <form method="post" action="/job/{{ job.id }}/run" style="margin: 0;">
                <button class="btn btn-primary btn-sm" type="submit">Run Now</button>
              </form>
              {% endif %}
              {% if job.schedule_id %}
              <form method="post" action="/job/{{ job.id }}/cancel-schedule"
                    style="margin: 0;"
                    onsubmit="return confirm('Cancel this schedule?')">
                <button class="btn btn-secondary btn-sm" type="submit">Cancel Schedule</button>
              </form>
              {% endif %}
              {% if job.status != 'running' and job.status != 'queued' %}
              <form method="post" action="/job/{{ job.id }}/delete"
                    style="margin: 0;"
                    onsubmit="return confirm('Are you sure you want to delete this job? This will cancel any active schedule and delete the job logs.')">
                <button class="btn btn-danger btn-sm" type="submit">
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 4px;"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
                  Delete
                </button>
              </form>
              {% endif %}
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {% else %}
  <div class="empty-state">
    <div class="empty-icon" style="display: flex; justify-content: center; margin-bottom: 16px;">
      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color: var(--text-muted);"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1" ry="1"/></svg>
    </div>
    <p>No backup jobs yet.</p>
    <a href="/jobs/create" class="btn btn-primary" style="margin-top:16px;">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
      Create your first job
    </a>
  </div>
  {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
  // Auto-refresh jobs page every 8 seconds if any jobs are running
  const hasRunning = {{ 'true' if jobs|selectattr('status','equalto','running')|list|length > 0 else 'false' }};
  if (hasRunning) {
    setTimeout(() => location.reload(), 8000);
  }
</script>
{% endblock %}