{% extends 'base.html' %}

{% load static %}
{% block content %}

    <div class="main">
        <div class="left-shelf">
            <div class="inventory-items container-fluid">
                <div class="item-display">
                    <i class="fa-solid fa-shirt"></i>
                    <h6>JERSYS</h6>
                </div>
                <div class="item-display">
                    <i class="fa-brands fa-black-tie"></i>
                    <h6>TIES</h6>
                </div>
                <div class="item-display">
                    <i class="fa-solid fa-shirt"></i>
                    <h6>SCHOOL BAGS</h6>
                </div>
                <div class="item-display">
                    <i class="fa-solid fa-shirt"></i>
                    <h6>ECA KITS</h6>
                </div>
            </div>
        </div>

        <div class="main_dash">
            <div class="main_dash_left_shelf">
                <div class="stock_tabs">

                    <div class="item">
                        <h2>Add Item</h2>
                    </div>
                    <div class="item_details">
                        <!-- <div class="qty">
                            <p>size <span>32</span></p>
                            <p>size <span>30</span></p>
                            <p>size <span>28</span></p>
                        </div>
                        <div class="available">
                            <p><span>50</span></p>
                            <p><span>60</span></p>
                            <p><span>20</span></p>
                        </div> -->
                        <table>
                            <tr>
                                <th>Size 36</th>
                                <th>Size 32</th>
                                <th>Size 30</th>
                                <th>Size 28</th>
                                <th>Size 26</th>
                            </tr>

                            <tr>
                                <td>30</td>
                                <td>30</td>
                                <td>30</td>
                                <td>30</td>
                                <td>30</td>

                            </tr>

                        </table>

                    </div>

                </div>

                <div class="stock_tabs">


                </div>

                <div class="stock_tabs">

                </div>

                <div class="stock_tabs">

                </div>

                <div class="stock_tabs">

                </div>
            </div>

            <div class="main_dash_right_shelf">
                <div class="stock_operations">
                    <div class="stock_update_section">
                        <a href="">Add Item</a>
                        <a href="">Update Item</a>
                        <a href="">Delete Item</a>

                    </div>
                </div>

                <div class="stock_balance_chart">
                </div>
            </div>

            <div class="footer"></div>
        </div>


    </div>




    </div>
    </div>


    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
</body>

</html>

{% endblock %}