{% 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">Add Book Loan</div>
          <div class="card-body">
            <form method="post" action="{% url 'book_loan_new' %}">
              {% csrf_token %}
              <div class="form-group mb-3">
                <label for="id_book">Book:</label>
                <select name="book" id="id_book" class="form-control" required>
                  <option selected>Select Book</option>
                  {% for book in books %}
                    <option value="{{ book.id }}">{{ book.title }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="form-group mb-3">
                <label for="id_member">Member:</label>
                <select name="member" id="id_member" class="form-control" required>
                  <option selected>Select Member</option>
                  {% for member in members %}
                    <option value="{{ member.id }}">{{ member.name }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="mb-3">
                <label for="id_due_date">Due Date:</label>
                <input type="date" name="due_date" id="id_due_date" class="form-control" required>
              </div>
              <button type="submit" class="btn btn-primary" role="button">Add Book Loan</button>
              <a class="btn btn-warning col-2 mx-2" href="{% url 'book_loan_list' %}" role="button">Back</a>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

<!-- <div style="text-align: center; margin-top: 50px;">
    <h2>Add Book Loan</h2>
    <form method="post" action="{% url 'book_loan_new' %}">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit" class="btn btn-primary">Save</button>
    </form>
</div> -->
{% endblock content%}