{{define "title"}}Welcome · restic-manager{{end}}

{{define "content"}}
{{$page := .Page}}
<div class="flex-1 flex flex-col items-center justify-center px-8 py-12">

  <div class="w-[420px]">
    <div class="flex justify-center mb-10">
      <div class="mono text-base text-ink font-medium tracking-[0.01em]">restic-manager</div>
    </div>

    <h1 class="text-[22px] font-medium tracking-[-0.005em] text-center">
      Create the first administrator
    </h1>
    <p class="text-pretty text-[13px] text-ink-mute mt-3 leading-[1.6] text-center">
      This server has no users yet. The account you create here is the
      initial administrator. This page is only available until that
      account exists.
    </p>

    {{if $page.Error}}
      <div class="mt-5 px-3 py-2.5 rounded-[5px] text-xs"
           style="background: color-mix(in oklch, var(--bad), transparent 88%); border: 1px solid color-mix(in oklch, var(--bad), transparent 70%); color: oklch(0.85 0.10 25);">
        {{$page.Error}}
      </div>
    {{end}}

    <form method="post" action="/bootstrap" class="mt-7 space-y-4">
      <div>
        <label class="field-label" for="bs-username">Username</label>
        <input id="bs-username" name="username" type="text"
               class="field mono" autocomplete="username" autofocus required
               value="{{$page.Username}}" />
      </div>
      <div>
        <label class="field-label" for="bs-pw">Password</label>
        <input id="bs-pw" name="password" type="password" class="field"
               required minlength="12" autocomplete="new-password" />
        <div class="field-help">Minimum 12 characters.</div>
      </div>
      <div>
        <label class="field-label" for="bs-pw2">Confirm password</label>
        <input id="bs-pw2" name="password_confirm" type="password" class="field"
               required minlength="12" autocomplete="new-password" />
      </div>
      <button type="submit" class="btn btn-primary btn-block btn-lg">
        Create administrator
      </button>
    </form>

    <div class="mt-6 pt-5 border-t border-line-soft text-center">
      <p class="text-pretty text-xs text-ink-mute leading-[1.65]">
        Lost the browser session mid-flow? The bootstrap token is also
        printed in the server logs and can be POSTed to
        <span class="mono text-ink-mid">/api/bootstrap</span>.
      </p>
    </div>
  </div>

  <div class="mt-20 flex gap-3.5 items-center text-[11px] text-ink-fade">
    <span class="mono">restic-manager {{.Version}}</span>
  </div>

</div>
{{end}}