{% set active_page = "Register" -%}

{% extends "layouts/no-layout.html" %}

{% block scripts %}
  <script src="assets/js/pages/register.js"></script>
{% endblock %}

{% block content %}
  <div class="crypro-login-container">
    <div class="crypro-login-container__box">
      <div class="crypro-login-container__box-inner">
        <h2 class="crypto-widget__heading mdc-typography--subtitle1 mdc-theme--primary">
          <span class="crypto-widget__heading-text">Sign up</span>
          <span class="crypto-widget__heading-border"></span>
        </h2>
        <form class="crypto-login-form">
          <div class="mdc-text-field mdc-text-field--fullwidth crypto-margin-bottom-big">
            <input type="text" id="name-text-field" class="mdc-text-field__input">
            <label for="name-text-field" class="mdc-floating-label">Name</label>
            <div class="mdc-line-ripple"></div>
          </div>
          <div class="mdc-text-field mdc-text-field--fullwidth crypto-margin-bottom-big">
            <input type="text" id="email-text-field" class="mdc-text-field__input">
            <label for="email-text-field" class="mdc-floating-label">Email</label>
            <div class="mdc-line-ripple"></div>
          </div>
          <div class="mdc-text-field mdc-text-field--fullwidth ">
            <input required pattern=".{8,}"
              id="pw"
              type="password"
              class="mdc-text-field__input"
              aria-controls="pw-validation-msg"
              autocomplete="current-password" />
            <label for="pw" class="mdc-floating-label">Password</label>
            <div class="mdc-line-ripple"></div>
          </div>
          <p class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg crypto-margin-bottom-big"
              id="pw-validation-msg">
            Must be at least 8 characters long
          </p>
          <div class="mdc-text-field mdc-text-field--fullwidth crypto-margin-bottom-big">
            <input required pattern=".{8,}"
              id="confirm-pw"
              type="password"
              class="mdc-text-field__input"
              autocomplete="current-password" />
            <label for="confirm-pw" class="mdc-floating-label">Confirm Password</label>
            <div class="mdc-line-ripple"></div>
          </div>
          <div class="crypto-display-flex crypto-display-flex--space-between crypto-margin-bottom-big">
            <div class="mdc-form-field">
              <div class="mdc-checkbox">
                <input type="checkbox" class="mdc-checkbox__native-control" id="terms-checkbox"/>
                <div class="mdc-checkbox__background">
                  <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                    <path class="mdc-checkbox__checkmark-path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                  </svg>
                  <div class="mdc-checkbox__mixedmark"></div>
                </div>
              </div>
              <label for="terms-checkbox">I agree to all <a href="#">Terms</a></label>
            </div>
          </div>
          <a href="login.html" class="mdc-button mdc-button--unelevated big-round-corner-button">Sign up</a>
        </form>
      </div>
        <p class="mdc-typography--body2 mdc-theme--on-surface">Already have an account? <a href="login.html">Sign in</a></p>
    </div>
  </div>
{% endblock %}