{{ template "header" .}}
<div class="py-10">
    <header class="pb-4">
        <div>
            <h1 class="text-2xl font-bold leading-tight">{{ .locale.Tr "settings" }}</h1>
        </div>
    </header>
    <main>
        <div class="relative mx-auto max-w-[40rem] space-y-8">
            <div class="sm:grid {{ if not .disableForm }}grid-cols-2{{ else }}grid-cols-1{{ end }} gap-x-4 md:gap-x-8 space-y-8 md:space-y-0">
                <div class="w-full">
                    <div class="bg-white dark:bg-gray-900 rounded-md border border-1 border-gray-200 dark:border-gray-700 py-8 px-4 shadow sm:rounded-lg sm:px-10 h-full">
                        <h2 class="text-md font-bold text-slate-700 dark:text-slate-300">
                            {{ .locale.Tr "settings.change-username" }}
                        </h2>
                        <form class="space-y-6" action="{{ $.c.ExternalUrl }}/settings/username" method="post">
                            <div>
                                <div class="mt-1">
                                    <input id="username-change" name="username" type="text" required autocomplete="off" class="dark:bg-gray-800 appearance-none block w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md shadow-sm placeholder-gray-600 dark:placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                                </div>
                            </div>
                            <input type="hidden" name="_method" value="PUT">

                            <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent border-gray-200 dark:border-gray-700 text-sm font-medium rounded-md shadow-sm text-white dark:text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                                {{ .locale.Tr "settings.change-username" }}
                            </button>
                            {{ .csrfHtml }}
                        </form>
                    </div>
                </div>
                {{ if not .disableForm }}
                <div class="w-full">
                    <div class="bg-white dark:bg-gray-900 rounded-md border border-1 border-gray-200 dark:border-gray-700 py-8 px-4 shadow sm:rounded-lg sm:px-10">
                        <h2 class="text-md font-bold text-slate-700 dark:text-slate-300">
                            {{if .hasPassword}}
                                {{ .locale.Tr "settings.change-password" }}
                            {{else}}
                                {{ .locale.Tr "settings.create-password" }}
                            {{end}}
                        </h2>
                        <h3 class="text-sm text-gray-600 dark:text-gray-400 italic mb-4">
                            {{if .hasPassword}}
                                {{ .locale.Tr "settings.change-password-help" }}
                            {{else}}
                                {{ .locale.Tr "settings.create-password-help" }}
                            {{end}}
                        </h3>
                        <form class="space-y-6" action="{{ $.c.ExternalUrl }}/settings/password" method="post">
                            <div>
                                <label for="password-change" class="block text-sm font-medium text-slate-700 dark:text-slate-300"> {{ .locale.Tr "settings.password-label-title" }} </label>
                                <div class="mt-1">
                                    <input id="password-change" name="password" type="password" required autocomplete="off" class="dark:bg-gray-800 appearance-none block w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md shadow-sm placeholder-gray-600 dark:placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                                </div>
                            </div>
                            <input type="hidden" name="_method" value="PUT">

                            <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent border-gray-200 dark:border-gray-700 text-sm font-medium rounded-md shadow-sm text-white dark:text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                                {{if .hasPassword}}
                                    {{ .locale.Tr "settings.change-password" }}
                                {{else}}
                                    {{ .locale.Tr "settings.create-password" }}
                                {{end}}
                            </button>
                            {{ .csrfHtml }}
                        </form>
                    </div>
                </div>
                {{ end }}
            </div>
            <div class="w-full">
                <div class="bg-white dark:bg-gray-900 rounded-md border border-1 border-gray-200 dark:border-gray-700 py-8 px-4 shadow sm:rounded-lg sm:px-10">
                    <h2 class="text-md font-bold text-slate-700 dark:text-slate-300">
                        {{ .locale.Tr "settings.email" }}
                    </h2>
                    <h3 class="text-sm text-gray-600 dark:text-gray-400 italic mb-4">
                        {{ .locale.Tr "settings.email-help" }}
                    </h3>
                    <form class="space-y-6" action="{{ $.c.ExternalUrl }}/settings/email" method="post">
                        <div>
                            <div class="mt-1">
                                <input id="email" name="email" value="{{ .userLogged.Email }}" type="email" required autocomplete="off" class="dark:bg-gray-800 appearance-none block w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md shadow-sm placeholder-gray-600 dark:placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                            </div>
                        </div>
                        <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent border-gray-200 dark:border-gray-700 text-sm font-medium rounded-md shadow-sm text-white dark:text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">{{ .locale.Tr "settings.email-set" }}</button>
                        {{ .csrfHtml }}
                    </form>
                </div>
            </div>
            {{ if or .githubOauth .gitlabOauth .giteaOauth .oidcOauth }}
            <div class="w-full">
                <div class="bg-white dark:bg-gray-900 rounded-md border border-1 border-gray-200 dark:border-gray-700 py-8 px-4 shadow sm:rounded-lg sm:px-10">
                    <h2 class="text-md font-bold text-slate-700 dark:text-slate-300 mb-2">
                        {{ .locale.Tr "settings.link-accounts" }}
                    </h2>
                    <div class="gap-y-2">

                        {{ if .githubOauth }}
                            {{ if .userLogged.GithubID }}
                                <a href="{{ $.c.ExternalUrl }}/oauth/github/unlink" class="block w-full mb-2 text-center whitespace-nowrap text-slate-700 dark:text-slate-300{{ if .syncReposFromFS }} text-slate-500 cursor-not-allowed {{ end }}rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-2.5 py-2 text-xs font-medium text-gray-700 dark:text-white shadow-sm hover:bg-gray-100 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500 leading-3"
                                   onclick="return confirm('Are you sure you want to unlink your GitHub account? You may lose access to Opengist if it\'s your only way to log in.')">
                                    {{ .locale.Tr "settings.unlink-github-account" }}
                                </a>
                            {{ else }}
                                <a href="{{ $.c.ExternalUrl }}/oauth/github" class="block w-full mb-2 text-center whitespace-nowrap text-slate-700 dark:text-slate-300{{ if .syncReposFromFS }} text-slate-500 cursor-not-allowed {{ end }}rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-2.5 py-2 text-xs font-medium text-gray-700 dark:text-white shadow-sm hover:bg-gray-100 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500 leading-3">
                                    {{ .locale.Tr "settings.link-github-account" }}
                                </a>
                            {{ end }}
                        {{ end }}

                        {{ if .gitlabOauth }}
                            {{ if .userLogged.GitlabID }}
                                <a href="{{ $.c.ExternalUrl }}/oauth/gitlab/unlink" class="block w-full mb-2 text-center whitespace-nowrap text-slate-700 dark:text-slate-300{{ if .syncReposFromFS }} text-slate-500 cursor-not-allowed {{ end }}rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-2.5 py-2 text-xs font-medium text-gray-700 dark:text-white shadow-sm hover:bg-gray-100 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500 leading-3"
                                   onclick="return confirm('Are you sure you want to unlink your GitLab account? You may lose access to Opengist if it\'s your only way to log in.')">
                                    {{ .locale.Tr "settings.unlink-gitlab-account" }}
                                </a>
                            {{ else }}
                                <a href="{{ $.c.ExternalUrl }}/oauth/gitlab" class="block w-full mb-2 text-center whitespace-nowrap text-slate-700 dark:text-slate-300{{ if .syncReposFromFS }} text-slate-500 cursor-not-allowed {{ end }}rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-2.5 py-2 text-xs font-medium text-gray-700 dark:text-white shadow-sm hover:bg-gray-100 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500 leading-3">
                                    {{ .locale.Tr "settings.link-gitlab-account" }}
                                </a>
                            {{ end }}
                        {{ end }}

                        {{ if .giteaOauth }}
                            {{ if .userLogged.GiteaID }}
                                <a href="{{ $.c.ExternalUrl }}/oauth/gitea/unlink" class="block w-full text-center whitespace-nowrap text-slate-700 dark:text-slate-300{{ if .syncReposFromFS }} text-slate-500 cursor-not-allowed {{ end }}rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-2.5 py-2 text-xs font-medium text-gray-700 dark:text-white shadow-sm hover:bg-gray-200 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500 leading-3"
                                   onclick="return confirm('Are you sure you want to unlink your Gitea account? You may lose access to Opengist if it\'s your only way to log in.')">
                                    {{ .locale.Tr "settings.unlink-gitea-account" }}
                                </a>
                            {{ else }}
                                <a href="{{ $.c.ExternalUrl }}/oauth/gitea" class="block w-full text-center whitespace-nowrap text-slate-700 dark:text-slate-300{{ if .syncReposFromFS }} text-slate-500 cursor-not-allowed {{ end }}rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-2.5 py-2 text-xs font-medium text-gray-700 dark:text-white shadow-sm hover:bg-gray-200 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500 leading-3">
                                    {{ .locale.Tr "settings.link-gitea-account" }}
                                </a>
                            {{ end }}
                        {{ end }}
                        {{ if .oidcOauth }}
                            {{ if .userLogged.OIDCID }}
                                <a href="{{ $.c.ExternalUrl }}/oauth/openid-connect/unlink" class="block w-full text-center whitespace-nowrap text-slate-700 dark:text-slate-300{{ if .syncReposFromFS }} text-slate-500 cursor-not-allowed {{ end }}rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-2.5 py-2 text-xs font-medium text-gray-700 dark:text-white shadow-sm hover:bg-gray-200 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500 leading-3"
                                   onclick="return confirm('Are you sure you want to unlink your OpenID account? You may lose access to Opengist if it\'s your only way to log in.')">
                                    Unlink OpenID account
                                </a>
                            {{ else }}
                                <a href="{{ $.c.ExternalUrl }}/oauth/openid-connect" class="block w-full text-center whitespace-nowrap text-slate-700 dark:text-slate-300{{ if .syncReposFromFS }} text-slate-500 cursor-not-allowed {{ end }}rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-2.5 py-2 text-xs font-medium text-gray-700 dark:text-white shadow-sm hover:bg-gray-200 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500 leading-3">
                                    Link OpenID account
                                </a>
                            {{ end }}
                        {{ end }}
                    </div>
                </div>
            </div>
            {{ end }}

            <div class="sm:grid grid-cols-2 gap-x-4 md:gap-x-8">
                <div class="w-full">
                    <div class="bg-white dark:bg-gray-900 rounded-md border border-1 border-gray-200 dark:border-gray-700 py-8 px-4 shadow sm:rounded-lg sm:px-10">
                        <h2 class="text-md font-bold text-slate-700 dark:text-slate-300">
                            {{ .locale.Tr "auth.mfa.passkeys" }}
                        </h2>
                        <h3 class="text-sm text-gray-600 dark:text-gray-400 italic mb-4">
                            {{ .locale.Tr "auth.mfa.passkeys-help" }}
                        </h3>
                        <form class="space-y-6" id="webauthn">
                            <div>
                                <label for="passkeyname" class="block text-sm font-medium text-slate-700 dark:text-slate-300">{{ .locale.Tr "auth.mfa.passkey-name" }}</label>
                                <div class="mt-1">
                                    <input id="passkeyname" name="passkeyname" type="text" required autocomplete="off" class="dark:bg-gray-800 appearance-none block w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md shadow-sm placeholder-gray-600 dark:placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                                </div>
                            </div>
                            {{ .csrfHtml }}
                            <button id="bind-passkey-button" type="button" class="inline-flex items-center px-4 py-2 border border-transparent border-gray-200 dark:border-gray-700 text-sm font-medium rounded-md shadow-sm text-white dark:text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">{{ .locale.Tr "auth.mfa.bind-passkey" }}</button>
                        </form>
                        <div class="flex items-center justify-center mt-4">
                            <p id="login-passkey-wait" class="hidden text-sm font-medium items-center text-slate-700 dark:text-slate-300">{{ .locale.Tr "auth.mfa.waiting-for-passkey-input" }}</p>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="mt-6 flow-root">
                        <ul role="list" class="-my-5 divide-y divide-gray-300 dark:divide-gray-700 list-none">
                            {{ if .passkeys }}
                            {{ range $passkey := .passkeys }}
                            <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-700 dark:text-slate-300">{{ .Name }}</h3>
                                        <p class="text-xs text-gray-500 line-clamp-2">{{ $.locale.Tr "auth.mfa.passkey-added-at" }} <span class="moment-timestamp-date">{{ .CreatedAt }}</span></p>
                                        {{ if eq .LastUsedAt 0 }}
                                        <p class="text-xs text-gray-500 line-clamp-2">{{ $.locale.Tr "auth.mfa.passkey-never-used" }}</p>
                                        {{ else }}
                                        <p class="text-xs text-gray-500 line-clamp-2">{{ $.locale.Tr "auth.mfa.passkey-last-used" }} <span class="moment-timestamp">{{ .LastUsedAt }}</span></p>
                                        {{ end }}
                                    </div>
                                    <form action="{{ $.c.ExternalUrl }}/settings/passkeys/{{.ID}}" method="post" class="inline-block" onsubmit="return confirm('{{ $.locale.Tr "auth.mfa.delete-passkey-confirm" }}');">
                                        <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-200 dark:border-gray-700 text-xs font-medium rounded-md shadow-sm text-white dark:text-white bg-rose-600 hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500">{{ $.locale.Tr "auth.mfa.delete-passkey" }}</button>
                                    </form>
                                </div>
                            </li>
                            {{ end }}
                            {{ end }}
                        </ul>
                    </div>
                </div>
            </div>

            <div class="sm:grid grid-cols-2 gap-x-4 md:gap-x-8">
                <div class="w-full">
                    <div class="bg-white dark:bg-gray-900 rounded-md border border-1 border-gray-200 dark:border-gray-700 py-8 px-4 shadow sm:rounded-lg sm:px-10">
                        <h2 class="text-md font-bold text-slate-700 dark:text-slate-300">
                            {{ .locale.Tr "settings.add-ssh-key" }}
                        </h2>
                        <h3 class="text-sm text-gray-600 dark:text-gray-400 italic mb-4">
                            {{ .locale.Tr "settings.add-ssh-key-help" }}
                        </h3>
                        <form class="space-y-6" action="{{ $.c.ExternalUrl }}/settings/ssh-keys" method="post">
                            <div>
                                <label for="title" class="block text-sm font-medium text-slate-700 dark:text-slate-300"> {{ .locale.Tr "settings.add-ssh-key-title" }} </label>
                                <div class="mt-1">
                                    <input id="title" name="title" type="text" required autocomplete="off" class="dark:bg-gray-800 appearance-none block w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md shadow-sm placeholder-gray-600 dark: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-700 dark:text-slate-300"> {{ .locale.Tr "settings.add-ssh-key-content" }} </label>
                                <div class="mt-1">
                                    <textarea id="sshkey" required autocomplete="off" name="content" class="dark:bg-gray-800 appearance-none block w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md shadow-sm placeholder-gray-600 dark: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-200 dark:border-gray-700 text-sm font-medium rounded-md shadow-sm text-white dark:text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">{{ .locale.Tr "settings.add-ssh-key" }}</button>
                            {{ .csrfHtml }}
                        </form>
                    </div>
                </div>
                <div>
                    <div class="mt-6 flow-root">
                        <ul role="list" class="-my-5 divide-y divide-gray-300 dark: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-700 dark:text-slate-300">{{ .Title }}</h3>
                                                <p class="mt-1 text-xs text-slate-600 dark:text-slate-400 line-clamp-2 code" style="overflow-wrap: anywhere">SHA256:{{.SHA}}</p>
                                                <p class="text-xs text-gray-500 line-clamp-2">{{ $.locale.Tr "settings.ssh-key-added-at" }} <span class="moment-timestamp-date">{{ .CreatedAt }}</span></p>
                                                {{ if eq .LastUsedAt 0 }}
                                                    <p class="text-xs text-gray-500 line-clamp-2">{{ $.locale.Tr "settings.ssh-key-never-used" }}</p>
                                                {{ else }}
                                                    <p class="text-xs text-gray-500 line-clamp-2">{{ $.locale.Tr "settings.ssh-key-last-used" }} <span class="moment-timestamp">{{ .LastUsedAt }}</span></p>
                                                {{ end }}
                                            </div>
                                            <form action="{{ $.c.ExternalUrl }}/settings/ssh-keys/{{.ID}}" method="post" class="inline-block" onsubmit="return confirm('{{ $.locale.Tr "settings.delete-ssh-key-confirm" }}')">
                                                <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-200 dark:border-gray-700 text-xs font-medium rounded-md shadow-sm text-white dark:text-white bg-rose-600 hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500">{{ $.locale.Tr "settings.delete-ssh-key" }}</button>
                                            </form>
                                        </div>
                                    </li>
                                {{ end }}
                            {{ end }}
                        </ul>
                    </div>
                </div>
            </div>
            <div class="w-full">
                <div class="bg-white dark:bg-gray-900 rounded-md border border-1 border-gray-200 dark:border-gray-700 py-8 px-4 shadow sm:rounded-lg sm:px-10">
                    <h2 class="text-md font-bold text-slate-700 dark:text-slate-300">
                        {{ .locale.Tr "settings.delete-account" }}
                    </h2>
                    <form class="space-y-6" action="{{ $.c.ExternalUrl }}/settings/account" method="post" onsubmit="return confirm('{{ .locale.Tr "settings.delete-account-confirm" }}')">
                        <input type="hidden" name="_method" value="DELETE">
                        <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent border-gray-200 dark:border-gray-700 text-sm font-medium rounded-md shadow-sm text-white dark:text-white bg-rose-600 hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500 mt-2">{{ .locale.Tr "settings.delete-account" }}</button>
                        {{ .csrfHtml }}
                    </form>
                </div>
            </div>
        </div>
    </main>
</div>

<script type="module" src="{{ asset "webauthn.ts" }}"></script>


{{ template "footer" .}}