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

{{define "content"}}
{{template "host_chrome" .}}
{{$page := .Page}}
{{$host := $page.Host}}
<div class="max-w-[1280px] mx-auto px-8 pb-14 pt-6 grid grid-cols-12 gap-6 items-start">

  <div class="col-span-8">

    {{/* ---------- Connection ---------- */}}
    <h2 class="text-[11.5px] font-semibold uppercase tracking-[0.08em] text-ink-mute mb-3.5">Connection</h2>
    <form method="post" action="/hosts/{{$host.ID}}/repo/credentials" class="panel rounded-[7px] p-5">
      {{if $page.CredentialsError}}
        <div class="rounded-[6px] px-3.5 py-3 text-[13px] mb-4"
             style="border: 1px solid color-mix(in oklch, var(--bad), transparent 60%); background: color-mix(in oklch, var(--bad), transparent 92%);">
          {{$page.CredentialsError}}
        </div>
      {{end}}
      {{if eq $page.SavedSection "credentials"}}
        <div class="text-[12px] text-ok mb-3 mono">✓ saved</div>
      {{end}}
      <div class="grid grid-cols-2 gap-4">
        <div>
          <label class="field-label" for="repo_url">Repo URL</label>
          <input id="repo_url" name="repo_url" type="text" class="field mono" value="{{$page.RepoURL}}" required />
          <div class="field-help">e.g. <span class="mono text-ink-mid">rest:http://192.168.0.99:8000/{{$host.Name}}/</span></div>
        </div>
        <div>
          <label class="field-label" for="repo_username">Username</label>
          <input id="repo_username" name="repo_username" type="text" class="field mono" value="{{$page.RepoUsername}}" />
          <div class="field-help">Sent as the rest-server <span class="mono text-ink-mid">--htpasswd</span> user.</div>
        </div>
        <div class="col-span-2">
          <label class="field-label" for="repo_password">Password</label>
          <input id="repo_password" name="repo_password" type="password" class="field mono" placeholder="{{if $page.HasPassword}}•••••••••••••••• · stored, leave blank to keep{{else}}— not yet set —{{end}}" autocomplete="new-password" />
          <div class="field-help">Stored AEAD-encrypted; pushed to the agent over WS. Leave blank to keep the existing password.</div>
        </div>
      </div>
      <div class="mt-4 pt-4 border-t border-line-soft flex gap-2">
        <button type="submit" class="btn btn-primary">Save credentials</button>
      </div>
    </form>

    {{/* ---------- Bandwidth ---------- */}}
    <h2 class="text-[11.5px] font-semibold uppercase tracking-[0.08em] text-ink-mute mt-7 mb-3.5">Bandwidth · host-wide</h2>
    <form method="post" action="/hosts/{{$host.ID}}/repo/bandwidth" class="panel rounded-[7px] p-5">
      {{if $page.BandwidthError}}
        <div class="rounded-[6px] px-3.5 py-3 text-[13px] mb-4"
             style="border: 1px solid color-mix(in oklch, var(--bad), transparent 60%); background: color-mix(in oklch, var(--bad), transparent 92%);">
          {{$page.BandwidthError}}
        </div>
      {{end}}
      {{if eq $page.SavedSection "bandwidth"}}
        <div class="text-[12px] text-ok mb-3 mono">✓ saved</div>
      {{end}}
      <div class="grid grid-cols-2 gap-4">
        <div>
          <label class="field-label" for="bandwidth_up">Upload limit <span class="text-ink-fade">· KB/s · blank = no cap</span></label>
          <input id="bandwidth_up" name="bandwidth_up" type="number" min="0" class="field mono" value="{{$page.BandwidthUp}}" placeholder="—" />
        </div>
        <div>
          <label class="field-label" for="bandwidth_down">Download limit <span class="text-ink-fade">· KB/s · blank = no cap</span></label>
          <input id="bandwidth_down" name="bandwidth_down" type="number" min="0" class="field mono" value="{{$page.BandwidthDown}}" placeholder="—" />
        </div>
      </div>
      <div class="field-help mt-3">
        Applies to every backup, restore, and prune job for this host. Maps to <span class="mono text-ink-mid">restic --limit-upload</span> / <span class="mono text-ink-mid">--limit-download</span>.
      </div>
      <div class="mt-4 pt-4 border-t border-line-soft flex gap-2">
        <button type="submit" class="btn btn-primary">Save bandwidth caps</button>
      </div>
    </form>

    {{/* ---------- Maintenance ---------- */}}
    <h2 class="text-[11.5px] font-semibold uppercase tracking-[0.08em] text-ink-mute mt-7 mb-3.5">Maintenance · server-side cadences</h2>
    <form method="post" action="/hosts/{{$host.ID}}/repo/maintenance" class="panel rounded-[7px] p-5">
      {{if $page.MaintenanceError}}
        <div class="rounded-[6px] px-3.5 py-3 text-[13px] mb-4"
             style="border: 1px solid color-mix(in oklch, var(--bad), transparent 60%); background: color-mix(in oklch, var(--bad), transparent 92%);">
          {{$page.MaintenanceError}}
        </div>
      {{end}}
      {{if eq $page.SavedSection "maintenance"}}
        <div class="text-[12px] text-ok mb-3 mono">✓ saved</div>
      {{end}}

      {{$m := $page.Maintenance}}
      <div class="grid grid-cols-12 gap-3 items-center text-[13px] mb-3 text-[11px] uppercase tracking-[0.08em] text-ink-fade">
        <div class="col-span-2">Verb</div>
        <div class="col-span-5">Cron cadence</div>
        <div class="col-span-3">Notes</div>
        <div class="col-span-2 text-right">Enabled</div>
      </div>

      <div class="grid grid-cols-12 gap-3 items-center py-3 border-t border-line-soft">
        <div class="col-span-2 mono text-ink font-medium">forget</div>
        <div class="col-span-5"><input type="text" name="forget_cron" class="field mono" value="{{$m.ForgetCron}}" required /></div>
        <div class="col-span-3 text-[12px] text-ink-fade leading-[1.5]">Per source group, using each group's retention policy.</div>
        <div class="col-span-2 text-right">
          <label class="inline-flex items-center gap-2 cursor-pointer">
            <input type="checkbox" name="forget_enabled" value="1" {{if $m.ForgetEnabled}}checked{{end}} class="w-3.5 h-3.5" />
            <span class="mono text-[11px]">on</span>
          </label>
        </div>
      </div>

      <div class="grid grid-cols-12 gap-3 items-center py-3 border-t border-line-soft">
        <div class="col-span-2 mono text-ink font-medium">prune</div>
        <div class="col-span-5"><input type="text" name="prune_cron" class="field mono" value="{{$m.PruneCron}}" required /></div>
        <div class="col-span-3 text-[12px] text-ink-fade leading-[1.5]">Reclaims storage made dead by forget. Heavy — weekly only.</div>
        <div class="col-span-2 text-right">
          <label class="inline-flex items-center gap-2 cursor-pointer">
            <input type="checkbox" name="prune_enabled" value="1" {{if $m.PruneEnabled}}checked{{end}} class="w-3.5 h-3.5" />
            <span class="mono text-[11px]">on</span>
          </label>
        </div>
      </div>

      <div class="grid grid-cols-12 gap-3 items-center py-3 border-t border-line-soft">
        <div class="col-span-2 mono text-ink font-medium">check</div>
        <div class="col-span-5"><input type="text" name="check_cron" class="field mono" value="{{$m.CheckCron}}" required /></div>
        <div class="col-span-3 text-[12px] text-ink-fade leading-[1.5]">
          <span class="mono text-ink-mid">--read-data-subset</span>
          <input type="number" name="check_subset_pct" min="0" max="100" value="{{$m.CheckSubsetPct}}" class="field mono inline-block w-16 px-2 py-1" style="font-size: 11px;" />%
        </div>
        <div class="col-span-2 text-right">
          <label class="inline-flex items-center gap-2 cursor-pointer">
            <input type="checkbox" name="check_enabled" value="1" {{if $m.CheckEnabled}}checked{{end}} class="w-3.5 h-3.5" />
            <span class="mono text-[11px]">on</span>
          </label>
        </div>
      </div>

      <div class="mt-4 pt-4 border-t border-line-soft flex gap-2 items-center">
        <button type="submit" class="btn btn-primary">Save cadences</button>
        <span class="text-[12px] text-ink-fade ml-2">Server-side ticker drives execution — independent of the agent's cron.</span>
      </div>
    </form>

    {{/* ---------- Danger zone ---------- */}}
    <h2 class="text-[11.5px] font-semibold uppercase tracking-[0.08em] text-bad mt-9 mb-3.5">Danger zone</h2>
    <div class="panel rounded-[7px] p-5"
         style="border-color: color-mix(in oklch, var(--bad), transparent 70%);">
      <div class="flex items-start justify-between gap-6">
        <div class="flex-1">
          <div class="text-[14px] font-semibold text-ink">Re-initialise repo</div>
          <p class="text-pretty text-[12.5px] text-ink-mid leading-[1.6] mt-2 max-w-[580px]">
            Tries to <span class="mono text-ink-mid">DELETE</span> the rest-server's copy of this repo, then runs
            <span class="mono text-ink-mid">restic init</span> against the empty path. Most rest-server setups run with
            <span class="mono text-ink-mid">--append-only</span> and refuse the DELETE — the future P2R-09 flow surfaces
            guided cleanup steps in that case.
          </p>
          <p class="text-[12px] text-ink-fade leading-[1.55] mt-2">
            All snapshots are lost; this host's schedule version stays the same and the agent's
            <span class="mono text-ink-mid">secrets.enc</span> is reused.
          </p>
        </div>
        <button class="btn btn-danger btn-lg flex-none" disabled
                title="re-init flow lands in P2R-09">Re-init repo…</button>
      </div>
    </div>
  </div>

  {{/* ---------- right rail ---------- */}}
  <aside class="col-span-4">
    <h2 class="text-[11.5px] font-semibold uppercase tracking-[0.08em] text-ink-mute mb-3.5">Storage</h2>
    <div class="panel rounded-[7px] p-5">
      <div class="grid grid-cols-2 gap-4">
        <div>
          <div class="text-[11px] text-ink-fade uppercase tracking-[0.08em]">Repo size</div>
          <div class="mono text-[20px] text-ink mt-1">{{bytes $host.RepoSizeBytes}}</div>
        </div>
        <div>
          <div class="text-[11px] text-ink-fade uppercase tracking-[0.08em]">Snapshots</div>
          <div class="mono text-[20px] text-ink mt-1">{{comma $host.SnapshotCount}}</div>
          <div class="text-[11.5px] text-ink-mute mt-0.5">across {{len $page.GroupNames}} source group{{if ne (len $page.GroupNames) 1}}s{{end}}</div>
        </div>
      </div>
    </div>

    {{if gt (len $page.GroupNames) 0}}
      <h2 class="text-[11.5px] font-semibold uppercase tracking-[0.08em] text-ink-mute mt-7 mb-3.5">Snapshots by source</h2>
      <div class="panel rounded-[7px] p-4">
        <div class="grid items-baseline text-[13px]" style="grid-template-columns: 1fr auto auto; gap: 8px 14px;">
          {{range $page.GroupNames}}
            <span class="mono text-ink">{{.}}</span>
            <span class="mono text-ink-mute text-right">{{index $page.SnapshotsByTag .}}</span>
            <span class="mono text-ink-fade text-[11px]">snapshots</span>
          {{end}}
          {{if gt $page.UntaggedSnapshots 0}}
            <span class="mono text-ink-fade italic">untagged</span>
            <span class="mono text-ink-mute text-right">{{$page.UntaggedSnapshots}}</span>
            <span class="mono text-ink-fade text-[11px]">snapshots</span>
          {{end}}
        </div>
      </div>
    {{end}}

    <div class="panel rounded-[6px] px-4 py-3.5 mt-5" style="background: var(--bg);">
      <div class="text-[11px] uppercase tracking-[0.08em] text-ink-fade">Untagged snapshots</div>
      <p class="text-[12px] text-ink-mid mt-1.5 leading-[1.55]">
        Any snapshot not tagged with one of this host's source groups is left alone — forget never touches it. Useful if someone runs
        <span class="mono text-ink-mid">restic backup</span> outside restic-manager; nothing here will silently delete those.
      </p>
    </div>
  </aside>

</div>
{{end}}