{{ template "header" .}}
<div class="py-10">
    <header class="pb-4">
        <div>
            <h1 class="text-2xl font-bold leading-tight">SSH Keys</h1>
            <p class="text-sm text-gray-400 italic">Used only to push gists using Git via SSH</p>
        </div>
    </header>
    <main>
        <div >
            <div class="sm:grid grid-cols-2 gap-x-4 md:gap-x-16">
                <div class="w-full">
                    <div class="bg-gray-900 rounded-md border border-1 border-gray-700 py-8 px-4 shadow sm:rounded-lg sm:px-10">
                        <h2 class="text-md font-bold text-slate-300 mb-4">
                            Add SSH Key
                        </h2>
                        <form class="space-y-6" action="#" method="post">
                            <div>
                                <label for="title" class="block text-sm font-medium text-slate-300"> Title </label>
                                <div class="mt-1">
                                    <input id="title" name="title" type="text" required autocomplete="off" class="bg-gray-800 appearance-none block w-full px-3 py-2 border border-gray-700 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                                </div>
                            </div>

                            <div class="mt-8">
                                <label for="sshkey" class="block text-sm font-medium text-slate-300"> Key </label>
                                <div class="mt-1">
                                    <textarea id="sshkey" required autocomplete="off" name="content" class="bg-gray-800 appearance-none block w-full px-3 py-2 border border-gray-700 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"></textarea>
                                </div>
                            </div>
                            <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent border-gray-700 text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">Add key</button>
                            {{ .csrfHtml }}
                        </form>
                    </div>
                </div>
                <div>
                    <div class="mt-6 flow-root">
                        <ul role="list" class="-my-5 divide-y divide-gray-700 list-none">
                            {{ if .sshKeys }}
                                {{ range $key := .sshKeys }}
                                    <li class="py-5">
                                        <div class="inline-flex">
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12 mr-4">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z" />
                                            </svg>
                                            <div>
                                                <h3 class="text-sm font-semibold text-slate-300">{{ .Title }}</h3>
                                                <p class="mt-1 text-xs text-slate-400 line-clamp-2 code" style="overflow-wrap: anywhere">SHA256:{{.SHA}}</p>
                                                <p class="text-xs text-gray-500 line-clamp-2">Added <span class="moment-timestamp-date">{{ .CreatedAt }}</span></p>
                                                {{ if eq .LastUsedAt 0 }}
                                                    <p class="text-xs text-gray-500 line-clamp-2">Never used</p>
                                                {{ else }}
                                                    <p class="text-xs text-gray-500 line-clamp-2">Last used <span class="moment-timestamp">{{ .LastUsedAt }}</span></p>
                                                {{ end }}
                                            </div>
                                            <form action="/ssh-keys/{{.ID}}" method="post" class="inline-block" onsubmit="return confirm('Confirm deletion of SSH key')">
                                                <input type="hidden" name="_method" value="DELETE">
                                                {{ $.csrfHtml }}

                                                <button type="submit" class="align-middle items-center leading-2 ml-2 px-3 py-1 border border-transparent border-gray-700 text-xs font-medium rounded-md shadow-sm text-white bg-rose-600 hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500">Delete</button>
                                            </form>
                                        </div>
                                    </li>
                                {{ end }}
                            {{ end }}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>
{{ template "footer" .}}