{{ define "content" }}
<div class="space-y-6">
    <header class="space-y-1">
        <h1 class="text-2xl font-bold leading-tight">{{ .locale.Tr "settings" }}</h1>
        <p class="text-muted-foreground text-sm">{{ .locale.Tr "settings.header.ssh" }}</p>
    </header>

    <div class="space-y-6">
        <!-- Add key -->
        <section class="bg-card h-fit rounded-lg border">
            <div class="space-y-1 border-b px-4 py-3">
                <h2 class="font-semibold">{{ .locale.Tr "settings.add-ssh-key" }}</h2>
                <p class="text-muted-foreground text-sm">{{ .locale.Tr "settings.add-ssh-key-help" }}</p>
            </div>
            <form action="{{ .c.ExternalUrl }}/-/settings/ssh-keys" method="post" class="space-y-4 p-4">
                {{ .csrfHtml }}
                <div class="space-y-1.5">
                    <label for="title" class="text-sm font-medium">{{ .locale.Tr "settings.add-ssh-key-title" }}</label>
                    <input id="title" name="title" type="text" required autocomplete="off" class="input h-9 w-full max-w-sm" />
                </div>
                <div class="space-y-1.5">
                    <label for="sshkey" class="text-sm font-medium">{{ .locale.Tr "settings.add-ssh-key-content" }}</label>
                    <textarea id="sshkey" name="content" rows="4" required autocomplete="off" class="input w-full max-w-lg font-mono text-xs" placeholder="ssh-ed25519 AAAA..."></textarea>
                </div>
                <div class="flex">
                    <button type="submit" class="btn-sm">{{ .locale.Tr "settings.add-ssh-key" }}</button>
                </div>
            </form>
        </section>

        <!-- Key list -->
        <div class="space-y-3">
            {{ if .sshKeys }}
            {{ range $key := .sshKeys }}
            <section class="bg-card rounded-lg border p-4">
                <div class="flex items-start gap-3">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="text-muted-foreground mt-0.5 size-8 shrink-0" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="15.5" r="5.5"/><path d="m21 2-9.6 9.6M15.5 7.5l3 3L22 7l-3-3"/></svg>
                    <div class="min-w-0 flex-auto space-y-1">
                        <h3 class="text-sm font-semibold">{{ .Title }}</h3>
                        <p class="text-muted-foreground code text-xs" style="overflow-wrap: anywhere">SHA256:{{ .SHA }}</p>
                        <p class="text-muted-foreground text-xs">{{ $.locale.Tr "settings.ssh-key-added-at" }} {{ .CreatedAt | humanDate }}</p>
                        {{ if eq .LastUsedAt 0 }}
                        <p class="text-muted-foreground text-xs">{{ $.locale.Tr "settings.ssh-key-never-used" }}</p>
                        {{ else }}
                        <p class="text-muted-foreground text-xs">{{ $.locale.Tr "settings.ssh-key-last-used" }} {{ .LastUsedAt | humanTimeDiff }}</p>
                        {{ end }}
                    </div>
                    <form action="{{ $.c.ExternalUrl }}/-/settings/ssh-keys/{{ .ID }}" method="post" class="shrink-0">
                        {{ $.csrfHtml }}
                        <input type="hidden" name="_method" value="DELETE" />
                        <button type="submit" class="btn-sm bg-destructive text-white hover:bg-destructive/90"
                                _="on click if not window.confirm('{{ $.locale.Tr "settings.delete-ssh-key-confirm" }}') halt the event">{{ $.locale.Tr "settings.delete-ssh-key" }}</button>
                    </form>
                </div>
            </section>
            {{ end }}
            {{ else }}
            <div class="text-muted-foreground flex h-full min-h-32 items-center justify-center rounded-lg border border-dashed p-6 text-sm">
                {{ .locale.Tr "settings.add-ssh-key-help" }}
            </div>
            {{ end }}
        </div>
    </div>
</div>
{{ end }}