<div class="container-fluid py-5" *ngIf="specNotFound" [@fadeIn]>
    <div class="row align-items-center justify-content-center minh-30vh">
        <div class="col-12 text-center">
            <h4>Service Specification with id #{{specID}} is not found</h4>
        </div>
    </div>
</div>

<div class="container-fluid py-5" *ngIf="!specNotFound && finishedLoading">
    <div class="row">
        <div class="col-12">
            <div class="card card-paper mb-0">
                <div class="card-header">
                    <div class="container-fluid">
                        <div class="row justify-content-between align-items-center">
                            <div>
                                <h2 class="shadowed">Service Specification Designer</h2>

                                <p class="shadowed mb-0" *ngIf="newSpecification">Design a new service
                                    specification</p>

                                <p class="shadowed mb-0" *ngIf="!newSpecification">Edit Design of
                                    <dfn><b>{{spec?.name}}</b></dfn> Service Specification
                                </p>
                                <p *ngIf="spec"><b class="card-stats shadowed">{{spec['@type']}}</b></p>

                                <div class="card-stats" *ngIf="!newSpecification">
                                    <i class="fas fa-sync spin mr-2"></i>Last updated at
                                    {{spec?.lastUpdate | date:'short'}} (Local Time)
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <div class="row">

                        <div class="col-xl-2 col-lg-3">
                            <div class="nav flex-column nav-pills mb-3 mb-lg-0" role="tablist"
                                aria-orientation="vertical">
                                <a class="nav-link " [class.active]="item === activeListItem"
                                    [class.mat-elevation-z2]="item === activeListItem"
                                    [class.disabled]="newSpecification" (click)="selectListitem(item)"
                                    *ngFor="let item of listItems" role="tab" aria-selected="true">{{item}}</a>

                                <!-- editForm.controls.isBundle.value for Service Specification Relationships -->
                            </div>
                        </div>

                        <div class="col-xl-10 col-lg-9">
                            <div class="tab-content">

                                <!-- Main Properties Tab -->
                                <div class="tab-pane active" *ngIf="activeListItem === 'Main Properties'"
                                    role="tabpanel" [@fadeIn]>
                                    <form [formGroup]="editForm">
                                        <div class="card mat-elevation-z1 bg-light">
                                            <div class="card-body">
                                                <div class="row align-items-center">
                                                    <mat-form-field class="col-md-6">
                                                        <mat-label>Name</mat-label>
                                                        <input matInput formControlName="name">
                                                    </mat-form-field>

                                                    <mat-form-field class="col-md-4 col-sm-6">
                                                        <mat-label>Version</mat-label>
                                                        <input matInput formControlName="version">
                                                    </mat-form-field>

                                                    <div class="col-md-2 col-sm-6 text-center">
                                                        <mat-checkbox color="primary" formControlName="isBundle"
                                                            (change)="bundleCheckboxChanged($event)">Bundle
                                                        </mat-checkbox>
                                                    </div>

                                                    <mat-form-field class="col-md-12">
                                                        <mat-label>Description (supports Markdown)</mat-label>
                                                        <textarea matTextareaAutosize="true" matAutosizeMinRows="2"
                                                            matInput formControlName="description"></textarea>
                                                    </mat-form-field>

                                                    <mat-form-field class="col-md-12">
                                                        <mat-label>Lifecycle Status</mat-label>
                                                        <mat-select formControlName="lifecycleStatus">
                                                            <mat-option *ngFor="let status of lifecycleStatuses"
                                                                [value]="status">
                                                                {{status}}
                                                            </mat-option>
                                                        </mat-select>
                                                    </mat-form-field>

                                                    <div class="col-12" formGroupName="validFor">
                                                        <div class="row">
                                                            <mat-form-field class="col-md-6"
                                                                [owlDateTimeTrigger]="pickerFrom">
                                                                <mat-label>Valid From</mat-label>

                                                                <input matInput [owlDateTime]="pickerFrom"
                                                                    placeholder="Date Time"
                                                                    formControlName="startDateTime">
                                                                <mat-icon matSuffix>date_range</mat-icon>
                                                                <owl-date-time #pickerFrom></owl-date-time>
                                                                <mat-hint>Date is displayed in Local Time <span *ngIf="editForm.value.validFor.startDateTime">(UTC: {{editForm.value.validFor.startDateTime | date:'dd/MM/yy, HH:mm':'UTC'}})</span></mat-hint>
                                                            </mat-form-field>

                                                            <mat-form-field class="col-md-6"
                                                                [owlDateTimeTrigger]="pickerUntil">
                                                                <mat-label>Valid Until</mat-label>
                                                                <input matInput [owlDateTime]="pickerUntil"
                                                                    placeholder="Date Time"
                                                                    formControlName="endDateTime">
                                                                <mat-icon matSuffix>date_range</mat-icon>
                                                                <owl-date-time #pickerUntil></owl-date-time>
                                                                <mat-hint>Date is displayed in Local Time <span *ngIf="editForm.value.validFor.endDateTime">(UTC: {{editForm.value.validFor.endDateTime | date:'dd/MM/yy, HH:mm':'UTC'}})</span></mat-hint>
                                                            </mat-form-field>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-12 mt-4" [@fadeIn] *ngIf="currentSpecRelationshipsUrl">
                                                        <div>Relationships Overview</div>                                                       
                                                        <img [src]="currentSpecRelationshipsUrl" alt="Relationship graph not available" class="img-fluid">
                                                    </div>
                                                    
                                                </div>

                                                
                                                <div class="container-fluid">
                                                    <div class="row justify-content-end">
                                                        <button type="submit" class="btn btn-primary"
                                                            (click)="updateServiceSpecGeneral()"><i
                                                                class="fas fa-check mr-2"></i>Submit</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card-footer"></div>
                                        </div>
                                    </form>
                                </div>
                                <!-- END OF Main Properties Tab -->

                                <!-- Service Specification Relationships Tab -->
                                <div class="tab-pane active disable"
                                    *ngIf="activeListItem === 'Service Specification Relationships'" role="tabpanel"
                                    [@fadeIn]>
                                    <div class="card mat-elevation-z1 bg-light">
                                        <div class="card-body">
                                            <div *ngIf="!editForm.controls.isBundle.value">
                                                Service Specification must be checked as <b>Bundle</b> in order to assign Service Specification Relationships (See Main Properties Tab).
                                            </div>
                                            <div  *ngIf="editForm.controls.isBundle.value">
                                                <div class="filter-container row align-items-center justify-content-between">
                                                    <div class="col-md-10">{{spec.serviceSpecRelationship.length}} related Service Specification(s) assigned</div>
                                                      
                                                    <div class="col-md-2 my-md-0 my-2">
                                                        <button type="button" class="btn btn-success btn-sm btn-block"
                                                            (click)="openAssignServiceSpecRelationshipDialog()"><i
                                                                class="fas fa-cart-arrow-down mr-2"></i>Assign</button>
                                                    </div>
                                                </div>

                                                <div class="row mt-3" >
                                                    <mat-form-field *ngIf="spec?.serviceSpecRelationship.length > 0"
                                                        class="col-12">
                                                        <mat-label>Apply Filter to related Service Specifications...
                                                        </mat-label>
                                                        <input matInput [formControl]="relatedServiceSpecsFilterCtrl">
                                                    </mat-form-field>
                                                </div>
    
                                                <div *ngFor="let relatedSpec of filteredRelatedServiceSpecs$ | async"
                                                    class="spec-relationship-container pb-2" [@fadeIn]>
                                                    <a routerLink="/services/service_spec_update/{{relatedSpec.id}}">{{relatedSpec.name}}</a>
                                                    <!-- <div><b>{{relatedSpec.name}}</b></div> -->
                                                    <a routerLink='/{{appService.portalDomain}}/service_spec_update/{{relatedSpec.id}}'>
                                                        <button class="btn btn-warning btn-sm"><i class="far fa-edit"></i></button>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-footer"></div>

                                    </div>
                                </div>
                                <!-- END OF Service Specification Relationships Tab -->

                                <!-- Resource Specification Relationships Tab -->
                                <div class="tab-pane active"
                                    *ngIf="activeListItem === 'Resource Specification Relationships'" role="tabpanel"
                                    [@fadeIn]>
                                    <div class="card mat-elevation-z1 bg-light">
                                        <div class="card-body">
                                            <div class="filter-container row align-items-center justify-content-between">
                                                <div class="col-md-10">{{spec.resourceSpecification.length}} related Resource Specification(s) assigned</div>
                                                  
                                                <div class="col-md-2 my-md-0 my-2">
                                                    <button type="button" class="btn btn-success btn-sm btn-block"
                                                        (click)="openAssignResourceSpecRelationshipDialog()"><i
                                                            class="fas fa-cart-arrow-down mr-2"></i>Assign</button>
                                                </div>
                                            </div>

                                            <div class="row mt-3">
                                                <mat-form-field *ngIf="spec?.resourceSpecification.length > 0"
                                                    class="col-12">
                                                    <mat-label>Apply Filter to related Resource Specifications...
                                                    </mat-label>
                                                    <input matInput [formControl]="relatedResourceSpecsFilterCtrl">
                                                </mat-form-field>
                                            </div>

                                            <div *ngFor="let relatedSpec of filteredRelatedResourceSpecs$ | async"
                                                class="spec-relationship-container pb-2" [@fadeIn]>
                                                <a routerLink="/resources/resource_spec_update/{{relatedSpec.id}}">{{relatedSpec.name}}</a>
                                                <!-- <div><b>{{relatedSpec.name}}</b></div> -->
                                                <a routerLink='/resources/resource_spec_update/{{relatedSpec.id}}'>
                                                    <button class="btn btn-warning btn-sm"><i class="far fa-edit"></i></button>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="card-footer"></div>
                                    </div>
                                </div>
                                <!-- END OF Resource Specification Relationships Tab -->

                                <!-- Related Parties Tab -->
                                <div class="tab-pane active" *ngIf="activeListItem === 'Related Parties'"
                                    role="tabpanel" [@fadeIn]>
                                    <div class="card mat-elevation-z1 bg-light">
                                        <div class="card-body">
                                            <div *ngIf="spec?.relatedParty.length === 0">
                                                There are not any related parties assigned
                                            </div>

                                            <div *ngIf="spec?.relatedParty.length > 0">
                                                <h6>Username (Role)</h6>
                                                <p class="mb-2" *ngFor="let relatedParty of spec?.relatedParty">{{relatedParty.name}} ({{relatedParty.role}})</p>
                                            </div>
                                        </div>
                                        <div class="card-footer"></div>

                                    </div>
                                </div>
                                <!-- END OF Related Parties Tab -->

                                <!-- Service Specification Characteristics Tab -->
                                <div class="tab-pane active"
                                    *ngIf="activeListItem === 'Service Specification Characteristics'" role="tabpanel"
                                    [@fadeIn]>
                                    <div class="card mat-elevation-z1 bg-light">
                                        <div class="card-body">
                                            <div
                                                class="filter-container row align-items-center justify-content-center">
                                                <mat-form-field appearance=""
                                                    class="white-background col-xl-9 col-lg-8">
                                                    <mat-label>Apply Filter...</mat-label>
                                                    <input matInput
                                                        (keyup)="applySpecCharFilter($event.target.value)">
                                                </mat-form-field>

                                                <div class="text-lg-right col-xl-3 col-lg-4 mb-3 mb-lg-0">
                                                    <button type="button" class="btn btn-success btn-sm"
                                                        (click)="openCharacteristicDesignDialog(null)">
                                                        <i class="fas fa-plus-circle mr-2"></i>Create New
                                                        Characteristic
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <mat-chip-list>
                                                    <mat-chip *ngFor="let tag of specCharacteristicsTags"
                                                        [selected]="tag === tagFiltervalue"
                                                        (click)="filterCharacteristicsByTag(tag)">{{tag}}</mat-chip>
                                                </mat-chip-list>
                                            </div>

                                            <div class="table-responsive">
                                                <table mat-table [dataSource]="dataSource" matSort #specSort="matSort"
                                                    matSortActive="name" matSortDirection="asc" matSortDisableClear
                                                    class="table table-generic">
                                                    <ng-container matColumnDef="name">
                                                        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name
                                                        </th>
                                                        <td mat-cell *matCellDef="let element"
                                                            matTooltipClass="universal-tooltip"
                                                            [matTooltip]="element.description"
                                                            matTooltipPosition="above">
                                                            <b>{{element.name}}</b> </td>
                                                    </ng-container>

                                                    <ng-container matColumnDef="type">
                                                        <th mat-header-cell *matHeaderCellDef mat-sort-header> Value
                                                            Type </th>
                                                        <td mat-cell *matCellDef="let element">
                                                            {{element.valueType}} </td>
                                                    </ng-container>

                                                    <ng-container matColumnDef="defaultValues">
                                                        <th mat-header-cell *matHeaderCellDef mat-sort-header>
                                                            Default Values </th>
                                                        <td mat-cell *matCellDef="let element">
                                                            <span
                                                                *ngFor="let val of element.serviceSpecCharacteristicValue; let last = last"
                                                                [class.hidden]="!val || !val.isDefault">
                                                                <span
                                                                    *ngIf="val && val.isDefault">{{val.value.value}}
                                                                    <span
                                                                        *ngIf="val.value.alias">({{val.value.alias}})</span>
                                                                    <!-- <span class="comma-separator">, </span> -->
                                                                </span>
                                                                <br>
                                                                <div *ngIf="last" class="value-measureUnits">
                                                                    {{val.unitOfMeasure}}</div>

                                                            </span>
                                                        </td>
                                                    </ng-container>

                                                    <ng-container matColumnDef="configurable">
                                                        <th mat-header-cell *matHeaderCellDef mat-sort-header>
                                                            Configurable </th>
                                                        <td mat-cell *matCellDef="let element">
                                                            {{element.configurable}} </td>
                                                    </ng-container>

                                                    <ng-container matColumnDef="actions">
                                                        <th mat-header-cell *matHeaderCellDef>Actions</th>
                                                        <td mat-cell *matCellDef="let element">
                                                            <div class="d-flex">
                                                                <button class="btn btn-warning btn-sm mr-1"
                                                                    (click)="openCharacteristicDesignDialog(element)"><i
                                                                        class="far fa-edit"></i></button>
                                                                <button class="btn btn-primary btn-sm mr-1"
                                                                    (click)="cloneServiceSpecCharacteristic(element)"><i
                                                                        class="far fa-copy"></i></button>
                                                                <button class="btn btn-danger btn-sm"
                                                                    (click)="openCharacteristicDeleteDialog(element)"><i
                                                                        class="far fa-trash-alt"></i></button>
                                                            </div>
                                                        </td>
                                                    </ng-container>

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

                                                <!-- <mat-paginator [pageSizeOptions]="[10, 20, 50]" showFirstLastButtons>
                                                </mat-paginator> -->
                                            </div>
                                        </div>
                                        <div class="card-footer"></div>
                                    </div>
                                </div>
                                <!-- END OF Service Specification Characteristics Tab -->


                                <!-- Logo Tab -->
                                <div class="tab-pane active" *ngIf="activeListItem === 'Logo'" role="tabpanel"
                                    [@fadeIn]>
                                    <div class="card mat-elevation-z1 bg-light">
                                        <div class="card-body space-between">
                                            <div class="row justify-content-center align-items-center">
                                                <div class="col-lg-4 col-md-12 mb-2 mb-lg-0">
                                                    <div *ngIf="!specLogoRef" class=" text-center">
                                                        There is not an assigned logo for this specification
                                                    </div>

                                                    <div *ngIf="specLogoRef"
                                                        class="d-flex flex-column justify-content-center align-items-center">
                                                        <div class="text-center p-2 font-weight-normal shadowed">Current
                                                            Logo Preview</div>

                                                        <div [@fadeIn] class="logo-preview-container mat-elevation-z3">
                                                            <img [src]="currentSpecLogoAsDataUrl"
                                                                alt="Current Logo Preview">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-lg-4 col-md-6 mb-2 mb-lg-0">
                                                    <file-upload [control]="logoImageCtrl" multiple="false">
                                                    </file-upload>
                                                    <mat-hint *ngIf="!logoImageCtrl.invalid">Supported file types:
                                                        image/* (150 x 150 px)</mat-hint>
                                                    <mat-error *ngIf="logoImageCtrl.invalid">Supported file types:
                                                        image/* (150 x 150 px)</mat-error>
                                                </div>
                                                <div
                                                    class="col-lg-4 col-md-6 d-flex justify-content-center align-items-center">
                                                    <div *ngIf="logoImageCtrl.value.length === 0" [@fadeIn]>New Logo
                                                        Preview</div>
                                                    <div *ngIf="logoImageCtrl.value.length && logoImageCtrl.valid"
                                                        [@fadeIn] class="logo-preview-container mat-elevation-z3">
                                                        <img *ngIf="!dataUrlConverting" [src]="specLogoAsDataUrl"
                                                            alt="New Logo Preview" class="">
                                                        <mat-progress-spinner *ngIf="dataUrlConverting" color="primary"
                                                            mode="indeterminate" diameter="50">
                                                        </mat-progress-spinner>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="container-fluid mt-3">
                                                <div class="row justify-content-end">
                                                    <button class="btn btn-secondary mr-2" (click)="clearLogoList()"><i
                                                            class="fas fa-times mr-2"></i>Clear</button>
                                                    <button type="submit" class="btn btn-primary"
                                                        (click)="submitLogo()"><i
                                                            class="fas fa-upload mr-2"></i>Upload</button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-footer"></div>

                                    </div>
                                </div>
                                <!-- END OF Logo Tab -->

                                <!-- Attachments Tab -->
                                <div class="tab-pane active" *ngIf="activeListItem === 'Attachments'" role="tabpanel"
                                    [@fadeIn]>
                                    <div class="card mat-elevation-z1 bg-light">
                                        <div class="card-body space-between">
                                            <div *ngIf="spec?.attachment.length === 0" class="mb-3 text-center">
                                                There are not any attachments assigned yet
                                            </div>

                                            <div *ngIf="spec?.attachment.length > 0" class="mb-3 row">
                                                <div *ngFor="let attachmentRef of spec.attachment"
                                                    class="my-1 col-md-6 d-flex align-items-center justify-content-between">
                                                    <a target="_blank"
                                                        href="{{specServiceRootUrl}}{{attachmentRef.url}}">
                                                        <i class="far fa-file mr-1"></i> {{attachmentRef.name}}
                                                    </a>
                                                    <button class="file-icon btn btn-sm btn-danger ml-2"
                                                        (click)="openAttachmentDeleteDialog(attachmentRef)"><i
                                                            class="far fa-trash-alt"></i>
                                                    </button>
                                                </div>
                                            </div>

                                            <file-upload [control]="attachmentFilesCtrl" multiple="false">
                                            </file-upload>
                                            <mat-hint *ngIf="!attachmentFilesCtrl.invalid" class="ml-1">Supported file
                                                types: .jpg, .png, .pdf, .zip, .yaml, .json,
                                                .xml, .txt, .tar.gz</mat-hint>
                                            <mat-error *ngIf="attachmentFilesCtrl.invalid" class="ml-1">Supported file
                                                types: .jpg, .png, .pdf, .zip, .yaml, .json,
                                                .xml, .txt, .tar.gz</mat-error>

                                            <div class="container-fluid mt-3">
                                                <div class="row justify-content-end">
                                                    <button class="btn btn-secondary mr-2"
                                                        (click)="clearAttachmentsList()"><i
                                                            class="fas fa-times mr-2"></i>Clear</button>
                                                    <button type="submit" class="btn btn-primary"
                                                        (click)="submitAttachments()"><i
                                                            class="fas fa-upload mr-2"></i>Upload</button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-footer"></div>
                                    </div>
                                </div>
                                <!-- END OF Attachments Tab -->


                                <!-- LCM Tab -->
                                <div class="tab-pane active" *ngIf="activeListItem === 'Life Cycle Rules'" role="tabpanel"
                                    [@fadeIn]>
                                    <div class="card mat-elevation-z1 bg-light">
                                        <div class="card-body">
                                            <div class="filter-container row align-items-center justify-content-center">
                                                <mat-form-field appearance=""
                                                    class="white-background col-xl-8 col-lg-6">
                                                    <mat-label>Apply Filter...</mat-label>
                                                    <input matInput
                                                        (keyup)="applyLCMRuleFilter($event.target.value)">
                                                </mat-form-field>

                                                <div class="text-lg-right col-xl-4 col-lg-6 mb-3 mb-lg-0">
                                                    <button type="button" class="btn btn-primary btn-sm mr-3" (click)="openImportLCMruleDialog()">
                                                        <i class="fas fa-file-import mr-2" ></i>Import a rule
                                                    </button>

                                                    <button type="button" class="btn btn-success btn-sm "
                                                    routerLink='/{{appService.portalDomain}}/service_rule_design/'
                                                    [queryParams]="{specid: spec?.id }" >
                                                        <i class="fas fa-plus-circle mr-2"></i>Create new rule
                                                    </button>
                                                </div>
                                            
                                            </div>
                                            <div class="mb-3">
                                                <mat-chip-list>
                                                    <mat-chip [selected]="'All' === lcmRulesTagValue" (click)="filterCMRuleByTag('All')">All</mat-chip>
                                                    <mat-chip *ngFor="let tag of lcmRulesTags"
                                                        [selected]="tag === lcmRulesTagValue"
                                                        (click)="filterCMRuleByTag(tag)">{{tag}} phase</mat-chip>
                                                </mat-chip-list>
                                            </div>

                                            <div class="table-responsive">
                                                <table mat-table [dataSource]="dataSourceLCMRules" matSort #specSort="matSort"
                                                    matSortActive="name" matSortDirection="asc" matSortDisableClear
                                                    class="table table-generic">
                                                    <ng-container matColumnDef="name">
                                                        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name
                                                        </th>
                                                        <td mat-cell *matCellDef="let element"
                                                            matTooltipClass="universal-tooltip"
                                                            [matTooltip]="element.description"
                                                            matTooltipPosition="above">
                                                            <b>{{element.name}}</b> </td>
                                                    </ng-container>

                                                    <ng-container matColumnDef="lcmrulephase">
                                                        <th mat-header-cell *matHeaderCellDef mat-sort-header> Phase </th>
                                                        <td mat-cell *matCellDef="let element">
                                                            {{element.lcmrulephase}} </td>
                                                    </ng-container>

                                                    <ng-container matColumnDef="description">
                                                        <th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
                                                        <td mat-cell *matCellDef="let element">
                                                            {{element.description}} </td>
                                                    </ng-container>

                                                    <ng-container matColumnDef="priority">
                                                        <th mat-header-cell *matHeaderCellDef mat-sort-header> Priority </th>
                                                        <td mat-cell *matCellDef="let element">
                                                            {{element.priority}} </td>
                                                    </ng-container>
                                                   

                                                    <ng-container matColumnDef="actions">
                                                        <th mat-header-cell *matHeaderCellDef>Actions</th>
                                                        <td mat-cell *matCellDef="let element">
                                                            <div class="d-flex">
                                                                <button class="btn btn-warning btn-sm mr-1"
                                                                routerLink='/{{appService.portalDomain}}/service_rule_design/{{element.id}}'
                                                                [queryParams]="{specid: spec?.id }">
                                                                <i class="far fa-edit"></i></button>
                                                                <button class="btn btn-danger btn-sm"
                                                                    (click)="openLCMRuleDeleteDialog(element)"><i
                                                                        class="far fa-trash-alt"></i></button>
                                                            </div>
                                                        </td>
                                                    </ng-container>

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

                                                <!-- <mat-paginator [pageSizeOptions]="[10, 20, 50]" showFirstLastButtons>
                                                </mat-paginator> -->
                                            </div>








                                         </div>   
                                        <div class="card-footer"></div>
                                </div>
                                <!-- END OF LCM Tab -->

                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer"></div>
            </div>
        </div>
    </div>
</div>