<template>
    <lightning-card title="Order List" icon-name="standard:orders">
        <div class="slds-m-around_medium">
            <lightning-input type="search" label="Search" onchange={handleSearch}></lightning-input>
        </div>
        <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered">
            <thead>
                <tr class="slds-text-title_caps">
                    <th scope="col">
                        <div class="slds-truncate">Order Name</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate">Order Date</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate">Actions</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <template for:each={filteredOrders} for:item="order">
                    <tr key={order.Id}>
                        <td data-label="Order Name">{order.Name}</td>
                        <td data-label="Order Date">{order.OrderDate}</td>
                        <td data-label="Actions">
                            <lightning-button-group>
                                <lightning-button label="View Details" variant="brand" onclick={handleViewDetails} value={order.Id}></lightning-button>
                                <lightning-button label="Reorder" variant="brand" onclick={handleReorder} value={order.Id}></lightning-button>
                            </lightning-button-group>
                        </td>
                    </tr>
                </template>
                <template if:true={filteredOrders.length === 0}>
                    <tr>
                        <td colspan="3" class="slds-text-align_center">No orders found.</td>
                    </tr>
                </template>
            </tbody>
        </table>
    </lightning-card>
</template>