{{define "title"}}{{.Title}}{{end}}

{{define "content"}}
{{$page := .Page}}
{{$host := $page.Host}}
<div class="max-w-[1280px] mx-auto px-8 pt-7 pb-14">

  <div class="crumbs">
    <a href="/">Dashboard</a><span class="sep">/</span>
    <a href="/hosts/{{$host.ID}}">{{$host.Name}}</a><span class="sep">/</span>
    <span class="text-ink-mid">schedules</span>
  </div>

  {{/* ---------- header ---------- */}}
  <div class="flex items-start justify-between mt-3.5">
    <div>
      <div class="flex items-center gap-3">
        {{if eq $host.Status "online"}}
          <span class="dot dot-online"></span>
        {{else}}
          <span class="dot dot-offline"></span>
        {{end}}
        <h1 class="text-[22px] font-medium tracking-[-0.01em]">
          schedules <span class="text-ink-fade">·</span>
          <span class="mono text-ink font-medium">{{$host.Name}}</span>
        </h1>
        <span class="mono text-[11px] text-ink-mute">version {{$page.Version}}{{if and (gt $page.Version 0) (ne $page.Version $page.AppliedVersion)}} <span class="text-warn">· agent at v{{$page.AppliedVersion}}</span>{{else if gt $page.Version 0}} <span class="text-ok">· agent in sync</span>{{end}}</span>
      </div>
    </div>
    <div class="flex items-center gap-2">
      <a href="/hosts/{{$host.ID}}/schedules/new" class="btn btn-primary">New schedule</a>
    </div>
  </div>

  {{/* ---------- secondary tabs ---------- */}}
  <div class="flex items-end mt-7">
    <a class="sub-tab" href="/hosts/{{$host.ID}}">Snapshots <span class="mono text-ink-fade text-[11px] ml-1">{{comma $host.SnapshotCount}}</span></a>
    <a class="sub-tab active" href="/hosts/{{$host.ID}}/schedules">Schedules <span class="mono text-ink-fade text-[11px] ml-1">{{len $page.Schedules}}</span></a>
    <div class="sub-tab">Jobs</div>
    <div class="sub-tab">Repo</div>
    <div class="sub-tab">Settings</div>
  </div>

  {{/* ---------- schedule rows ---------- */}}
  <div class="panel rounded-[7px] mt-6 overflow-hidden">
    {{if eq (len $page.Schedules) 0}}
      <div class="empty-state" style="border: none; background: var(--panel);">
        <h3 class="text-base font-medium tracking-[-0.005em]">No schedules yet.</h3>
        <p class="text-pretty text-ink-mute text-[13px] mt-2 mx-auto max-w-[480px] leading-[1.65]">
          Add one and the agent will start running backups on whatever cron expression you give it.
          Until then, run-now is the only way to trigger a backup.
        </p>
        <div class="mt-5">
          <a href="/hosts/{{$host.ID}}/schedules/new" class="btn btn-primary">New schedule</a>
        </div>
      </div>
    {{else}}
      <div class="hairline grid items-baseline px-4 py-2.5 text-[11px] text-ink-fade uppercase tracking-[0.08em]"
           style="grid-template-columns: 0.5fr 1fr 2fr 1.5fr 0.5fr 0.7fr; column-gap: 18px;">
        <div>Status</div>
        <div>Cron</div>
        <div>Paths</div>
        <div>Retention</div>
        <div>Tags</div>
        <div></div>
      </div>
      {{range $page.Schedules}}
      <div class="grid items-center px-4 py-3 text-[13px] hairline"
           style="grid-template-columns: 0.5fr 1fr 2fr 1.5fr 0.5fr 0.7fr; column-gap: 18px;">
        <div>
          {{if .Enabled}}
            <span class="mono text-[11px] text-ok">enabled</span>
          {{else}}
            <span class="mono text-[11px] text-ink-fade">disabled</span>
          {{end}}
        </div>
        <div class="mono text-ink">{{.CronExpr}}</div>
        <div class="mono text-ink-mid text-[12px] truncate" title="{{joinDot .Paths}}">{{joinDot .Paths}}</div>
        <div class="mono text-[12px] text-ink-mid">{{.RetentionPolicy.Summary}}</div>
        <div class="flex gap-1.5 flex-wrap">
          {{- range .Tags -}}<span class="tag">{{.}}</span>{{- end -}}
        </div>
        <div class="text-right flex gap-1.5 justify-end">
          <a href="/hosts/{{$host.ID}}/schedules/{{.ID}}/edit" class="btn">Edit</a>
          <form method="post" action="/hosts/{{$host.ID}}/schedules/{{.ID}}/delete" style="display: inline;"
                onsubmit="return confirm('Delete schedule {{.CronExpr}}? Existing snapshots are not affected.');">
            <button type="submit" class="btn btn-danger">Delete</button>
          </form>
        </div>
      </div>
      {{end}}
    {{end}}
  </div>

</div>
{{end}}