{{template "layout" .}}

{{define "title"}}bbq — log in{{end}}

{{define "content"}}
<div class="event-header">
  <div class="event-tag">Account</div>
  <h1 class="event-title">Log in</h1>
  <p style="font-family:'DM Mono',monospace;font-size:0.8rem;color:#555;margin-top:8px;">
    Enter your phone number to receive a login code.
  </p>
</div>

<div class="claim-form-wrapper">
  {{if eq .Step "phone"}}
  <form method="POST" action="/login">
    <div class="form-row">
      <label>Phone</label>
      <input type="tel" name="phone" placeholder="(555) 123-4567" required autofocus>
    </div>
    <button class="btn-submit" type="submit">Send code &#8599;</button>
  </form>
  {{else}}
  <form method="POST" action="/login/verify">
    <input type="hidden" name="phone" value="{{.Phone}}">
    <p style="font-family:'DM Mono',monospace;font-size:0.78rem;color:#555;margin-bottom:16px;">
      Code sent to <strong>{{.Phone}}</strong>
    </p>
    {{if .Error}}
    <p style="color:#c44;font-size:0.85rem;margin-bottom:12px;">{{.Error}}</p>
    {{end}}
    <div class="form-row">
      <label>6-digit code</label>
      <input type="text" name="code" placeholder="000000" required autofocus
             inputmode="numeric" pattern="[0-9]{6}" maxlength="6"
             style="font-family:'DM Mono',monospace;font-size:1.5rem;letter-spacing:8px;text-align:center;">
    </div>
    <button class="btn-submit" type="submit">Verify &#8599;</button>
  </form>
  {{end}}
</div>
{{end}}