{{ define "main" }}
{{ if .PasswordChanged }}
<h2>Password Reset Successful</h2>
<p>
  Your password has been set successfully. You can now try to <a href="/login">log in</a>!
</p>
{{ else }}
<h1>User Account</h1>
<h2>Password Reset</h2>
<form action="/accounts/{{ .Account.Id }}/reset/{{ .Token }}" enctype="multipart/form-data" method="post">
  <fieldset>
    <legend>Set Password</legend>
    <p>
      You have been invited to set a password for this account. Please choose a
      strong password or passphrase that you haven't used before. Think about a
      combination of words that would be memorable yet complex
      like <a href="https://xkcd.com/936/">Correct-Horse-Battery-Staple</a>.
    </p>
    <div class="flex-row">
      <label for="password">Password</label>
      <input autofocus
             class="flex-stretch{{ if .PasswordInvalid }} error{{ end }}"
             id="password"
             minlength="8"
             name="password"
             type="password"
             required>
      <button type="submit" value="edit">Set Password</button>
    </div>
    {{ if .PasswordInvalid }}
    <span class="error">
      <span class="tooltip">
        Invalid password.
        <span class="tooltip-text">
          Passwords must be at least 8 characters long.
        </span>
      </span>
    </span>
    {{ end }}
  </fieldset>
</form>
<h2>Status</h2>
<p>
  The account
  <strong>{{ .Account.Username }}</strong>
  was created on
  <strong>{{ .Account.Created }}</strong>
  and
  {{ if eq .Account.Created .Account.LastLogin }}
  <strong>never logged in</strong>.
  {{ else }}
  last logged in on
  <strong>{{ .Account.LastLogin }}</strong>.
  {{ end }}
</p>
{{ end }}
{{ end }}