{% 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">
                    {% if user.is_authenticated %} <h1 class="h1-large">Halo {{ name }}</h1> {% endif %}
                    <h1 class="h1-large">Mau pinjam buku apa hari ini?</h1>
                    <a class="btn-solid-lg page-scroll" href="/about-us/">Discover</a>
                </div> 
            </div> 
        </div> 
    </div> 
</header> 
<!-- background-color: #003300;
background-color: #F0EBE3 -->
</br>
<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 style="padding-left: 10%; padding-right: 10%; padding-top: 5px;">
        <h1 style="text-align: center; background-color: #003300; padding-top: 10%; padding: 5px; color: white; border-radius: 10px;"> Ini isi Keranjang Kamu</h1>
    </div>
    <table id ="cart" style="margin: auto; width: 50%;"></table>
</div>
<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>
<div class="row pembatas" id="product_cards_borrowed"></div>
<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;">Buku yang kamu cari ga ada?</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;"> Request di sini</h3>
    </div>
    
    <div class="d-flex justify-content-center align-items-center">
        <form id ="form" class="register" method="POST">
            {% csrf_token %}
            <table>
                {{ form.as_table }}
                <tr>
                    <td></td>
                    <td>
                        <input id ="add" type="submit" value="Request"/>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
<br>


<link rel="stylesheet" href="{% static 'css/borrow.css' %}" />
<script cache="reload" rel="preload" src="{% static 'js/renderBookBorrowSection.js' %}"></script>
<script src="{% static 'js/searchBar.js' %}"></script>

{% endblock content %}