{% extends "single.html" %}

{% block title %}Register{% endblock %}
{% block single_content %}

  <form class="card" style="border-radius: 2%" method="post">
    {{ form.csrf_token }}
    <div class="card-body p-6">
      <h1 class="card-title">Create new account</h1>
      <div class="form-group">
        <label class="form-label">Email address</label>
        {{ form.email(class="form-control", type="email", placeholder="username@proton.me") }}
        <div class="small-text alert alert-info" style="margin-top: 1px">
          Emails sent to your alias will be forwarded to this email address.
          <br>
          It can't be a disposable or forwarding email address.
          <br>
          We recommend using a <a href="https://proton.me/mail" target="_blank">Proton Mail</a> address
        </div>
        {{ render_field_errors(form.email) }}
      </div>
      <div class="form-group">
        <label class="form-label">Password</label>
        {{ form.password(class="form-control", type="password") }}
        {{ render_field_errors(form.password) }}
      </div>
      <!-- TODO: add terms
      <div class="form-group">
        <label class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input"/>
          <span class="custom-control-label">Agree the <a href="terms.html">terms and policy</a></span>
        </label>
      </div>
-->
      {% if HCAPTCHA_SITEKEY %}

        <div class="h-captcha" data-sitekey="{{ HCAPTCHA_SITEKEY }}"></div>
        <script src="https://hcaptcha.com/1/api.js" async defer></script>
      {% endif %}
      <small class="text-center mt-3">
        By clicking Create Account, you agree to abide by
        <a href="https://simplelogin.io/terms">SimpleLogin's Terms and Conditions.</a>
      </small>
      <div class="mt-2">
        <button type="submit" class="btn btn-primary btn-block">Create Account</button>
      </div>
      {% if connect_with_proton %}

        <div class="text-center my-2 text-gray">
          <span>or</span>
        </div>
        <a class="btn btn-primary btn-block mt-2 proton-button"
           href="{{ url_for('auth.proton_login', next=next_url) }}">
          <img class="mr-2" src="/static/images/proton.svg" />
          Sign up with Proton
        </a>
      {% endif %}
      {% if connect_with_oidc %}

        <div class="text-center my-2 text-gray">
          <span>or</span>
        </div>
        <a class="btn btn-primary btn-block mt-2 btn-social"
           href="{{ url_for('auth.oidc_login', next=next_url) }}">
          <i class="fa {{ connect_with_oidc_icon }}"></i> Sign up with SSO
        </a>
      {% endif %}
    </div>
  </form>
  <div class="text-center text-muted mb-6">
    Already have account?
    <a href="{{ url_for('auth.login') }}">Sign in</a>
  </div>
{% endblock %}