<div>
    <div class="table-responsive" style="width:100%; overflow: auto; overflow-y: scroll">
        <table class="table table-hover" [mfData]="resources" #mf="mfDataTable" [mfRowsOnPage]="10">
            <thead>
            <tr>
                <th>
          <span>
          {{ getResourceTypeSingularDisplayName(resourceType) }}
          </span>
                    <span class="clickable inline-glyph glyphicon glyphicon-plus-sign btn btn-xs pull-right"
                          *ngIf="resourceType === 'Provider Configurations'"
                          (click)="newProviderConfigModal.open()"
                          title="Create New Provider Configuration"
                          data-toggle="tooltip"></span>
                    <span class="clickable inline-glyph glyphicon glyphicon-plus-sign btn btn-xs pull-right"
                          (click)="isAddingService=true"
                          *ngIf="resourceType === 'Descriptors'"
                          (click)="newDescriptorModal.open()"
                          title="Create New Descriptor"
                          data-toggle="tooltip"></span>
                    <span class="clickable inline-glyph glyphicon glyphicon-plus-sign btn btn-xs pull-right"
                          *ngIf="resourceType === 'Service Definitions'"
                          (click)="newServiceDefinitionModal.open()"
                          title="Create New Service Definition"
                          data-toggle="tooltip"></span>
                </th>
                <th *ngIf="resourceType === 'Topologies'">Timestamp</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let resource of mf.data"
                [class.selected]="resource === selectedResource"
                [class.active]="isSelectedResource(resource)"
                (click)="onSelect(resource)"
                class="clickable">
                <td>{{resourceService.getResourceDisplayName(resource)}}</td>
                <td *ngIf="resourceType === 'Topologies'">{{resource.timestamp | date:'medium'}}</td>
            </tr>
            </tbody>
		    <tfoot>
		    <tr>
		        <td colspan="4">
		            <mfBootstrapPaginator [rowsOnPageSet]="[5,10,15]"></mfBootstrapPaginator>
		        </td>
		    </tr>
		    </tfoot>
        </table>
    </div>
    <div>
        <app-new-desc-wizard #newDescriptorModal></app-new-desc-wizard>
        <app-provider-config-wizard #newProviderConfigModal></app-provider-config-wizard>
        <app-service-definition-wizard #newServiceDefinitionModal></app-service-definition-wizard>
    </div>
</div>
