{{define "title"}}{{translate .Lang "forgotPassword"}}{{end}}

{{define "main"}}
<div class="form-panel" id="forgotPasswordPanel">
  <h2 class="form-title">{{translate .Lang "forgotPassword"}}</h2>
  {{with .Errors}}
  <ul class="error-list">
    {{range .}}
    <li>{{.}}</li>
    {{end}}
  </ul>
  {{end}}
  {{with .Data}}
    {{if .Success}}
    <label class="hint-label hint-label-success">{{.Success}}</label>
    {{end}}
  {{end}}
  <form class="form" action="/user/forgotPassword" method="POST">
    <div>
      <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">

      <label class="input-label" for="email">{{translate .Lang "email"}}:</label>
      <input class="{{if .FieldErrors.Email}}invalid-field{{end}}" id="email" type="email" name="email" {{with .Form}}{{if .Email}}value="{{.Email}}"{{else}}autofocus{{end}}{{else}}autofocus{{end}} required>
      {{with .FieldErrors.Email}}<label class="error-label" for="email">{{.}}</label>{{end}}

      {{if .SiteKey}}
      <div id="h-captcha" class="h-captcha" data-sitekey="{{.SiteKey}}"></div>
      <script src="/static/js/captcha.js"></script>
      <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
      {{with .FieldErrors.Captcha}}<label class="error-label">{{.}}</label>{{end}}
      {{end}}
    </div>
    <div class="submit-div">
      <input class="btn" type="submit" value="{{translate .Lang "submit"}}">
    </div>
  </form>
</div>
{{end}}
