{{ define "title" }}settings{{ end }}

{{ define "content" }}
    <h1>settings</h1>

    <section class="mb-8">
        <h2 class="text-xl mb-4">profile</h2>
        <dl class="grid grid-cols-[auto_1fr] gap-x-4">
            <dt>handle</dt>
            <dd>{{ .LoggedInUser.Handle }}</dd>
            <dt>did</dt>
            <dd>{{ .LoggedInUser.Did }}</dd>
            <dt>pds</dt>
            <dd>{{ .LoggedInUser.Pds }}</dd>
        </dl>
    </section>

    <section>
        <h2 class="text-xl mb-4">ssh keys</h2>
        <form
            hx-put="/settings/keys"
            hx-swap="none"
            class="max-w-2xl space-y-4 mb-8"
        >
            <div>
                <label for="name" class="block mb-1">key name</label>
                <input
                    type="text"
                    id="name"
                    name="name"
                    required
                    class="w-full"
                />
            </div>

            <div>
                <label for="key" class="block mb-1">pub key</label>
                <textarea
                    id="key"
                    name="key"
                    placeholder="ssh-rsa AAAAAA..."
                    required
                    class="w-full h-24"
                ></textarea>
            </div>

            <button class="btn" type="submit">add key</button>

            <div id="settings-keys" class="error"></div>
        </form>

        <h3 class="text-lg mb-2">existing keys</h3>
        <ul id="key-list" class="space-y-4">
            {{ range .PubKeys }}
                <li class="p-4 bg-gray-50 rounded">
                    <h4 class="font-bold mb-2">{{ .Name }}</h4>
                    <code class="block text-sm break-all">{{ .Key }}</code>
                </li>
            {{ else }}
                <p class="text-gray-600">no ssh keys added yet</p>
            {{ end }}
        </ul>
    </section>
{{ end }}