@model PlanTempus.Application.Features.Customers.Components.CustomerTableViewModel

<swp-action-bar>
    <swp-search-input>
        <i class="ph ph-magnifying-glass"></i>
        <input type="text" id="searchInput" placeholder="@Model.SearchPlaceholder" />
    </swp-search-input>
    <swp-btn-group>
        <swp-btn class="secondary">
            <i class="ph ph-export"></i>
            <span>@Model.ExportButtonText</span>
        </swp-btn>
        <swp-btn class="primary">
            <i class="ph ph-plus"></i>
            <span>@Model.CreateButtonText</span>
        </swp-btn>
    </swp-btn-group>
</swp-action-bar>

<swp-card class="customers-list">
    <swp-data-table>
        <swp-data-table-header>
            <swp-data-table-cell>@Model.ColumnName</swp-data-table-cell>
            <swp-data-table-cell>@Model.ColumnPhone</swp-data-table-cell>
            <swp-data-table-cell>@Model.ColumnEmail</swp-data-table-cell>
            <swp-data-table-cell>@Model.ColumnVisits</swp-data-table-cell>
            <swp-data-table-cell>@Model.ColumnLastVisit</swp-data-table-cell>
            <swp-data-table-cell>@Model.ColumnHairdresser</swp-data-table-cell>
            <swp-data-table-cell>@Model.ColumnCreated</swp-data-table-cell>
            <swp-data-table-cell>@Model.ColumnTags</swp-data-table-cell>
        </swp-data-table-header>
        @foreach (var customer in Model.Customers)
        {
            @await Component.InvokeAsync("CustomerRow", customer)
        }
    </swp-data-table>

    <swp-empty-state id="emptyState" style="display: none;">
        <i class="ph ph-users"></i>
        <span>@Model.EmptySearchText</span>
    </swp-empty-state>
</swp-card>