@model PlanTempus.Application.Features.Services.Components.ServiceTableViewModel

<swp-services-header>
    <swp-search-input>
        <i class="ph ph-magnifying-glass"></i>
        <input type="text" placeholder="@Model.SearchPlaceholder" />
    </swp-search-input>
    <swp-btn class="primary">
        <i class="ph ph-plus"></i>
        @Model.CreateButtonText
    </swp-btn>
</swp-services-header>

<swp-card class="services-list">
    <swp-data-table>
        <swp-data-table-header>
            <swp-data-table-cell>@Model.ColumnService</swp-data-table-cell>
            <swp-data-table-cell>@Model.ColumnDuration</swp-data-table-cell>
            <swp-data-table-cell>@Model.ColumnPrice</swp-data-table-cell>
            <swp-data-table-cell></swp-data-table-cell>
        </swp-data-table-header>
        @foreach (var category in Model.Categories)
        {
            @await Component.InvokeAsync("ServiceCategoryGroup", category)
        }
    </swp-data-table>
</swp-card>