{{define "content"}}
<div class="auth-card">
  {{template "logo" .}}
  <h1 class="auth-title">{{.ThemeTitle}}</h1>

  {{if eq .Mode "expired"}}
    <div class="auth-error" role="alert">{{.Error}}</div>
    <a class="auth-btn" href="{{authURL "/authorize"}}?client_id={{.ClientID}}&redirect_uri={{.RedirectURI}}&state={{.State}}&scope={{.Scope}}&response_type=code&nonce={{.Nonce}}&code_challenge={{.CodeChallenge}}&code_challenge_method={{.CodeChallengeMethod}}&prompt={{.LoginPrompt}}&max_age={{.MaxAge}}">Back to login</a>

  {{else if eq .Mode "sent"}}
    <p class="auth-text">If an account with that email exists, we've sent a sign-in link and code.</p>
    <p class="auth-text">Wait one minute before requesting another email. Resending does not extend the sign-in window. Too many incorrect codes may prevent another email until that window expires.</p>
    {{if .Error}}
    <div class="auth-error" role="alert">{{.Error}}</div>
    {{end}}
    <form method="POST" action="{{authURL "/magic-link/verify"}}" style="width:100%">
      {{ .csrfField }}
      <input type="hidden" name="redirect_uri" value="{{.RedirectURI}}" />
      <input type="hidden" name="state" value="{{.State}}" />
      <input type="hidden" name="client_id" value="{{.ClientID}}" />
      <input type="hidden" name="scope" value="{{.Scope}}" />
      <input type="hidden" name="nonce" value="{{.Nonce}}" />
      <input type="hidden" name="code_challenge" value="{{.CodeChallenge}}" />
      <input type="hidden" name="code_challenge_method" value="{{.CodeChallengeMethod}}" />
      <input type="hidden" name="prompt" value="{{.Prompt}}" />
      <input type="hidden" name="max_age" value="{{.MaxAge}}" />
      <input type="hidden" name="authorize_sig" value="{{.AuthorizeSig}}" />
      <input type="hidden" name="email" value="{{.Email}}" />
      <div class="auth-field">
        <label class="auth-label" for="code">Enter code from email</label>
        <input class="auth-input" type="text" id="code" name="code" required autocomplete="one-time-code" inputmode="numeric" maxlength="6" pattern="[0-9]{6}" placeholder="000000" style="text-align:center;letter-spacing:6px;font-size:1.25rem;" />
      </div>
      <button class="auth-btn" type="submit">Verify code</button>
    </form>
    <div class="auth-link" style="margin-top:15px;"><a href="{{authURL "/authorize"}}?client_id={{.ClientID}}&redirect_uri={{.RedirectURI}}&state={{.State}}&scope={{.Scope}}&response_type=code&nonce={{.Nonce}}&code_challenge={{.CodeChallenge}}&code_challenge_method={{.CodeChallengeMethod}}&prompt={{.LoginPrompt}}&max_age={{.MaxAge}}">Back to login</a></div>

  {{else}}
    <p class="auth-text-muted">Enter your email and we'll send you a link to sign in.</p>
    {{if .Error}}
    <div class="auth-error" role="alert">{{.Error}}</div>
    {{end}}
    <form method="POST" action="{{authURL "/magic-link"}}" style="width:100%">
      {{ .csrfField }}
      <input type="hidden" name="redirect_uri" value="{{.RedirectURI}}" />
      <input type="hidden" name="state" value="{{.State}}" />
      <input type="hidden" name="client_id" value="{{.ClientID}}" />
      <input type="hidden" name="scope" value="{{.Scope}}" />
      <input type="hidden" name="nonce" value="{{.Nonce}}" />
      <input type="hidden" name="code_challenge" value="{{.CodeChallenge}}" />
      <input type="hidden" name="code_challenge_method" value="{{.CodeChallengeMethod}}" />
      <input type="hidden" name="prompt" value="{{.Prompt}}" />
      <input type="hidden" name="max_age" value="{{.MaxAge}}" />
      <input type="hidden" name="authorize_sig" value="{{.AuthorizeSig}}" />
      <div class="auth-field">
        <label class="auth-label" for="email">Email</label>
        <input class="auth-input" type="email" id="email" name="email" required autocomplete="email" />
      </div>
      <button class="auth-btn" type="submit">Send sign-in link</button>
      <div class="auth-link" style="margin-top:15px;"><a href="{{authURL "/authorize"}}?client_id={{.ClientID}}&redirect_uri={{.RedirectURI}}&state={{.State}}&scope={{.Scope}}&response_type=code&nonce={{.Nonce}}&code_challenge={{.CodeChallenge}}&code_challenge_method={{.CodeChallengeMethod}}&prompt={{.LoginPrompt}}&max_age={{.MaxAge}}">Back to login</a></div>
    </form>
  {{end}}
</div>
{{end}}