<main>
    <div class="header-space container"></div>

    <!-- restaurant menu -->
    <section class="menu flex-page">
        <div class="menu-items page-7">
            <!-- section header -->
            <div class="menu-header flex-between">
                <div class="flex">
                    <p class="menu-header-p text-ml">Food Items</p>
                    <div class="grid-svg active btn">
                        <svg width="23" height="20" viewBox="0 0 23 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="23" height="6" rx="4" fill="#1B1B1B"></rect>
                            <rect y="12" width="23" height="6" rx="4" fill="#1B1B1B"></rect>
                        </svg>
                    </div>
                    <div class="list-svg btn">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="4" cy="4" r="4" fill="#BBBBBB"></circle>
                            <circle cx="16" cy="4" r="4" fill="#BBBBBB"></circle>
                            <circle cx="4" cy="16" r="4" fill="#BBBBBB"></circle>
                            <circle cx="16" cy="16" r="4" fill="#BBBBBB"></circle>
                        </svg>
                    </div>
                </div>
                <div class="menu-category flex">
                    <div class="menu-btn-container veg-btn">
                        <img src="/assets/icons/veg-button.svg" alt="veg icon" />
                    </div>
                    <div class="menu-btn-container meat-btn">
                        <img src="/assets/icons/meat-button.svg" alt="meat icon" />
                    </div>
                    <div class="rect-sec text-sl">Rolls &amp Fries</div>
                    <div class="rect-sec text-sl">Roti</div>
                    <div class="rect-sec text-sl">Extras</div>
                    <div class="rect-sec text-sl">Drink &amp Beverages</div>
                </div>
            </div>
            <!-- grid display menu -->
            <div class="grid-menu active restaurant-menu-wrapper">
                <!-- render menu items here  -->
            </div>
            <!-- list display menu -->
            <div class="list-menu category-menu-wrapper">
                <!-- render list items here -->
            </div>
        </div>
        <!-- sidebar -->
        <div class="sidebar page-3">
            <div class="sidebar-fixed flex-column">
                <!-- sidebar-top -->
                <div class="light-wrapper flex-column">
                    <p class="text-md">Femistic Chinese &amp Fast food</p>
                    <div class="flex">
                        <div class="flex-sm">
                            <img src="/assets/icons/leaf-green.svg" alt="green leaf vegan logo" />
                            <p class="text-veg text-sm">Pure Veg</p>
                        </div>
                        <span class="span-space"></span>
                        <div class="flex-sm">
                            <img src="/assets/icons/star-splash.svg" alt="lilac star rating" />
                            <p class="text-sm text-splash">4.2 (429 ratings)</p>
                        </div>
                    </div>
                    <div class="sidebar-cuisine flex">
                        <div class="rect btn text-sm">Chinese</div>
                        <div class="rect btn text-sm">Fast Food</div>
                        <div class="rect btn text-sm">Vegeterian</div>
                    </div>
                </div>

                <!-- quick pay -->
                <div class="light-wrapper quick-pay flex-between">
                    <p class="text-sm">
                        Inside restaurant?<br />
                        You can pay your bill here
                    </p>
                    <a href="/quick-pay" class="quick-pay-btn btn text-normal">
                        Quick Pay
                    </a>
                </div>

                <!-- restaurant information-->
                <div class="light-wrapper restaurant-info flex-between">
                    <p class="text-sl-dark">20 mins @ 0.14km away</p>
                    <span class="span-space"></span>
                    <a href="#" class="text-accent-sl">Restaurant info</a>
                </div>

                <!-- discount offer -->
                <div class="discount-offer flex-between light-wrapper">
                    <div class="discount-img flex-center">
                        <img src="/assets/icons/discount.svg" alt="percentage discount image" />
                    </div>
                    <div class="discount-slider scrollable">
                        <div class="discount-slides scroller flex">
                            <div class="discount-slide slide">
                                <p class="text-normal">Flat 40% off</p>
                                <p class="text-sm">No code required, order above ₹250</p>
                            </div>
                            <div class="discount-slide">
                                <p class="text-normal">Flat 40% off</p>
                                <p class="text-sm">No code required, order above ₹250</p>
                            </div>
                            <div class="discount-slide">
                                <p class="text-normal">Flat 40% off</p>
                                <p class="text-sm">No code required, order above ₹250</p>
                            </div>
                        </div>
                    </div>
                    <div class="flex-sm">
                        <span class="span-space"></span>
                        <span class="span-space"></span>
                        <span class="span-space"></span>
                    </div>
                </div>

                <!-- standards -->
                <div class="standards flex-center">
                    <p class="text-sl-light">
                        No packaging charges. No hidden costs. No <br />
                        surge prices.
                        <span class="text-sl-dark">Only restaurant price.</span>
                    </p>
                </div>

                <!-- order type -->
                <div class="sidebar-order-type dark-wrapper">
                    <div class="sidebar-order-header btn flex-between">
                        <p class="text-sl-dark">Order type</p>
                        <div class="sidebar-order-content flex-sm">
                            <p class="sidebar-content-text text-sl-dark">Delivery</p>
                            <img src="/assets/icons/bottom-arrow.svg" alt="" />
                        </div>
                    </div>
                    <div class="sidebar-order-category">
                        <a class="sidebar-order flex-between active">
                            <p class="sidebar-order-p text-sl-dark">Delivery</p>
                            <img src="/assets/icons/dark-check.svg" alt="check mark image" />
                        </a>
                        <a class="sidebar-order flex-between">
                            <p class="sidebar-order-p text-sl-dark">Take away</p>
                            <img src="/assets/icons/dark-check.svg" alt="check mark image" />
                        </a>
                        <a class="sidebar-order flex-between">
                            <p class="sidebar-order-p text-sl-dark">Dine in</p>
                            <img src="/assets/icons/dark-check.svg" alt="check mark image" />
                        </a>
                    </div>
                </div>
            </div>
            <!-- payment summary -->
            <div class="payment-summary light-wrapper">
                <p class="text-md summary-header">Payment Summary</p>
                <div class="summary-content flex-column">
                    <div class="basket-total flex-between">
                        <p class="text-sl-dark">Basket Total</p>
                        <p class="text-sl">₹0.00</p>
                    </div>
                    <div class="delivery-charge flex-between">
                        <p class="text-sl-dark">Delivery charge (0.14km)</p>
                        <p class="text-sl">₹10.00</p>
                    </div>
                    <div class="inclusive flex-between">
                        <p class="text-sl-dark">0% GST Inclusive</p>
                        <p class="text-accent">₹0.00</p>
                    </div>
                    <div class="exclusive flex-between">
                        <p class="text-sl-dark">Platform fee (5% exclusive)</p>
                        <p class="text-sl">₹12.43</p>
                    </div>
                </div>
                <div class="total-amount flex-between">
                    <p class="text-normal">Total Amount</p>
                    <p class="text-normal">₹24.43</p>
                </div>
            </div>

            <!-- basket  -->
            <div class="basket-content">
                <a href="/basket" class="basket accent-btn flex-between btn">
                    <div class="flex-sm">
                        <img src="/assets/icons/basket-white.svg" alt="basket icon" />
                        <p class="text-normal-light">View basket</p>
                    </div>
                    <div class="basket-quantifier flex-sm">
                        <p class="basket-item-unit text-sl">0 item</p>
                        <span class="span-space" style="background: white"></span>
                        <p class="basket-unit-price text-sl">₹0</p>
                    </div>
                </a>
            </div>
            <!-- sidebar menu  -->
            <div class="sidebar-menu flex-column">
                <div class="menu-list flex-column">
                    <!-- render food list -->
                </div>
                <div class="menu-btn btn flex-center">
                    <img src="/assets/icons/menu.svg" alt="menu icon" />
                    <p class="text-normal">Food menu</p>
                </div>
            </div>
            <!-- sidebar menu space -->
            <div class="sidebar-menu-space flex-center"></div>
        </div>
    </section>
</main>