Asymmetrik/ngx-starter

@if (!embedded) {
    <section class="page-header mb-3">
        <div>
            <h1 skipTo>Teams</h1>
            View and manage team membership and roles.
        </div>
        <system-alert />
    </section>
}

<section [class.anchored-page-body]="!embedded" [class.page-body]="!embedded">
    <div class="table-header d-flex align-items-center">
        <div class="table-actions d-flex flex-wrap flex-grow-1">
            <div class="mb-3 me-5">
                <asy-search-input
                    placeholder="Search teams..."
                    [search]="dataSource.searchEvent$.value"
                    (applySearch)="dataSource.search($event)"
                />
            </div>

            <div class="mb-3 ms-auto">
                @if (canCreateTeam()) {
                    <button
                        class="btn btn-primary ms-auto"
                        type="button"
                        [queryParams]="{ parent: parent()?._id }"
                        [routerLink]="['/team/create']"
                    >
                        <span class="fa-solid fa-plus"></span> Create Team
                    </button>
                }
            </div>
        </div>
    </div>

    <div class="table-content">
        <table class="table table-striped" asyFilter asySort cdk-table [dataSource]="dataSource">
            <ng-container cdkColumnDef="name">
                <th cdk-header-cell *cdkHeaderCellDef>
                    <asy-header-sort>Name</asy-header-sort>
                </th>
                <td class="text-nowrap" cdk-cell *cdkCellDef="let team">
                    <a class="btn btn-link p-0" [routerLink]="['/team', team._id]">
                        {{ team.name }}
                    </a>
                </td>
            </ng-container>
            <asy-ago-date-column name="created" sortable />
            <ng-container cdkColumnDef="description">
                <th cdk-header-cell *cdkHeaderCellDef>
                    <asy-header-sort>Description</asy-header-sort>
                </th>
                <td cdk-cell *cdkCellDef="let team">
                    {{ team.description }}
                </td>
            </ng-container>
            <tr cdk-header-row *cdkHeaderRowDef="displayedColumns; sticky: true"></tr>
            <tr cdk-row *cdkRowDef="let team; columns: displayedColumns"></tr>
        </table>

        <asy-table-empty-state
            emptyText="No {{ parent() ? 'sub-teams' : 'teams' }} are available."
            filteredText="No {{ parent() ? 'sub-teams' : 'teams' }} matched your search."
            [dataSource]="dataSource"
            (clearFilters)="clearFilters()"
        />
    </div>

    <div class="table-footer d-flex align-items-center">
        <div class="table-footer-pager ms-auto">
            <asy-paginator [dataSource]="dataSource" />
        </div>
    </div>
</section>