{{#if (and this.loadCustomers.isRunning (not this.loaded))}}
    <div class="next-content-panel-wrapper">
        <div class="next-content-panel-container">
            <div class="next-content-panel next-content-panel-is-closed">
                <div class="next-content-panel-header next-content-panel-toggle next-content-panel-is-closed">
                    <a href="javascript:;" class="next-content-panel-header-left">
                        <span class="icon-container">
                            <Spinner class="text-sky-400" @height="13" @width="13" />
                        </span>
                        <div class="next-content-panel-title-container">
                            <div class="panel-title flex-shrink-0">
                                <div class="flex flex-col">
                                    <span>{{this.title}}</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
{{else}}
    <ContentPanel
        @title={{this.title}}
        @titleStatusRight={{this.customers.length}}
        @titleStatusRightClass="info-status-badge"
        @hideStatusDot={{true}}
        @open={{gt this.customers.length 0}}
        @isLoading={{this.loadCustomers.isRunning}}
        @pad={{false}}
        @wrapperClass={{@wrapperClass}}
    >
        {{#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.customerId}}</a></td>
                                <td>{{n-a customer.name}}</td>
                                <td>{{n-a customer.phone}}</td>
                                <td>{{n-a customer.email}}</td>
                                <td></td>
                                <td></td>
                            </tr>
                        {{/each}}
                    </tbody>
                </table>
            </div>
        {{/if}}
    </ContentPanel>
{{/if}}