{% extends "account/base.html" %} {% load i18n %} {% block head_title %} 
{% trans "Sign Up" %}{% endblock %} {% block body %} {% load static %}
<section class="signup-wrapper-section py-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-sm-5 col-lg-5">
        <div class="card login-form h-auto">
          <div class="legend title-text">
            <h4>Are You a Register Customer</h4>
            <hr />
          </div>
          <div class="registration">
            <div class="regcont">
              <ul>
                <li class="ok">
                  Login to your own account with only a few clicks.
                </li>
                <li class="ok">
                  Your personal data is secure with us! Login and registration
                  are SSL secured.
                </li>
                <li class="ok">
                  We only use your personal information for the processing of
                  your order.
                </li>
              </ul>
              <br />
            </div>
            <div class="submitbtn login-button">
              <a class="btn-login" href="{{ login_url }}">
                <span class="txt"> Login </span>
                <span class="icon"></span>
              </a>
            </div>
            <div style="height:30px"></div>
            <div class="submitbtn login-button">
              <a class="btn-login" href="/">
                <span class="txt"> 
                  Back to Home </span>
                <span class="icon"></span>
              </a>
            </div>
            <div class="clear"></div>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-7 col-lg-7">
        <div class="card login-form sign-up-form">
          <div class="legend title-text">
            <div class="form-title text-center">
              <h4><span id="changeable">Member</span> Sign up</h4>
            </div>
            <hr />
          </div>
          <form method="POST" action="{% url 'account_signup' %}">
            {% csrf_token %}
            <div class="form-elements signup-form">
              <!-- {{ form.as_p }}  -->
              {% for f in form %}
              {{f.label}}
              {{f}}
              {% endfor %}
              
              
              
              {% if redirect_field_value %}
              <input
                type="hidden"
                name="{{ redirect_field_name }}"
                value="{{ redirect_field_value }}"
              />
              {% endif %}

              <div class="login-button mt-4">
                <button type="submit" class="btn-login">Sign Up</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <style>
    span.caret {
      position: absolute;
      top: 0.8rem;
      right: 0;
      font-size: 0.63rem;
      color: #495057;
    }
    .signup-form .form-control{
          padding: 0.3em 1.2em;
    }
    .signup-form label{
      top:-7px;
    }
    .signup-form label.active{
          transform: translate(-5px, -9px) scale(0.8) !important;
    }
  </style>
  <script>
    $(document).ready(function () {
      $('label[for="id_title"]').hide();
      $("p").addClass("md-form");
      $("label").addClass("form-label");
      $("input").addClass("form-control");
      $("select").addClass("form-control custom-select");
      $("input[type='checkbox']").removeClass("form-control");
      $("input[type='submit']").removeClass("form-control");
      $('label[for="id_package"]').hide();
      $('label[for="id_how_you_hear_about_us"]').hide();
      $("#id_package").before('<span class="caret">▼</span>');
    });
    const temp = document.getElementById("id_isdistributor");
    temp.style.display = "none";
    temp.parentElement.style.display = "none";

    var url_string = window.location.href;
    var url = new URL(url_string);
    var c = url.searchParams.get("q");
    if (c == "distributor") {
      const el = document.getElementById("id_isdistributor");
      el.checked = true;
      document.querySelector("#changeable").innerHTML = "Distributor";
      document.querySelector("#dlogin").style.display = "none";
    }
  </script>
  {% endblock %}
</section>