{% extends 'layouts.html' %}

{% block title %}
  Registration
{% endblock %}

{% block content %}
<!-- ======= Breadcrumbs ======= -->
<section id="breadcrumbs" class="breadcrumbs">
  <div class="container">

    <div class="d-flex justify-content-between align-items-center">
      <h2>Registration</h2>
      <ol>
        <li><a href="index.html">Home</a></li>
        <li>Registration</li>
      </ol>
    </div>

  </div>
</section><!-- End Breadcrumbs -->

<!-- ======= Contact Section ======= -->


<section id="contact" class="contact">
  <div class="container">



    <div class="row mt-5 justify-content-center" data-aos="fade-up">
      <div class="col-lg-4">
        <h2>Register Your Account</h2><br>

        {% for message in messages %}
          <div class="alert {{ message.tags }} alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            {{ message }}
          </div>
        {% endfor %}

        <form action=" " method="post">
          {% csrf_token %}
          <div class="form-group">
              <input type="text" name="name" class="form-control"  placeholder="Your Name" />
              <div class="validate"></div>
          </div>

          <div class="form-group">
              <input type="email" name="email" class="form-control"   placeholder="Your Email" />
              <div class="validate"></div>
          </div>

          <div class="form-group">
              <input type="password" name="password" class="form-control"  placeholder="Your Password" />
              <div class="validate"></div>
          </div>

          <div class="form-group">
              <input type="password" name="confirm_password" class="form-control"   placeholder="Confirm Password" />
              <div class="validate"></div>
          </div>

          <div class="text-center">
            <button class="btn btn-success" type="submit">Register</button>
          </div>
        </form><br>
        <small>Have you already Account <a href="{% url 'login' %}">Login Now</a> </small>
      </div>

    </div>

  </div>
</section><!-- End Contact Section -->
{% endblock %}