<div class="container">
    <h4 mat-dialog-title class="row shadowed mb-3">
        <i class="far fa-clipboard mr-2"></i>
        <span>Assign Related Service Specifications</span>

    </h4>
    <mat-dialog-content>
        <div class="row dialog-content-container">
            <mat-form-field appearance="" class="col-md-12">

                <input placeholder="Start typing to filter available Service Specifications..." #specInput [formControl]="specInputCtrl"
                    [matAutocomplete]="autoComplete" matInput  (click)="openList()">

                <mat-autocomplete #autoComplete="matAutocomplete" (optionSelected)="selected($event)" autoActiveFirstOption>
                    <mat-option *ngFor="let spec of filteredSpecs$ | async" [value]="spec">
                        {{spec.name}} 
                        <b class="badge ml-1 {{ spec['@type'] === 'CustomerFacingServiceSpecification' ? 'badge-warning' : (spec['@type'] === 'ResourceFacingServiceSpecification' ? 'badge-success' : 'badge-danger') }}">
                            {{ spec['@type'] === 'CustomerFacingServiceSpecification' ? 'CFSS' : (spec['@type'] === 'ResourceFacingServiceSpecification' ? 'RFSS' : 'null') }}
                        </b>
                    </mat-option>
                </mat-autocomplete>
            </mat-form-field>
        </div>


        <div class="table-responsive">
            <table mat-table [dataSource]="dataSource" matSort matSortActive="name" matSortDirection="desc" class="table table-generic">
                <ng-container matColumnDef="name">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Assigned Service Specifications </th>
                    <td mat-cell *matCellDef="let element" matTooltipClass="universal-tooltip"
                        [matTooltip]="element.description" matTooltipPosition="above">
                        <b>{{element.name}}</b>
                        <b class="badge ml-1 {{ element['@type'] === 'CustomerFacingServiceSpecification' ? 'badge-warning' : (element['@type'] === 'ResourceFacingServiceSpecification' ? 'badge-success' : 'badge-danger') }}">
                            {{ element['@type'] === 'CustomerFacingServiceSpecification' ? 'CFSS' : (element['@type'] === 'ResourceFacingServiceSpecification' ? 'RFSS' : 'null') }}
                        </b>
                    </td>
                </ng-container>

                <ng-container matColumnDef="actions">
                    <th mat-header-cell *matHeaderCellDef>Actions</th>
                    <td mat-cell *matCellDef="let element">
                        <div class="d-flex justify-content-center">
                            <button class="btn btn-danger btn-sm" (click)="removeProductSpec(element)"><i
                                    class="far fa-trash-alt"></i></button>
                        </div>

                    </td>
                </ng-container>

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

        </div>
    </mat-dialog-content>

    <div mat-dialog-actions class="d-flex justify-content-end">
            <button type="button" class="btn btn-danger m-2" (click)="closeDialog()">Cancel</button>
            <button type="button" class="btn btn-success m-2" (click)="confirmAssignment()">Submit</button>
        </div>

</div>