<ContentPanel
    @title={{this.title}}
    @titleStatusRight={{this.customers.length}}
    @titleStatusRightClass="info-status-badge"
    @hideStatusDot={{true}}
    @open={{this.loaded}}
    @isLoading={{this.loadCustomers.isRunning}}
    @pad={{false}}
    @wrapperClass={{@wrapperClass}}
    @panelBodyClass="p-0i"
>
    <div class="flex justify-end px-4 pt-2 space-x-2">
        <Button @icon="refresh" @size="xs" @onClick={{perform this.loadCustomers}} />
    </div>
    {{#if (media "isMobile")}}
        <div class="flex flex-col p-3 space-y-3">
            {{#each this.customers as |customer|}}
                <div class="py-2 px-3 rounded-md border border-gray-400 dark:border-gray-700">
                    <div class="flex flex-row">
                        <div>
                            <Image src={{avatar-url customer.photo_url}} class="w-12 h-12 rounded-md shadow-sm mr-4" alt={{customer.name}} />
                        </div>
                        <div>
                            <div class="text-xs font-bold dark:text-gray-100">{{customer.name}}</div>
                            <div class="text-xs dark:text-gray-100">{{customer.email}}</div>
                            <div class="text-xs dark:text-gray-100">{{customer.phone}}</div>
                        </div>
                    </div>
                </div>
            {{/each}}
        </div>
    {{else}}
        <div class="table-wrapper table-fluid">
            <table class="storefront-widget-table">
                <thead>
                    <tr class="h-12 text-left py-1">
                        <th style={{"width: 20%"}}>{{t "storefront.common.id"}}</th>
                        <th style={{"width: 15%"}}>{{t "storefront.common.name"}}</th>
                        <th style={{"width: 20%"}}>{{t "storefront.common.phone"}}</th>
                        <th style={{"width: 35%"}}>{{t "storefront.common.email"}}</th>
                        <th style={{"width: 10%"}}>{{t "storefront.common.orders"}}</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {{#each this.customers as |customer|}}
                        <tr class="h-12">
                            <td><a href="javascript:;" {{on "click" (fn this.viewCustomer customer)}}>{{customer.public_id}}</a></td>
                            <td>{{n-a customer.name}}</td>
                            <td>{{n-a customer.phone}}</td>
                            <td>{{n-a customer.email}}</td>
                            <td>{{n-a customer.orders 0}}</td>
                            <td></td>
                        </tr>
                    {{/each}}
                </tbody>
            </table>
        </div>
    {{/if}}
</ContentPanel>