{% extends "base.html" %}

{% block content %}
<body id="page-top">

    <!-- Page Wrapper -->
    <div id="wrapper">

        {% include "nav.html" %}

        <!-- Content Wrapper -->
        <div id="content-wrapper" class="d-flex flex-column">


            <!-- Main Content -->
            <div id="content">


                <!-- Begin Page Content -->
                <div class="container-fluid">

                    <!-- Page Heading -->
                    <h1 class="h3 mb-2 text-gray-800">Inventory : {{ inventory_name }}</h1>
                        <p class="mb-4">Warehouse: {{ warehouse_name }}</p>
                        <!-- Filter -->
                        <div class="card shadow mb-4">
                            <!-- Card Header - Accordion -->
                            <a class="d-block card-header py-3">
                                <h6 class="m-0 font-weight-bold text-primary">Filter</h6>
                            </a>
                            <!-- Card Content - Collapse -->
                            <form method="get" class="p-4">
                                {{ filter.form.as_p }}
                                <label for="{{ filter.form.ordering.id_for_label }}">Sort by:</label>
                                {{ filter.form.ordering }}
                                <input type="submit" value="Apply">
                                <a href={{ request.path }} class="btn btn-danger">
                                    <i class="fas fa-trash"></i> Clear Filter
                                </a>
                              </form>
                        </div>
                        
                        

                        <!-- End Filter -->

                    <!-- DataTales Example -->
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary">Items</h6>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Description</th>
                                            <th>Quantity</th>
                                            <th>Weight</th>
                                            <th>Category</th>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr>
                                            <th>Name</th>
                                            <th>Description</th>
                                            <th>Quantity</th>
                                            <th>Weight</th>
                                            <th>Category</th>
                                        </tr>
                                    </tfoot>
                                    <tbody>
                                        {% if filter.is_bound %}
                                            {% for item in filter.qs %}
                                            <tr>
                                                <td>{{ item.name }}</td>
                                                <td>{{ item.description }}</td>
                                                <td>{{ item.quantity }}</td>
                                                <td>{{ item.weight }}</td>
                                                <td>{{ item.category }}</td>
                                            </tr>
                                            {% endfor %}
                                        {% else %}
                                            {% for item in item_list %}
                                            <tr>
                                                <td>{{ item.name }}</td>
                                                <td>{{ item.description }}</td>
                                                <td>{{ item.quantity }}</td>
                                                <td>{{ item.weight }}</td>
                                                <td>{{ item.category }}</td>
                                            </tr>
                                            {% endfor %}
                                        {% endif %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- /.container-fluid -->

            </div>
            <!-- End of Main Content -->


        </div>
        <!-- End of Content Wrapper -->

    </div>
    <!-- End of Page Wrapper -->

    <!-- Scroll to Top Button-->
    <a class="scroll-to-top rounded" href="#page-top">
        <i class="fas fa-angle-up"></i>
    </a>

    {% include "footer.html" %}

</body>
{% endblock content %}