<main>
    <div class="header-space container"></div>
    <!-- order -->
    <section class="order-section flex-center">
        <div class="order-container">
            <!-- order header -->
            <div class="order-header flex">
                <img src="/assets/icons/back-arrow.svg" alt="back arrow icon" />
                <p class="text-ml">Orders</p>
            </div>
            <div class="order-content flex-column">
                <!--render order recent items -->
                <div class="order-recent">
                    <div class="order-recent-header flex-between">
                        <div class="flex-column">
                            <p class="text-normal">Al Bek Restaurant</p>
                            <p class="text-sl-light">Station Road, Navi Mumbai</p>
                        </div>
                        <div class="order-date-time flex-column">
                            <div class="order-date flex-center">
                                <p class="text-sl-dark">19 Jun</p>
                            </div>
                            <div class="order-time flex-center">
                                <p class="text-sm-light">2:34PM</p>
                            </div>
                        </div>
                    </div>
                    <div class="order-items">
                        <div class="order-itenary flex-column">
                            <div class="order-unit flex-sm">
                                <p class="text-sl-dark">1px</p>
                                <img src="/assets/icons/red-dot.svg" alt="red dot icon" />
                                <p class="text-sl">French Fries</p>
                            </div>
                            <div class="order-unit flex-sm">
                                <p class="text-sl-dark">1px</p>
                                <img src="/assets/icons/red-dot.svg" alt="red dot icon" />
                                <p class="text-sl">French Fries</p>
                            </div>
                            <div class="order-unit flex-sm">
                                <p class="text-sl-dark">1px</p>
                                <img src="/assets/icons/red-dot.svg" alt="red dot icon" />
                                <p class="text-sl">French Fries</p>
                            </div>
                        </div>
                    </div>
                    <a class="order-tracking flex-between">
                        <p class="text-sl">Track status</p>
                        <p class="text-sl">₹250</p>
                    </a>
                </div>
                <div class="order-recent">
                    <div class="order-recent-header flex-between">
                        <div class="flex-column">
                            <p class="text-normal">Al Bek Restaurant</p>
                            <p class="text-sl-light">Station Road, Navi Mumbai</p>
                        </div>
                        <div class="order-date-time flex-column">
                            <div class="order-date flex-center">
                                <p class="text-sl-dark">19 Jun</p>
                            </div>
                            <div class="order-time flex-center">
                                <p class="text-sm-light">2:34PM</p>
                            </div>
                        </div>
                    </div>
                    <div class="order-items">
                        <div class="order-itenary flex-column">
                            <div class="order-unit flex-sm">
                                <p class="text-sl-dark">1px</p>
                                <img src="/assets/icons/red-dot.svg" alt="red dot icon" />
                                <p class="text-sl">French Fries</p>
                            </div>
                            <div class="order-unit flex-sm">
                                <p class="text-sl-dark">1px</p>
                                <img src="/assets/icons/red-dot.svg" alt="red dot icon" />
                                <p class="text-sl">French Fries</p>
                            </div>
                            <div class="order-unit flex-sm">
                                <p class="text-sl-dark">1px</p>
                                <img src="/assets/icons/red-dot.svg" alt="red dot icon" />
                                <p class="text-sl">French Fries</p>
                            </div>
                        </div>
                    </div>
                    <a class="order-reorder flex-between">
                        <p class="text-accent">Reorder</p>
                        <div class="order-status-price flex">
                            <div class="flex-sm">
                                <img src="/assets/icons/green-tick.svg" alt="green tick icon" />
                                <p class="text-sl-dark">Delivered</p>
                            </div>
                            <p class="text-sl-dark">₹250</p>
                        </div>
                    </a>
                    <div class="order-stars flex-center">
                        <img src="/assets/icons/cluster.svg" alt="star cluster icon">
                    </div>
                </div>
                <div class="order-recent">
                    <div class="order-recent-header flex-between">
                        <div class="flex-column">
                            <p class="text-normal">Al Bek Restaurant</p>
                            <p class="text-sl-light">Station Road, Navi Mumbai</p>
                        </div>
                        <div class="order-date-time flex-column">
                            <div class="order-date flex-center">
                                <p class="text-sl-dark">19 Jun</p>
                            </div>
                            <div class="order-time flex-center">
                                <p class="text-sm-light">2:34PM</p>
                            </div>
                        </div>
                    </div>
                    <div class="order-items">
                        <div class="order-itenary flex-column">
                            <div class="order-unit flex-sm">
                                <p class="text-sl-dark">1px</p>
                                <img src="/assets/icons/red-dot.svg" alt="red dot icon" />
                                <p class="text-sl">French Fries</p>
                            </div>
                            <div class="order-unit flex-sm">
                                <p class="text-sl-dark">1px</p>
                                <img src="/assets/icons/red-dot.svg" alt="red dot icon" />
                                <p class="text-sl">French Fries</p>
                            </div>
                            <div class="order-unit flex-sm">
                                <p class="text-sl-dark">1px</p>
                                <img src="/assets/icons/red-dot.svg" alt="red dot icon" />
                                <p class="text-sl">French Fries</p>
                            </div>
                        </div>
                    </div>
                    <a class="order-reorder flex-between">
                        <p class="text-accent">Reorder</p>
                        <div class="order-status-price flex">
                            <div class="flex-sm">
                                <img src="/assets/icons/green-tick.svg" alt="green tick icon" />
                                <p class="text-sl-dark">Delivered</p>
                            </div>
                            <p class="text-sl-dark">₹250</p>
                        </div>
                    </a>
                    <div class="order-stars flex-center">
                        <img src="/assets/icons/cluster.svg" alt="star cluster icon">
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>