{% extends "index.html"%} {% block content%}
<div class="card">

  <div class="card-header text-light bg-gradient-danger text-center">
    <h3>Tambah Data Buku</h3> </div>
  <hr>
  <div class="card-body">
    <div class="card-body col-sm-5">
    <form method="post" action="{% url 'book-create'%}" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="form-group row">
          <label class="col-4 col-form-label" for="judul">judul Buku</label> 
          <div class="col-8 ">
            <input id="judul" name="judul" placeholder="Masukan Judul Buku" type="text" class="form-control" required="required">
          </div>
        </div>
        <div class="form-group row">
          <label for="penerbit" class="col-4 col-form-label">Nama Penerbit</label> 
          <div class="col-8">
            <input id="penerbit" name="penerbit" placeholder="Masukan Nama Penerbit" type="text" class="form-control" required="required">
          </div>
        </div> 
        <div class="form-group row">
          <label for="penulis" class="col-4 col-form-label">Nama penulis</label> 
          <div class="col-8">
            <input id="penulis" name="penulis" placeholder="Masukan Nama Penulis" type="text" class="form-control" required="required">
          </div>
        </div> 
        <div class="form-group row">
          <label for="tahun_terbit" class="col-4 col-form-label">Tahun rilis</label> 
          <div class="col-8">
            <input id="tahun_terbit" name="tahun_terbit"  type="number" placeholder="Masukan Tahun Terbit" class="form-control" required="required">
          </div>
        </div> 
        <div class="form-group row">
          <label class="col-4 col-form-label" for="nama">Category Buku</label> 
          <div class="col-8">
            <select class="form-control" aria-label="Default select example" name="categorybook">
              <option selected>Open this select menu</option>
              {% for category in categorys %}
                <option value="{{category.id}}">{{category.namaCategory}}</option>
              {%endfor%}
            </select>
          </div>
        </div>

        <div class="form-group row">
          <label for="cover" class="col-4 col-form-label">Cover Buku</label> 
          <div class="col-8">
            <input id="cover" name="cover"  type="file"  class="form-control" required="required">
          </div>
        </div> 
        <button type="submit" name="submit" class="btn btn-primary align-items-center">Insert</button>
      </form>
    </div>
  </div>  
</div>
{% endblock content%}