<div class={{concat @wrapperClass " storefront-dashboard-widget storefront-customers-widget flex h-full flex-col rounded-md border bg-white shadow-sm dark:bg-gray-800"}} ...attributes>
    <div class="storefront-customers-header">
        <div class="min-w-0">
            <h3 class="storefront-widget-title">{{this.title}}</h3>
            <div class="storefront-widget-subtitle">{{this.customers.length}} recent customers</div>
        </div>
        <div class="storefront-customers-actions">
            <span class="storefront-widget-count">{{this.customers.length}}</span>
            <Button @icon="refresh" @size="xs" @onClick={{perform this.loadCustomers}} />
        </div>
    </div>

    {{#if (media "isMobile")}}
        <div class="storefront-customers-mobile-list">
            {{#each this.customers as |customer|}}
                <article class="storefront-customer-card storefront-animate-card">
                    <div class="flex items-center gap-3">
                        <Image src={{avatar-url customer.photo_url}} class="storefront-customer-avatar" alt={{customer.name}} />
                        <div class="min-w-0 flex-1">
                            <a href="javascript:;" {{on "click" (fn this.viewCustomer customer)}} class="storefront-customer-name">{{n-a customer.name}}</a>
                            <div class="storefront-table-muted">{{customer.public_id}}</div>
                        </div>
                        <div class="storefront-customer-order-count">{{n-a customer.orders 0}}</div>
                    </div>
                    <div class="storefront-customer-card-details">
                        <span>{{n-a customer.phone}}</span>
                        <span>{{n-a customer.email}}</span>
                    </div>
                </article>
            {{else}}
                <div class="storefront-widget-empty">No recent customers yet.</div>
            {{/each}}
        </div>
    {{else}}
        <div class="storefront-customers-table-wrap {{if (not this.customer) 'empty-state'}}">
            <table class="storefront-customers-table">
                <thead>
                    <tr>
                        <th>{{t "storefront.common.id"}}</th>
                        <th>{{t "storefront.common.name"}}</th>
                        <th>{{t "storefront.common.phone"}}</th>
                        <th>{{t "storefront.common.email"}}</th>
                        <th>{{t "storefront.common.orders"}}</th>
                    </tr>
                </thead>
                <tbody>
                    {{#each this.customers as |customer|}}
                        <tr class="storefront-animate-row">
                            <td><a href="javascript:;" {{on "click" (fn this.viewCustomer customer)}} class="storefront-customer-id">{{customer.public_id}}</a></td>
                            <td>
                                <div class="storefront-customer-cell">
                                    <Image src={{avatar-url customer.photo_url}} class="storefront-customer-avatar" alt={{customer.name}} />
                                    <span class="storefront-table-text">{{n-a customer.name}}</span>
                                </div>
                            </td>
                            <td><span class="storefront-table-text">{{n-a customer.phone}}</span></td>
                            <td><span class="storefront-table-text">{{n-a customer.email}}</span></td>
                            <td><span class="storefront-customer-order-count">{{n-a customer.orders 0}}</span></td>
                        </tr>
                    {{else}}
                        <tr>
                            <td colspan="5"><div class="storefront-widget-empty">No recent customers yet.</div></td>
                        </tr>
                    {{/each}}
                </tbody>
            </table>
        </div>
    {{/if}}
</div>
