//{ "one_file": false, "dir": "src/app/components/pages/{{ hyphen_name(table_name) }}-index/", "filename": "{{ hyphen_name(table_name) }}-index.component.html", "copy": {"ngindex.scss": "{{ hyphen_name(table_name) }}-index.component.scss"} }
{%- set name = camelcase(table_name) -%}
<mat-card>
    <h1>{{ pluralise(titlecase(table_name)) }}</h1>
@if (isLoading) {
    <div id="loading">Loading...</div>
}
    <div class="table-header">
        <div class="table-search">
            <mat-form-field subscriptSizing="dynamic" appearance="outline" color="accent">
                <input matInput placeholder="Search" [formControl]="searchControl">
                <button color="primary" type="button" [hidden]="!searchControl.value"
                        (click)="searchControl.setValue('')" matSuffix mat-icon-button
                        aria-label="Clear">
                    <mat-icon>close</mat-icon>
                </button>
                <mat-icon [hidden]="searchControl.value" matSuffix>search</mat-icon>
            </mat-form-field>
        </div>
        <button color="primary" mat-raised-button routerLink="/{{ table_name }}/new">
            <mat-icon>add</mat-icon>
            Create {{ titlecase(table_name) }}
        </button>
    </div>
    <div class="{{ hyphen_name(table_name) }}-container">
        <mat-table [dataSource]="dataSource">
            {% for c in columns.values() %}
            <ng-container matColumnDef="{{ c.name }}">
                <mat-header-cell *matHeaderCellDef>{{ titlecase(c.name) }}</mat-header-cell>
                <mat-cell *matCellDef="let element">
                {%- if is_bool(c.type) -%}
                    {{ "{{ element." + c.name + " ? 'Yes' : 'No' }}" }}
                {%- else -%}
                    {{ "{{ element." + c.name + "}}" }}
                {%- endif -%}
                </mat-cell>
            </ng-container>
            {% endfor %}
            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="'/{{  table_name }}/' + row.id"
                    {%- if 'is_active' in columns.keys() %}
                     [ngClass]="{'inactive': !row.is_active}" {%- endif -%} ></mat-row>
            <div *matNoDataRow class="no-data">
                {{ "{{" }} {{ pluralise(name) }}.length ? "No results matching '" + searchControl.value + "'" :
                    "No {{ pluralise(titlecase(table_name)) }} Defined, Click 'Create {{ titlecase(table_name, ' ') }}' create one" {{ "}}" }}
            </div>
        </mat-table>
        <mat-paginator
             [pageSizeOptions]="[10, 25, 50]">
        </mat-paginator>
    </div>
</mat-card>