<%- include('partials/header.ejs');%>

    <div class="page-container">
        <div class="content-wrap">
            <div style="text-align:end;" id="toolbar-buttons-wrapper" class="">
                <!-- sort section start  -->
                <div class="d-flex row justify-content-end align-items-end mt-2">
                    <div class="col-sm-4 col-12 filter-container order-sm-0 order-2">
                        <form action="/filter/" style="text-align: center;">
                            <label for="category-select">Filter by category:</label>
                            <select name="category" id="category-select" class="mx-2">
                                <option value="none">all products</option>
                                <option value="essential">essential</option>
                                <option value="vegetables">vegetables</option>
                                <option value="fruit">fruit</option>
                                <option value="meat">meat</option>
                                <option value="dairy">dairy</option>
                                <option value="frozen">frozen</option>
                                <option value="fresh">fresh</option>
                                <option value="luxury">luxury</option>
                                <option value="nuts">nuts</option>
                                <option value="candy">candy</option>
                                <option value="healthy">healthy</option>
                            </select>

                            <button type="submit" class="btn btn-secondary" id="filter-button">
                                Filter
                            </button>
                        </form>
                    </div>

                    <div class="col-4 order-sm-0 order-1">
                        <button id="toolbar-add-button" data-bs-toggle="modal" data-bs-target="#new-modal">
                            <svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" fill="currentColor"
                                class="bi bi-plus-circle-dotted" viewBox="0 0 16 16">
                                <path
                                    d="M8 0c-.176 0-.35.006-.523.017l.064.998a7.117 7.117 0 0 1 .918 0l.064-.998A8.113 8.113 0 0 0 8 0zM6.44.152c-.346.069-.684.16-1.012.27l.321.948c.287-.098.582-.177.884-.237L6.44.153zm4.132.271a7.946 7.946 0 0 0-1.011-.27l-.194.98c.302.06.597.14.884.237l.321-.947zm1.873.925a8 8 0 0 0-.906-.524l-.443.896c.275.136.54.29.793.459l.556-.831zM4.46.824c-.314.155-.616.33-.905.524l.556.83a7.07 7.07 0 0 1 .793-.458L4.46.824zM2.725 1.985c-.262.23-.51.478-.74.74l.752.66c.202-.23.418-.446.648-.648l-.66-.752zm11.29.74a8.058 8.058 0 0 0-.74-.74l-.66.752c.23.202.447.418.648.648l.752-.66zm1.161 1.735a7.98 7.98 0 0 0-.524-.905l-.83.556c.169.253.322.518.458.793l.896-.443zM1.348 3.555c-.194.289-.37.591-.524.906l.896.443c.136-.275.29-.54.459-.793l-.831-.556zM.423 5.428a7.945 7.945 0 0 0-.27 1.011l.98.194c.06-.302.14-.597.237-.884l-.947-.321zM15.848 6.44a7.943 7.943 0 0 0-.27-1.012l-.948.321c.098.287.177.582.237.884l.98-.194zM.017 7.477a8.113 8.113 0 0 0 0 1.046l.998-.064a7.117 7.117 0 0 1 0-.918l-.998-.064zM16 8a8.1 8.1 0 0 0-.017-.523l-.998.064a7.11 7.11 0 0 1 0 .918l.998.064A8.1 8.1 0 0 0 16 8zM.152 9.56c.069.346.16.684.27 1.012l.948-.321a6.944 6.944 0 0 1-.237-.884l-.98.194zm15.425 1.012c.112-.328.202-.666.27-1.011l-.98-.194c-.06.302-.14.597-.237.884l.947.321zM.824 11.54a8 8 0 0 0 .524.905l.83-.556a6.999 6.999 0 0 1-.458-.793l-.896.443zm13.828.905c.194-.289.37-.591.524-.906l-.896-.443c-.136.275-.29.54-.459.793l.831.556zm-12.667.83c.23.262.478.51.74.74l.66-.752a7.047 7.047 0 0 1-.648-.648l-.752.66zm11.29.74c.262-.23.51-.478.74-.74l-.752-.66c-.201.23-.418.447-.648.648l.66.752zm-1.735 1.161c.314-.155.616-.33.905-.524l-.556-.83a7.07 7.07 0 0 1-.793.458l.443.896zm-7.985-.524c.289.194.591.37.906.524l.443-.896a6.998 6.998 0 0 1-.793-.459l-.556.831zm1.873.925c.328.112.666.202 1.011.27l.194-.98a6.953 6.953 0 0 1-.884-.237l-.321.947zm4.132.271a7.944 7.944 0 0 0 1.012-.27l-.321-.948a6.954 6.954 0 0 1-.884.237l.194.98zm-2.083.135a8.1 8.1 0 0 0 1.046 0l-.064-.998a7.11 7.11 0 0 1-.918 0l-.064.998zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z" />
                            </svg>
                        </button>
                    </div>
                </div>
                <!-- sort section end  -->

            </div>
            <!-- plus button end -->

            <%if(!allProducts || !allProducts.length){%>
                <div class="mt-5 mx-auto">
                    <h5>Seems like no Products have been registered. Click the "+ button" to the right to get
                        started...</h5>

                </div>
                <%}%>


                    <!-- main items list start -->
                    <div class="row mt-1 justify-content-start">
                        <%for(let product of allProducts){%>

                            <div class="col-md-4 col-xl-3 col-12 my-2 ">
                                <div class="card flex-column h-100 ">
                                    <div class="card-body card-flex d-flex flex-column justify-content-between">
                                        <h5 class="card-title align-self-start">
                                            <span class="product-card-title">
                                                <%=product.name%>
                                            </span>

                                            <%for(let tag of allTags){%>
                                                <%if(tag.product_id===product.id){%>
                                                    <span class="badge rounded-pill bg-primary product-card-category">
                                                        <%for(let tagName of allTagNames){%>
                                                            <%if(tag.tag_id===tagName.id){%>
                                                                <%=tagName.name%>
                                                                    <%}%>
                                                                        <%}%>
                                                    </span>
                                                    <%}%>
                                                        <%}%>


                                        </h5>
                                        <p class="card-text align-self-start">
                                            <span class="product-card-quantity-container ">
                                                <span class="product-card-quantity">
                                                    <%=product.quantity%>
                                                </span>
                                                <%if(product.quantity===1){%>
                                                    package
                                                    <%}else{%>
                                                        packages
                                                        <%}%>
                                            </span>
                                        </p>
                                        <img src="/images/<%=product.image%>" alt="images/squid.jpg"
                                            class="item-img align-self-start">
                                        <div class="d-flex flex-column mt-3">
                                            <div class="d-flex justify-content-between">
                                                <button type="button" class="btn btn-outline-danger align-self-start"
                                                    data-bs-toggle="modal" data-bs-target="#delete-modal"
                                                    onclick="getItemId(this)" id="<%=product.id%>">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                        fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                        <path
                                                            d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z">
                                                        </path>
                                                        <path fill-rule="evenodd"
                                                            d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z">
                                                        </path>
                                                    </svg>
                                                </button>
                                                <a href="/edit-product/<%=product.id%>"
                                                    class="btn btn-primary align-self-end edit-button">Edit
                                                    Details</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <%}%>
                    </div>
        </div>

        <!-- main items list end -->

        <%- include('partials/create-new-modal.ejs');%>
            <%- include('partials/delete-modal.ejs');%>
                <%- include('partials/upload-file-modal.ejs');%>
                    <%- include('partials/quick-actions.ejs');%>
                        <%- include('partials/footer.ejs');%>

    </div>