{% extends 'base.html' %}
{% block content%}
<!-- <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-6 mt-5">
        <div class="card p-4">
            <h2>Create Account</h2>
            <form method="post" action="{% url 'member_registration' %}">
                {% csrf_token %}
                    
                <button type="submit" class="btn btn-primary">Save</button>
            </form>
        </div>
      </div>
    </div>
</div> -->

<div class="container">
    <div class="row justify-content-center">
      <div class="col-md-6 mt-5">
        <div class="card">
          <div class="card-header bg-primary text-white">Member Registration</div>
          <div class="card-body">
            <form method="post" action="{% url 'member_registration' %}" enctype="multipart/form-data">
              {% csrf_token %}
              <div class="form-group m-3">     
                <label for="">Username</label>
                {{ form.username }}
            </div>
            
            <div class="form-group m-3">
                <label for="">Email</label>
                {{ form.email }}

            </div>
            <div class="form-group m-3">
                <label for="">Is Member:</label>
                {{ form.is_member }}
            </div>
            <div class="form-group m-2">
                <label for="">Password</label>
                {{ form.password1 }}
                <!-- <input type="checkbox" onclick="showPassword()"> Show Password
                <br> -->

            </div>
            <div class="form-group m-2">
                <label for="">Confirm Password</label>
                {{ form.password2 }}
                <!-- <input type="checkbox" onclick="showPassword()"> Show Password
                <br> -->

            </div>
              <button type="submit" class="btn btn-primary" role="button">Create</button>
              <a class="btn btn-danger col-2 mx-2" href="{% url 'book-list' %}" role="button">Back</a>
            </form>
          </div>
        </div>
      </div>
    </div>
</div>

<!-- <script>
  function showPassword() {
      var passwordInput = document.getElementById('id_password');
      if (passwordInput.type === 'password') {
          passwordInput.type = 'text';
      } else {
          passwordInput.type = 'password';
      }
  }
</script> -->


{% endblock content%}