{% extends 'site/base_auth.html' %}
{% load static %}



{% block css %}


{% endblock css %}


{% block content %}



<section class="user-form-part">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-sm-10 col-md-8 col-lg-6 col-xl-5">
        <div class="user-form-logo">
          <a href="{% url 'home' %}"><img src="{% static 'images/SNR_logo.png' %}" alt="SNR Shop BD" style="height: 60px; width: auto;" /></a>
        </div>
        <div class="user-form-card">
          <div class="user-form-title">
            <h2>Join Now!</h2>
            <p>Setup A New Account In A Minute</p>
          </div>
          <form class="user-form" action="{% url 'signup' %}" method="POST">
            {% csrf_token %}
                <!-- Display form errors -->
            {% if form.errors %}
            <div class="alert alert-danger my-2 py-2"  role="alert">
                <strong>Error:</strong>
                <ul>
                    {% for field, errors in form.errors.items %}
                        {% for error in errors %}
                            <li>{{ field|title }} - {{ error }}</li>
                        {% endfor %}
                    {% endfor %}
                </ul>
            </div>
            {% endif %}

            <div class="form-group">
              <input type="text" class="form-control" name="name" placeholder="Enter your name" />
            </div>
            <div class="form-group">

              <input type="tel" class="form-control" name="phone" placeholder="Enter your phone" />
            </div>
            <div class="form-group">
              <input type="number" class="form-control" name="referral"
                placeholder="Enter referral number" />
            </div>
            <div class="row">
              <div class="col">
                <div class="form-group">
                  <input type="password" class="form-control" name="password1" placeholder="Password" />
                </div>
              </div>
              <div class="col">
                <div class="form-group">
                  <input type="password" class="form-control" name="password2" placeholder="Confirm password" />
                </div>
              </div>
            </div>
            <div class="form-check mb-3">
              <input class="form-check-input" type="checkbox" name="accept_terms" id="check">
              <label class="form-check-label" for="check">
                Accept all the <a href="javascript: void(0)">Terms & Conditions</a>
              </label>
            </div>
            <div class="form-button">
              <button type="submit">register</button>
            </div>
          </form>
        </div>
        <div class="user-form-remind">
          <p>Already Have An Account?<a href="{% url 'login' %}">login here</a></p>
        </div>
        <div class="user-form-footer">
          <p>SNR Shop BD | &COPY; Copyright by <a href="https://www.universesoftcare.com">Universe Soft Care</a></p>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock content %}


{% block js %}

{% endblock js %}