<div class="storefront-dashboard-widget storefront-orders-widget flex h-full flex-col rounded-md border bg-white shadow-sm dark:bg-gray-800" ...attributes>
    <div class="storefront-orders-header">
        <div class="min-w-0">
            <div class="storefront-widget-title">{{this.title}}</div>
            <div class="storefront-widget-subtitle">{{this.orders.length}} recent orders{{#if this.orders.length}} · {{format-currency this.total this.currency}}{{/if}}</div>
        </div>
        <div class="storefront-orders-actions">
            <Button @icon="refresh" @size="xs" @helpText="Refresh orders" @onClick={{perform this.loadOrders}} />
            <Toggle @label="Active only" @isToggled={{this.activeFilter}} @onToggle={{this.toggleActiveFilter}} />
        </div>
    </div>

    {{#if (media "isMobile")}}
        <div class="storefront-orders-mobile-list">
            {{#each this.orders as |order|}}
                <article class="storefront-order-card storefront-animate-card">
                    <div class="flex items-start justify-between gap-3">
                        <div class="min-w-0">
                            <a href="javascript:;" {{on "click" (fn this.viewOrder order)}} class="storefront-order-id">{{order.public_id}}</a>
                            <div class="storefront-order-meta">{{order.createdAgo}}</div>
                        </div>
                        <div class="text-right">
                            <div class="storefront-order-total">{{format-currency order.meta.total order.meta.currency}}</div>
                            <Badge @status={{order.status}} />
                        </div>
                    </div>

                    <div class="storefront-order-card-details">
                        <span>{{n-a order.customer.name}}</span>
                        <span>
                            {{#if order.meta.is_pickup}}
                                {{t "storefront.component.widget.orders.pickup-order"}}
                            {{else}}
                                {{n-a order.driver_assigned.name}}
                            {{/if}}
                        </span>
                    </div>

                    <div class="storefront-order-card-actions">
                        <Button @size="xs" @type="default" @icon="eye" @helpText={{t "storefront.common.view"}} @onClick={{fn this.viewOrder order}} />
                        <Storefront::Order::Actions @order={{order}} @onChange={{this.handleOrderChange}} />
                    </div>
                </article>
            {{else}}
                <div class="storefront-widget-empty">No recent orders yet.</div>
            {{/each}}
        </div>
    {{else}}
        <div class="storefront-orders-table-wrap {{if (not this.orders) 'empty-state'}}">
            <table class="storefront-orders-table">
                <thead>
                    <tr>
                        <th>Order</th>
                        <th>Amount</th>
                        <th>Customer</th>
                        <th>Fulfillment</th>
                        <th>Status</th>
                        <th><span class="sr-only">Actions</span></th>
                    </tr>
                </thead>
                <tbody>
                    {{#each this.orders as |order|}}
                        <tr class="storefront-animate-row">
                            <td>
                                <a href="javascript:;" {{on "click" (fn this.viewOrder order)}} class="storefront-order-id">
                                    <div>{{order.public_id}}</div>
                                    <span class="storefront-table-muted">{{order.createdAgo}}</span>
                                </a>
                            </td>
                            <td><span class="storefront-order-total">{{format-currency order.meta.total order.meta.currency}}</span></td>
                            <td><span class="storefront-table-text">{{n-a order.customer.name}}</span></td>
                            <td>
                                {{#if order.meta.is_pickup}}
                                    <Badge @hideStatusDot={{true}} @status="info"><FaIcon @icon="hand-holding-dollar" class="mr-1" />{{t
                                            "storefront.component.widget.orders.pickup-order"
                                        }}</Badge>
                                {{else}}
                                    <span class="storefront-table-text">{{n-a order.driver_assigned.name}}</span>
                                {{/if}}
                            </td>
                            <td><Badge @status={{order.status}} /></td>
                            <td>
                                <div class="storefront-table-actions">
                                    <Button @size="xs" @type="default" @icon="eye" @helpText={{t "storefront.common.view"}} @onClick={{fn this.viewOrder order}} />
                                    <Storefront::Order::Actions @order={{order}} @onChange={{this.handleOrderChange}} />
                                </div>
                            </td>
                        </tr>
                    {{else}}
                        <tr>
                            <td colspan="7">
                                <div class="storefront-widget-empty">No recent orders yet.</div>
                            </td>
                        </tr>
                    {{/each}}
                </tbody>
            </table>
        </div>
    {{/if}}
</div>
