{{define "content"}}
<div class="login-page">
  <h2>Sign in with <svg class="bsky-logo" viewBox="0 0 320 286" xmlns="http://www.w3.org/2000/svg"><path fill="#0a7aff" d="M69.364 19.146c36.687 27.806 76.147 84.186 90.636 114.439 14.489-30.253 53.948-86.633 90.636-114.439C277.107-.917 320-16.44 320 32.957c0 9.865-5.603 82.875-8.889 94.729-11.423 41.208-53.045 51.719-90.071 45.357 64.719 11.12 81.182 47.953 45.627 84.785-80 82.874-106.667-44.333-106.667-44.333s-26.667 127.207-106.667 44.333c-35.555-36.832-19.092-73.665 45.627-84.785-37.026 6.362-78.648-4.149-90.071-45.357C5.603 115.832 0 42.822 0 32.957 0-16.44 42.893-.917 69.364 19.147Z"/></svg> Bluesky</h2>
  <p class="login-hint">Sign in with your <a href="https://bsky.app">Bluesky</a> account using an <a href="https://bsky.app/settings/app-passwords">app password</a>. Your app password is only sent to Bluesky to verify your identity and is not stored.</p>

  {{if .Data.Error}}
  <p class="form-error">{{.Data.Error}}</p>
  {{end}}

  <div class="discussion-form">
    <form method="POST" action="{{.BaseURL}}/login" onsubmit="this.querySelector('button[type=submit]').disabled=true">
      <input type="hidden" name="return" value="{{.Data.ReturnTo}}">
      <label for="handle">Bluesky handle</label>
      <input type="text" id="handle" name="handle" value="{{.Data.Handle}}" required placeholder="alice.bsky.social">
      <label for="app_password">App password</label>
      <input type="password" id="app_password" name="app_password" required placeholder="xxxx-xxxx-xxxx-xxxx">
      <div class="form-actions">
        <button type="submit" class="btn">Sign in</button>
        <a href="{{.Data.ReturnTo}}">Cancel</a>
      </div>
    </form>
  </div>
</div>
{{end}}