<ng-container>
    <div class="header-bar">
        <h2>Technologies &gt; {{title}}</h2>
        <div class="search-and-create">
            <div class="search-and-create"  *ngIf="true">
                <wu-search [(searchValue)]="searchText" (searchValueChange)="updateSearch()"></wu-search>
            </div>
        </div>
    </div>

    <wu-table-panel
            [title]="'Message Driven Beans'"
            [items]="ejbMessageDriven"
            (clearFilter)="clearSearch()"
            [filter]="filterCallback"
            [loading]="loadingMDB"
            [tableHeaders]="[
                { title: 'MDB Name', isSortable: true, sortBy: 'name' },
                { title: 'Class', isSortable: true, sortBy: 'class'},
                { title: 'JMS Destination', isSortable: true, sortBy: 'location'}
            ]"
            [rowTemplate]="rowTemplateMdb"
    >
        <ng-template #rowTemplateMdb let-mdb>
            <tr>
                <td class="col-md-4">{{mdb.name}}</td>
                <td class="col-md-6"><a [routerLink]="['../source/' + mdb.sourceVertexId]">{{mdb.class}}</a></td>
                <td class="col-md-2">{{mdb.location}}</td>
            </tr>
        </ng-template>
    </wu-table-panel>

    <!-- L&F "static report" -->
    <!--            <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">Message Driven Beans</h3>
                    </div>
                    <table class="table table-striped table-bordered" id="mdbTable">
                        <thead wu-sortable-table [tableHeaders]="[
                                    { title: 'MDB Name', isSortable: true, sortBy: 'beanName' },
                                    { title: 'Class', isSortable: false, sortBy: 'ejbClass?.qualifiedName'},
                                    { title: 'JMS Destination', isSortable: false, sortBy: '' }
                                ]">
                        <tr>
                            <th class="col-md-2">MDB Name</th>
                            <th>Class</th>
                            <th class="col-md-3">JMS Destination</th>
                        </tr>
                        </thead>
                        <tr *ngFor="let value of this.filteredEjbMessageDriven">
                            <td>{{value?.beanName}}</td>
                            <td><a [routerLink]="['../source/' + ((value?.ejbClass | async)?.decompiledSource | async)?.vertexId]">{{(value?.ejbClass | async)?.qualifiedName}}</a></td>
                            <td>{{(value?.destination | async)?.jndiLocation}}</td>
                        </tr>
                    </table>
                </div>-->

    <!-- L&F "issues report" but with a full width table -->
    <!--            <div class="panel panel-primary wuTechnologies">
                    <div class="panel-heading">
                        <h3 class="panel-title">Message Driven Beans</h3>
                    </div>
                    <table class="table table-striped table-bordered" id="mdbTable">
                        <thead wu-sortable-table [tableHeaders]="[
                                    { title: 'MDB Name', isSortable: true, sortBy: 'beanName' },
                                    { title: 'Class', isSortable: false, sortBy: 'ejbClass?.qualifiedName'},
                                    { title: 'JMS Destination', isSortable: false, sortBy: '' }
                                ]">
                        </thead>
                        <tr *ngFor="let value of this.filteredEjbMessageDriven">
                            <td>{{value?.beanName}}</td>
                            <td><a [routerLink]="['../source/' + ((value?.ejbClass | async)?.decompiledSource | async)?.vertexId]">{{(value?.ejbClass | async)?.qualifiedName}}</a></td>
                            <td>{{(value?.destination | async)?.jndiLocation}}</td>
                        </tr>
                    </table>
                </div>-->

    <ng-container *ngFor="let data of [{
            title: 'Stateless Session Beans',
            items: ejbSessionStatelessBean,
            loading: loadingEJBStateless
        }, {
            title: 'Stateful Session Beans',
            items: ejbSessionStatefulBean,
            loading: loadingEJBStateful
        },
        {
            title: 'Entity Beans',
            items: ejbEntityBean,
            loading: loadingEntity
        }
        ]">
        <wu-table-panel
                [title]="data.title"
                [items]="data.items"
                (clearFilter)="clearSearch()"
                [filter]="filterCallback"
                [loading]="data.loading"
                [tableHeaders]="[
                { title: 'Bean Name', isSortable: true, sortBy: 'name' },
                { title: 'Interface', isSortable: true, sortBy: 'interface'},
                { title: 'Implementation', isSortable: true, sortBy: 'class'},
                { title: 'JNDI Location', isSortable: true, sortBy: 'location'}
            ]"
                [rowTemplate]="rowTemplateEjbBean"
        >
            <ng-template #rowTemplateEjbBean let-value>
                <tr>
                    <td class="col-md-2">{{value.name}}</td>
                    <td class="col-md-2">{{value.interface}}</td>
                    <td class="col-md-6"><a [routerLink]="['../source/' + value.sourceVertexId]">{{value.class}}</a></td>
                    <td class="col-md-2">{{value.location}}</td>
                </tr>
            </ng-template>
        </wu-table-panel>
    </ng-container>
</ng-container>
