{% extends 'base.html' %}
{% load static %}
{% block content %}
<!-- Header -->
<header id="header" class="header">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="text-container">
                    <h1 class="h1-large">Ini Katalog</h1>
                    {% if user.is_authenticated %} <h1 class="h1-large">Halo {{ username }}</h1> {% endif %}
                    <a class="btn-solid-lg page-scroll" href="#about">Discover</a>
                </div> 
            </div> 
        </div> 
    </div> 
</header> 

</br>
{% if user.is_authenticated %}
    <div class="container" style="border: 1px solid black; background-color: #F0EBE3; padding-bottom: 0.5%; max-width: 60%;border-radius: 10px; padding-top: 10px;">
        <div class="d-flex justify-content-center align-items-center">
            <h3  style="text-align: center; background-color: #003300; padding-top: 10%; padding: 5px; color: white; border-radius: 10px;">Mau edit deskripsi buku?</h3> 
        </div>
        <div class="d-flex justify-content-center align-items-center">
            <h3  style="text-align: center; background-color: #003300; padding-top: 10%; padding: 5px; color: white; border-radius: 10px;">Edit di sini :O</h3>
        </div>
        
        <div class="d-flex justify-content-center align-items-center">
            <div class="container">
                <form id="edit-book-form" method="post">
                    {% csrf_token %} <!-- Include the CSRF token --> 
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-6">
                                <label for="idBook">Book's Id:</label>
                            </div>
                            <div class="col-md-6">
                                <input type="number" name="idBook" id="idBook" class="form-control" required>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-6">
                                <label for="description">Book's new description:</label>
                            </div>
                            <div class="col-md-6">
                                <input type="text" name="description" id="description" class="form-control" required>
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>
{% endif %}
</br>

<div class="search-container">
    <form id="searchForm" onsubmit="searchProducts(event)">
        <input type="text" id="searchInput" placeholder="Search...">
        <label class="text-search"><input type="checkbox" id="searchTitle" > Title</label>
        <label class="text-search"><input type="checkbox" id="searchAuthor" > Author</label>
        <label class="text-search"><input type="checkbox" id="searchNumPages" >Max Pages</label>
        <button class="button-search" type="submit">Search</button>
    </form>
</div>
</br>
<div class="row pembatas" id="product_cards"></div>
</br>


<link rel="stylesheet" href="{% static 'css/catalogue.css' %}" />
<script src="{% static 'js/fetchBook.js' %}"></script>
<script src="{% static 'js/renderBook.js' %}"></script>
<script src="{% static 'js/searchBar.js' %}"></script>
<script src="{% static 'js/editBook.js' %}"></script>
{% endblock content %}

<!-- 
1. bikin fitur baru di katalog yang pake forms.py + ajax
2. review buku 

bikin form biasa + ajax == 10 poin
-->