{{template "base/header" .}}
<style>
  .tb-domain-sep {
    background-color: #ffe0e0;
    color: #c0392b;
    padding: 0 4px;
    border-radius: 4px;
    font-weight: 600;
  }
  html[data-theme="dark"] .tb-domain-sep {
    background-color: rgba(231, 76, 60, 0.25);
    color: #ff8a80;
  }
</style>
<form method="post" id="form">
  {{ .CSRFTokenHTML }}
  <fieldset class="uk-fieldset">
    <legend class="uk-legend">{{t .LangCode "auth.register.title"}}</legend>
    {{template "base/alert" .}}
    <div class="uk-margin">
      <label class="uk-form-label" for="email">{{t .LangCode "auth.register.email"}}</label>
      <input name="email" id="email" class="uk-input" type="text" value="{{.email}}">
    </div>
    <div class="uk-margin">
      <label class="uk-form-label" for="domain">{{t .LangCode "auth.register.domain.prefix" .ExternalURL}}<span class="tb-domain-sep">/_/</span>{{t .LangCode "auth.register.domain.suffix"}}</label>
      <input name="domain" id="domain" class="uk-input" type="text" value="{{.domain}}">
    </div>
    <div class="uk-margin">
      <label class="uk-form-label" for="name">{{t .LangCode "auth.register.name"}}</label>
      <input name="name" id="name" class="uk-input" type="text" value="{{.name}}">
    </div>
    <div class="uk-margin">
      <label class="uk-form-label" for="password">{{t .LangCode "auth.register.password"}}</label>
      <input type="password" name="password" id="password" class="uk-input">
    </div>
    <div class="uk-margin">
      <label class="uk-form-label" for="repeat_password">{{t .LangCode "auth.register.confirm"}}</label>
      <input type="password" name="repeat_password" id="repeat_password" class="uk-input">
    </div>
    <div class="uk-margin">
      <label class="uk-form-label" for="language">{{t .LangCode "auth.register.language"}}</label>
      <select name="language" id="language" class="uk-select">
        <option value="">{{t .LangCode "auth.register.languageDefault"}}</option>
        {{ range .SupportedLangs }}
        <option value="{{ .Code }}" {{ if eq .Code $.LangCode }}selected{{ end }}>{{ .Name }}</option>
        {{ end }}
      </select>
    </div>
    <div class="uk-margin">
      {{ if eq .CaptchaType "math" }}
      <input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response" value="">
      <button type="button" class="uk-button uk-button-primary math-captcha-trigger">{{t .LangCode "auth.register.submit"}}</button>
      {{ else }}
      <button type="submit" class="uk-button uk-button-primary g-recaptcha" data-sitekey="{{.RecaptchaSiteKey}}"
              data-callback="onSubmit">{{t .LangCode "auth.register.submit"}}
      </button>
      {{ end }}
    </div>
  </fieldset>
</form>
{{template "base/footer" .}}