{% 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">Warehouse Tables</h1>
                        <p class="mb-4">Warehouse Table</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">
                                <div class="row g-3 align-items-center mx-2 my-4">
                                    <div class="col-auto">
                                        Name
                                        {{ filter.form.name }}
                                    </div>
                                    <div class="col-auto">
                                        Address
                                        {{ filter.form.address }}
                                    </div>
                                    <div class="col-auto">
                                        {{ filter.form.have_freeze }}
                                    </div>
                                    <div class="col-auto">
                                        <button type="submit" class="btn btn-primary">Filter</button>
                                    </div>
                                    <div class="col-auto">
                                        <a href={{ request.path }} class="btn btn-danger">
                                            <i class="fas fa-trash"></i> Clear Filter
                                        </a>
                                    </div>
                                </div>
                            </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">Warehouse</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>Address</th>
                                            <th>Stock Level</th>
                                            <th>Number of Inventory</th>
                                            <th>Have Freezer</th>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr>
                                            <th>Name</th>
                                            <th>Address</th>
                                            <th>Stock Level</th>
                                            <th>Number of Inventory</th>
                                            <th>Have Freezer</th>
                                        </tr>
                                    </tfoot>
                                    <tbody>
                                        {% if filter.is_bound %}
                                            {% for warehouse in filter.qs %}
                                            <tr>
                                                <td><a href={% url "warehouse-detail" id=warehouse.id  %}>{{ warehouse.name }}<a/></td>
                                                <td>{{ warehouse.address }}</td>
                                                <td>{{ warehouse.stock_percentage|floatformat:3 }}</td>
                                                <td>{{ warehouse.inventory_count }}</td>
                                                <td>{{ warehouse.have_freeze }}</td>
                                            </tr>
                                            {% endfor %}
                                        {% else %}
                                            {% for warehouse in warehouse_list %}
                                            <tr>
                                                <td><a href={% url "warehouse-detail" id=warehouse.id %}>{{ warehouse.name }}<a/></td>
                                                <td>{{ warehouse.address }}</td>
                                                <td>{{ warehouse.stock_percentage|floatformat:3 }}</td>
                                                <td>{{ warehouse.inventory_count }}</td>
                                                <td>{{ warehouse.have_freeze }}</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 %}