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


    <div class="text-center mt-3 mb-2">
        <h2>Instructions</h2>
        <hr>
    </div>

    <div class="row d-flex justify-content-center">
        <div class="col-10">

            <div class="row justify-content-between align-items-center my-4">
                <div class="col-xl-6 col-12 order-2 order-xl-1 d-xl-inline d-block tutorial-text-wrapper">
                    <p class="tutorial-text">Food Management System is an open source application that allows you to
                        store, manage and monitor your home’s food inventory. Keep track of items’s expiring dates and
                        help yourself manage your home by minimising waste.</p>
                </div>
                <div class="col-xl-6  col-12 order-2  d-xl-inline d-block text-center">
                    <img src="/images/tutorial/screenshot 1.png" alt="" class="tutorial-image img-fluid mt-2">
                </div>
            </div>

            <div class="row justify-content-center align-items-center my-4">
                <div class="col-xl-6 col-12 order-2 order-xl-1 d-xl-inline d-block text-center">
                    <img src="/images/tutorial/screenshot 1.png" alt="" class="tutorial-image img-fluid mt-2">
                </div>
                <div class="col-xl-6  col-12 order-1  d-lg-inline d-block text-center tutorial-text-wrapper">
                    <p class="tutorial-text">In the Home tab, you can find all the products you have registered in your
                        account. You can always add more Products by pressing the (+) button, located on the right top
                        side of your display</p>
                </div>
            </div>
            <div class="row justify-content-between align-items-center my-4">
                <div class="col-xl-6 col-12 order-2 order-xl-1 d-xl-inline d-block tutorial-text-wrapper">
                    <p class="tutorial-text">The (+) button opens a window where you will be able to input data in order
                        to add a new product to the catalog. Enter product name, amount of packages that you purchased,
                        categories and choose a picture that best represents the item you are storing. Initially, you
                        could upload your own photos for the product you are adding to the catalog, but it is not
                        something I can currently afford since pricing for this service is expensive.
                    </p>
                </div>
                <div class="col-xl-6  col-12 order-2  d-xl-inline d-block text-center">
                    <img src="/images/tutorial/screenshot 2.png" alt="" class="tutorial-image img-fluid mt-2">
                </div>
            </div>

            <div class="row justify-content-center align-items-center my-4">
                <div class="col-xl-6 col-12 order-2 order-xl-1 d-xl-inline d-block text-center">
                    <img src="/images/tutorial/screenshot detail-delete.png" alt=""
                        class="tutorial-image img-fluid mt-2">
                </div>
                <div class="col-xl-6  col-12 order-1  d-lg-inline d-block text-center tutorial-text-wrapper">
                    <p class="tutorial-text">From the Home tab, you can delete products by clicking the Trashcan button.
                        This will remove the products from the list and delete all related packages of this product.
                    </p>
                </div>
            </div>
            <div class="row justify-content-between align-items-center my-4">
                <div class="col-xl-6 col-12 order-2 order-xl-1 d-xl-inline d-block tutorial-text-wrapper">
                    <p class="tutorial-text">You can edit product details by pressing the Edit Details button on a
                        product of the Home tab. </p>
                </div>
                <div class="col-xl-6  col-12 order-2  d-xl-inline d-block text-center">
                    <img src="/images/tutorial/screenshot detail-delete.png" alt=""
                        class="tutorial-image img-fluid mt-2">

                </div>
            </div>

            <div class="row justify-content-center align-items-center my-4">
                <div class="col-xl-6 col-12 order-2 order-xl-1 d-xl-inline d-block text-center">
                    <img src="/images/tutorial/screenshot 3.png" alt="" class="tutorial-image img-fluid mt-2">

                </div>
                <div class="col-xl-6  col-12 order-1  d-lg-inline d-block text-center tutorial-text-wrapper">
                    <p class="tutorial-text">The edit page is a very powerful page that provides access to many
                        important features. Firstly, here you can edit product details such as the product name, the
                        product picture and even add your own comments. Secondly, from the product edit page you can
                        manage the packages of said product. For example, you can set the expiration dates of the
                        created packages of the product, which will be saved once you press the green checkbox button.
                        The red cross button cancels changes and returns you to the home tab.
                    </p>
                </div>
            </div>

            <div class="row justify-content-between align-items-center my-4">
                <div class="col-xl-6 col-12 order-2 order-xl-1 d-xl-inline d-block tutorial-text-wrapper">
                    <p class="tutorial-text">You can use the update quantity wizard to modify the number of packages
                        related to that product. Here you can choose between adding more packages and setting their
                        expiration dates or removing a package that has been consumed by the household. </p>
                </div>
                <div class="col-xl-6  col-12 order-2  d-xl-inline d-block text-center">
                    <img src="/images/tutorial/screenshot 4.png" alt="" class="tutorial-image img-fluid mt-2">

                </div>
            </div>

            <div class="row justify-content-center align-items-center my-4">
                <div class="col-xl-6 col-12 order-2 order-xl-1 d-xl-inline d-block text-center">
                    <img src="/images/tutorial/screenshot 6.png" alt="" class="tutorial-image img-fluid mt-2">

                </div>
                <div class="col-xl-6  col-12 order-1  d-lg-inline d-block text-center tutorial-text-wrapper">
                    <p class="tutorial-text">Choose the expiring tab to see packages that are about to expire (expiring
                        in the next 50 days) and packages that have recently expired (expired in the past 15 days). To
                        your right you can find a list of links
                        that will direct you to any product you want to edit.
                    </p>
                </div>
            </div>

            <div class="row justify-content-between align-items-center my-4">
                <div class="col-xl-6 col-12 order-2 order-xl-1 d-xl-inline d-block tutorial-text-wrapper">
                    <p class="tutorial-text">On the top right side of your display, you can find the Quick Actions
                        button. Clicking the button opens a menu from which you can create a new product, quickly jump
                        to the edit screen of a specific product, and change your colour theme preference.
                    </p>
                </div>
                <div class="col-xl-6  col-12 order-2  d-xl-inline d-block text-center">
                    <img src="/images/tutorial/screenshot 7.png" alt="" class="tutorial-image img-fluid mt-2">

                </div>
            </div>

            <div class="row justify-content-center align-items-center my-4">
                <div class="col-xl-6 col-12 order-2 order-xl-1 d-xl-inline d-block text-center">
                    <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img src="/images/tutorial/blue.png" class="d-block w-100 tutorial-image" alt="..."
                                    data-bs-interval="0">
                            </div>
                            <div class="carousel-item">
                                <img src="/images/tutorial/red.png" class="d-block w-100 tutorial-image" alt="..."
                                    data-bs-interval="0">

                            </div>
                            <div class="carousel-item">
                                <img src="/images/tutorial/purple.png" class="d-block w-100 tutorial-image" alt="..."
                                    data-bs-interval="0">

                            </div>
                            <div class="carousel-item">
                                <img src="/images/tutorial/teal.png" class="d-block w-100 tutorial-image" alt="..."
                                    data-bs-interval="0">

                            </div>
                            <div class="carousel-item">
                                <img src="/images/tutorial/brown.png" class="d-block w-100 tutorial-image" alt="..."
                                    data-bs-interval="0">

                            </div>
                            <div class="carousel-item">
                                <img src="/images/tutorial/gold.png" class="d-block w-100 tutorial-image" alt="..."
                                    data-bs-interval="0">

                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-xl-6  col-12 order-1  d-lg-inline d-block text-center tutorial-text-wrapper">
                    <p class="tutorial-text">The food management system user interface comes in 6 different colors for
                        you to explore and choose your favorite.
                    </p>

                    <div>
                        <!-- // new buttons -->
                        <div class="row" id="carousel-button-container">
                            <div class="col-2">
                                <label for="" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                        style="fill: blue;" class="bi bi-circle-fill" viewBox="0 0 16 16">
                                        <circle cx="8" cy="8" r="8" />
                                    </svg>
                                </label>
                            </div>
                            <div class="col-2" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1">
                                <label for="colorRed">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                        style="fill: red;" class="bi bi-circle-fill" viewBox="0 0 16 16">
                                        <circle cx="8" cy="8" r="8" />
                                    </svg>
                                </label>
                            </div>
                            <div class="col-2">
                                <label for="colorPurple" data-bs-target="#carouselExampleIndicators"
                                    data-bs-slide-to="2">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                        style="fill: purple;" class="bi bi-circle-fill" viewBox="0 0 16 16">
                                        <circle cx="8" cy="8" r="8" />
                                    </svg>
                                </label>
                            </div>
                            <div class="col-2">
                                <label for="colorTeal" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                        style="fill: teal;" class="bi bi-circle-fill" viewBox="0 0 16 16">
                                        <circle cx="8" cy="8" r="8" />
                                    </svg>
                                </label>
                            </div>
                            <div class="col-2">
                                <label for="colorBrown" data-bs-target="#carouselExampleIndicators"
                                    data-bs-slide-to="4">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                        style="fill: brown;" class="bi bi-circle-fill" viewBox="0 0 16 16">
                                        <circle cx="8" cy="8" r="8" />
                                    </svg>
                                </label>
                            </div>
                            <div class="col-2">
                                <label for="colorGold" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="5">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                        style="fill: rgb(206, 134, 0);" class="bi bi-circle-fill" viewBox="0 0 16 16">
                                        <circle cx="8" cy="8" r="8" />
                                    </svg>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="row justify-content-between align-items-center my-4">
                <div class="col-12 d-xl-inline d-block tutorial-text-wrapper text-center">
                    <p class="tutorial-text">Keep in mind that this software still has a long way to go, with many more
                        features to be added in the future.
                        <br>
                        We are still in version 1.0.0 after all.
                    </p>
                </div>
            </div>

        </div>
    </div>

    <footer class="py-3 mt-auto">
        <div>
            <ul class="nav justify-content-center border-bottom pb-3 mb-3 footer-list">
            </ul>
            <div class="ml-2">
                <p class="text-center">Made by yours truly</p>
                <p class="text-center">
                    © <%const date=new Date(); const result=date.getFullYear();%>
                        <%=result%> Prokakis
                            Emmanouil</p>
                </p>
            </div>
        </div>
    </footer>

    <script type="module">
        changeAccentColor('<%=userThemePreference%>');
    </script>
    <%- include('partials/quick-actions.ejs');%>
        <%- include('partials/create-new-modal.ejs');%>