{{define "content"}}
{{$data := .Content}}
<section class="mb-4">
  <div>
    <div class="text-uppercase small fw-semibold text-primary mb-2"><i class="ti ti-cpu-2 me-1"></i>Control Plane</div>
    <h1 class="display-6 fw-bold mb-2"><i class="ti ti-clock-cog me-2"></i>Jobs</h1>
    <p class="text-body-secondary mb-0">Schedules, targets, runs, history, output.</p>
  </div>
</section>
<section class="row g-4 mb-4">
  <div class="col-12">
    <article class="card border-0 shadow-sm">
      <div class="card-body p-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
          <div>
            <h2 class="h4 mb-1"><i class="ti ti-calendar-time me-2"></i>Scheduled Jobs</h2>
            <p class="text-body-secondary mb-0">Node, group, or tag targets with next run, last run, and command order.</p>
          </div>
          <span class="badge text-bg-primary">{{len $data.Jobs}} jobs</span>
        </div>
        <div class="row g-3">
        {{range $data.Jobs}}
          <div class="col-12 col-xxl-6">
            <div class="border rounded-4 p-3 bg-body-tertiary h-100">
              <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
                <div>
                  <strong><i class="ti ti-bolt me-2"></i>{{.Name}}</strong>
                  <div class="small text-body-secondary">{{.TriggerType}} · {{if .NodeName}}{{.NodeName}}{{else if .GroupName}}{{.GroupName}}{{else if .Tag}}tag:{{.Tag}}{{else}}unassigned{{end}}</div>
                  <div class="small text-body-secondary">{{if .Schedule}}{{.Schedule}}{{else}}manual{{end}}</div>
                </div>
                <span class="badge {{if .Enabled}}text-bg-success{{else}}text-bg-secondary{{end}}">{{if .Enabled}}Enabled{{else}}Paused{{end}}</span>
              </div>
              <div class="row g-3 small mb-3">
                <div class="col-sm-4">
                  <div class="text-body-secondary">Last run</div>
                  <div>{{if .LastRunAt}}{{.LastRunAt.Format "2006-01-02 15:04"}}{{else}}Never{{end}}</div>
                </div>
                <div class="col-sm-4">
                  <div class="text-body-secondary">Next run</div>
                  <div>{{if .NextRunAt}}{{.NextRunAt.Format "2006-01-02 15:04"}}{{else}}Manual{{end}}</div>
                </div>
                <div class="col-sm-4">
                  <div class="text-body-secondary">Target</div>
                  <div>{{if .NodeName}}Node{{else if .GroupName}}Group{{else if .Tag}}Tag{{else}}None{{end}}</div>
                </div>
              </div>
              <ol class="mb-0 ps-3 small">
                {{range (splitLines .Command)}}
                <li class="mb-1"><code>{{.}}</code></li>
                {{end}}
              </ol>
            </div>
          </div>
        {{else}}
          <div class="col-12">
            <div class="text-center text-body-secondary py-5">
              <i class="ti ti-clock-off fs-1 d-block mb-3"></i>No jobs yet.
            </div>
          </div>
        {{end}}
        </div>
      </div>
    </article>
  </div>
</section>

<section class="row g-4">
  <div class="col-12">
    <article class="card border-0 shadow-sm">
      <div class="card-body p-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
          <div>
            <h2 class="h4 mb-1"><i class="ti ti-history me-2"></i>Job History</h2>
            <p class="text-body-secondary mb-0">Run duration, output, target node, and status.</p>
          </div>
        </div>
        <div class="vstack gap-3">
        {{range $data.Runs}}
          <div class="border rounded-4 p-3 bg-body-tertiary">
            <div class="d-flex justify-content-between align-items-start gap-3 mb-2">
              <div>
                <strong><i class="ti ti-terminal-2 me-2"></i>{{if .JobName}}{{.JobName}}{{else}}{{.Action}}{{end}}</strong>
                <div class="small text-body-secondary">{{.NodeName}} · {{.StartedAt.Format "2006-01-02 15:04"}}</div>
              </div>
              <div class="text-end">
                <div><span class="badge {{if eq .Status "completed"}}text-bg-success{{else}}text-bg-danger{{end}}">{{.Status}}</span></div>
                <div class="small text-body-secondary mt-1">{{.DurationText}}</div>
              </div>
            </div>
            <pre class="run-pre mb-0">{{.Output}}</pre>
          </div>
        {{else}}
          <div class="text-center text-body-secondary py-5">
            <i class="ti ti-history-off fs-1 d-block mb-3"></i>No job runs yet.
          </div>
        {{end}}
        </div>
      </div>
    </article>
  </div>
</section>

<div class="modal fade" id="addJobModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content border-0 shadow-lg">
      <form method="post" action="/automations" id="job-form">
        <div class="modal-header">
          <h2 class="modal-title fs-5"><i class="ti ti-clock-cog me-2"></i>Create Job</h2>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="row g-4">
            <div class="col-12 col-lg-4">
              <div class="mb-3">
                <label class="form-label">Name</label>
                <input type="text" class="form-control" name="name" required>
              </div>
              <div class="mb-3">
                <label class="form-label">Trigger</label>
                <select class="form-select" name="trigger_type" id="trigger_type">
                  <option value="recurring">Recurring</option>
                  <option value="timer">Timer</option>
                  <option value="triggered">Triggered</option>
                </select>
              </div>
              <div class="mb-3">
                <label class="form-label">Run on group</label>
                <select class="form-select" name="group_id">
                  <option value="">None</option>
                  {{range $data.Groups}}<option value="{{.ID}}">{{.Name}}</option>{{end}}
                </select>
              </div>
              <div class="mb-3">
                <label class="form-label">Run on node</label>
                <select class="form-select" name="node_id">
                  <option value="">None</option>
                  {{range $data.Nodes}}<option value="{{.ID}}">{{.Name}}</option>{{end}}
                </select>
              </div>
              <div class="mb-3">
                <label class="form-label">Run on tag</label>
                <input type="text" class="form-control" name="tag" list="job-tag-options" placeholder="prod, edge, lab">
                <datalist id="job-tag-options">
                  {{range $data.Tags}}<option value="{{.}}"></option>{{end}}
                </datalist>
                <div class="form-text">Choose one target type only.</div>
              </div>
            </div>
            <div class="col-12 col-lg-4 schedule-panel">
              <div class="mb-3">
                <label class="form-label">Schedule type</label>
                <select class="form-select" name="schedule_kind" id="schedule_kind">
                  <option value="daily">Daily</option>
                  <option value="weekly">Weekly</option>
                  <option value="hourly">Hourly</option>
                  <option value="interval">Interval</option>
                </select>
              </div>
              <div class="row g-3">
                <div class="col-6">
                  <label class="form-label">Hour</label>
                  <select class="form-select" name="schedule_hour">
                    {{range $i := seq 0 23}}<option value="{{$i}}">{{$i}}</option>{{end}}
                  </select>
                </div>
                <div class="col-6">
                  <label class="form-label">Minute</label>
                  <select class="form-select" name="schedule_minute">
                    {{range $i := seq 0 59}}<option value="{{$i}}">{{$i}}</option>{{end}}
                  </select>
                </div>
                <div class="col-12 weekly-only">
                  <label class="form-label">Weekday</label>
                  <select class="form-select" name="schedule_weekday">
                    <option value="1">Monday</option>
                    <option value="2">Tuesday</option>
                    <option value="3">Wednesday</option>
                    <option value="4">Thursday</option>
                    <option value="5">Friday</option>
                    <option value="6">Saturday</option>
                    <option value="0">Sunday</option>
                  </select>
                </div>
                <div class="col-6 interval-only d-none">
                  <label class="form-label">Every</label>
                  <input class="form-control" type="number" min="1" name="interval_value" value="30">
                </div>
                <div class="col-6 interval-only d-none">
                  <label class="form-label">Unit</label>
                  <select class="form-select" name="interval_unit">
                    <option value="minutes">Minutes</option>
                    <option value="hours">Hours</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="col-12 col-lg-4">
              <div class="d-flex align-items-center justify-content-between mb-2">
                <label class="form-label mb-0">Commands</label>
                <button class="btn btn-sm btn-outline-secondary" type="button" id="add-command-step"><i class="ti ti-plus me-1"></i>Add step</button>
              </div>
              <div id="command-steps" class="vstack gap-2">
                <div class="input-group command-step">
                  <span class="input-group-text">1</span>
                  <input type="text" class="form-control" name="command_steps[]" placeholder="sudo apt update" required>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"><i class="ti ti-x me-1"></i>Cancel</button>
          <button type="submit" class="btn btn-primary"><i class="ti ti-plus me-1"></i>Create Job</button>
        </div>
      </form>
    </div>
  </div>
</div>
{{end}}
