{% extends 'base.html' %}
{% block content%}

<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">Create Account</div>
          <div class="card-body">
            <form method="post" action="{% url 'register' %}">
              {% csrf_token %}
              <div class="mb-3">
                <label for="id_name" class="form-label">First Name</label>
                <input type="text" name="name" id="id_name" placeholder="First Name" class="form-control" required>
              </div>
              <div class="mb-3">
                <label for="id_lname" class="form-label">Last Name</label>
                <input type="text" name="lname" id="id_lname" placeholder="Last Name" class="form-control" required>
              </div>
              <div class="mb-3">
                <label for="id_username" class="form-label">Username</label>
                <input type="text" name="username" id="id_username" placeholder="Username" class="form-control" required>
              </div>
              <div class="mb-3">
                <label for="email" class="form-label">Email</label>
                <input type="email" name="email" id="email" placeholder="Email" class="form-control" required>
              </div>
              <div class="mb-3">
                <label for="id_address" class="form-label">Address</label>
                <textarea type="text" name="address" id="id_address" placeholder="Input Address" class="form-control" required></textarea>
              </div>
              <div class="mb-3">
                <label for="id_birth_place" class="form-label">Birth Place</label>
                <input type="text" name="birth_place" id="id_birth_place" placeholder="Input Birth Place" class="form-control" required>
              </div>
              <div class="mb-3">
                <label for="id_date_birth" class="form-label">Birth Date</label>
                <input type="date" name="date_birth" id="id_date_birth" placeholder="Input datebirth" class="form-control" required>
              </div>
              <div class="mb-3">
                <label for="id_password1" class="form-label">Password</label>
                <input type="password" name="password1" id="id_password1" placeholder="Password" class="form-control" required>
              </div>
              <div class="mb-3">
                <label for="id_password2" class="form-label">Password</label>
                <input type="password" name="password2" id="id_password2" placeholder="Confirm Password" class="form-control" required>
              </div>
              <button type="submit" class="btn btn-primary" role="button">Create</button>
            </form>
          </div>
        </div>
      </div>
    </div>
</div>


<div style="text-align: center; margin-top: 50px;">
    <h2>Create Account</h2>
    <form method="post" action="{% url 'register' %}">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit" class="btn btn-primary">Save</button>
    </form>
</div>

{% endblock content%}
