{{ define "title" }}Setup{{end}}

{{ define "body" }}
<div class="flex items-center justify-center min-h-screen p-8 pt-16">
    <div class="absolute top-2 left-2">
        {{ template "logo" . }}
    </div>
    {{template "setup_form" . }}
</div>
{{ end }}

{{ define "setup_form" }}
<form hx-post="/setup" hx-swap="outerHTML" class="w-full max-w-sm flex flex-col gap-4">
    <div>
        <h1 class="flex gap-1 items-center text-lg font-semibold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                style="height: 20px; width: auto;">
                <path fill-rule="evenodd"
                    d="M11.078 2.25c-.917 0-1.699.663-1.85 1.567L9.05 4.889c-.02.12-.115.26-.297.348a7.493 7.493 0 0 0-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 0 0-2.282.819l-.922 1.597a1.875 1.875 0 0 0 .432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 0 0 0 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 0 0-.432 2.385l.922 1.597a1.875 1.875 0 0 0 2.282.818l1.019-.382c.115-.043.283-.031.45.082.312.214.641.405.985.57.182.088.277.228.297.35l.178 1.071c.151.904.933 1.567 1.85 1.567h1.844c.916 0 1.699-.663 1.85-1.567l.178-1.072c.02-.12.114-.26.297-.349.344-.165.673-.356.985-.57.167-.114.335-.125.45-.082l1.02.382a1.875 1.875 0 0 0 2.28-.819l.923-1.597a1.875 1.875 0 0 0-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 0 0 0-1.139c-.016-.2.059-.352.153-.43l.84-.692c.708-.582.891-1.59.433-2.385l-.922-1.597a1.875 1.875 0 0 0-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 0 0-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 0 0-1.85-1.567h-1.843ZM12 15.75a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z"
                    clip-rule="evenodd" />
            </svg>

            Setup
        </h1>
        <h5 class="text-sm">
            Create your admin account
        </h5>
    </div>
    <div>
        <fieldset class="fieldset">
            <legend class="fieldset-legend">Name</legend>
            <input class="input w-full {{ with .Form.Errors.Name }} input-error {{ end }}" id="setup_form--name"
                name="name" required autofocus autocomplete="name" value="{{ .Form.Name}}" placeholder="John Doe" />
            {{ with .Form.Errors.Name }}
            <div class="label text-red-500">{{ . }}</div>
            {{ end }}
        </fieldset>
        <fieldset class="fieldset">
            <legend class="fieldset-legend">E-mail</legend>
            <input class="input w-full {{ with .Form.Errors.Email }} input-error {{ end }}" id="setup_form--email"
                name="email" type="email" autocomplete="email" value="{{ .Form.Email}}" placeholder="email@example.com"
                required />
            {{ with .Form.Errors.Email }}
            <div class="label text-red-500">{{ . }}</div>
            {{ end }}
        </fieldset>
        <fieldset class="fieldset">
            <legend class="fieldset-legend">Password</legend>
            <input class="input w-full {{ with .Form.Errors.Password }} input-error {{ end }}" id="setup_form--password"
                name="password" type="password" required autocomplete="new-password" placeholder="••••••••" />
            {{ with .Form.Errors.Password }}
            <div class="label text-red-500">{{ . }}</div>
            {{ end }}
        </fieldset>
    </div>
    <button type="submit" class="btn btn-neutral">
        Submit
    </button>
</form>
{{ end }}