products-template.html

    <mat-accordion>
        <mat-expansion-panel *ngFor="let category of bot.categories" #expansionPanel (opened)="onPanelOpen(category)">
            <mat-expansion-panel-header>
                <mat-panel-title>
                    {{ category.name }}
                </mat-panel-title>
                <mat-panel-description class="justify-end" *ngIf="expansionPanel.expanded && !isPristine(category)">
                    <button mat-raised-button color="primary" type="submit" (click)="$event.stopPropagation();saveCategory(category)">
                        Save Changes
                    </button>
                </mat-panel-description>
            </mat-expansion-panel-header>

            <mat-tab-group>
                <mat-tab label="Products Knoweldge Base">
                    <div class="products-container">
                        <code style="background-color:gainsboro; border: 1px solid black; overflow: scroll;">
                            <pre>{{category |json}}</pre>
                        </code>
                        <table mat-table #table [dataSource]="category.ai.utterances">

                            <!-- Utterance Column -->
                            <ng-container matColumnDef="utterance">
                                <th mat-header-cell *matHeaderCellDef>Utterance</th>
                                <td mat-cell *matCellDef="let row" #Rangeable [innerHtml]="row.text | mark:row.entityLabels | sanitize">
                                    <!-- Menu trigger and item -->
                                    <!-- some test bla bla
                                    <b>bla bla bla</b> a b tag for testing! -->
                                </td>
                            </ng-container>

                            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                        </table>

                        <mat-paginator [length]="category.products.length" [pageSize]="30">
                        </mat-paginator>

                        <span [matMenuTriggerFor]="menu" class="entities-menu-trigger" [style.left.px]="menuLeft" [style.top.px]="menuTop"></span>
                        <mat-menu #menu="matMenu">

                            <mat-form-field class="filter-entities-input">
                                <input matInput placeholder="Filter/Create" (input)="filterEntities($event.target, category.ai.entities)" (keydown.enter)="createEntity($event.target, category.ai.entities)"
                                    (click)="$event.stopPropagation()" autocomplete="off">
                            </mat-form-field>
                            <span>{{category.ai.entities | json}}</span>
                            <mat-divider *ngIf="(filteredEntities$ | async).length > 0"></mat-divider>
                            <button *ngFor="let entity of (filteredEntities$ | async)" mat-menu-item (click)="processSelection(entity, category)">{{ entity }}</button>
                        </mat-menu>
                    </div>
                </mat-tab>
                <mat-tab label="Bot Questionaire">
                    Bot Questionaire
                    <br>
                    <br> some bla bla bla super complicated questionaire creator component
                </mat-tab>

            </mat-tab-group>

        </mat-expansion-panel>
    </mat-accordion>