<div>
    <h2>
        <span jhiTranslate="arcadeanalyticsApp.widget.home.subtitle">Widgets</span>
        <button class="btn btn-primary pull-right jh-create-entity create-widget" [routerLink]="['/', { outlets: { popup: ['widget-new'] } }]">
            <span class="fa fa-plus fa-fw"></span>
            <span class="hidden-sm-down"  jhiTranslate="arcadeanalyticsApp.widget.home.createLabel">
            Create new Widget
            </span>
        </button>
    </h2>
    <jhi-alert></jhi-alert>
    <div class="row">
        <div class="col-sm-12">
            <form name="searchForm" class="form-inline">
                <div class="input-group w-100 mt-3">
                    <input id="searchInput" type="text" class="form-control" [(ngModel)]="currentSearch" name="currentSearch"
                           (keydown)="handleSearchOnKeydown($event)"
                           placeholder="{{ 'arcadeanalyticsApp.widget.home.search' | translate }}">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" (click)="search(currentSearch)"><span class="fa fa-search"></span></button>
                        <button class="btn btn-default" type="button" (click)="clear()" title="Clear"><span class="fa fa-trash"></span></button>
                    </span>
                </div>
            </form>
        </div>
    </div>
    <div class="table-responsive" *ngIf="widgets">
        <table class="table table-striped">
            <thead>
            <tr jhiSort [(predicate)]="predicate" [(ascending)]="reverse" [callback]="transition.bind(this)">
            <th jhiSortBy="id"><span jhiTranslate="global.field.id">ID</span> <span class="fa fa-sort fa-fw"></span></th>
            <th jhiSortBy="name"><span jhiTranslate="arcadeanalyticsApp.widget.name">Name</span> <span class="fa fa-sort fa-fw"></span></th>
            <th jhiSortBy="type"><span jhiTranslate="arcadeanalyticsApp.widget.type">Type</span> <span class="fa fa-sort fa-fw"></span></th>
            <th jhiSortBy="hasSnapshot"><span jhiTranslate="arcadeanalyticsApp.widget.hasSnapshot">Has Snapshot</span> <span class="fa fa-sort fa-fw"></span></th>
            <th jhiSortBy="dataSetId"><span jhiTranslate="arcadeanalyticsApp.widget.dataSet">Data Set</span> <span class="fa fa-sort fa-fw"></span></th>
            <th jhiSortBy="dataSourceId"><span jhiTranslate="arcadeanalyticsApp.widget.dataSource">Data Source</span> <span class="fa fa-sort fa-fw"></span></th>
            <th jhiSortBy="dashboardName"><span jhiTranslate="arcadeanalyticsApp.widget.dashboard">Dashboard</span> <span class="fa fa-sort fa-fw"></span></th>
            <th></th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let widget of widgets ;trackBy: trackId">
                <td><a [routerLink]="['../widget', widget.id ]">{{widget.id}}</a></td>
                <td>{{widget.name}}</td>
                <td>{{widget.type}}</td>
                <td>{{widget.hasSnapshot}}</td>
                <td>
                    <div *ngIf="widget.dataSetId">
                        <a [routerLink]="['../data-set', widget.dataSetId  ]" >{{widget.dataSetId}}</a>
                    </div>
                </td>
                <td>
                    <div *ngIf="widget.dataSourceId">
                        <a [routerLink]="['../data-source', widget.dataSourceId  ]" >{{widget.dataSourceId}}</a>
                    </div>
                </td>
                <td>
                    <div *ngIf="widget.dashboardId">
                        <a [routerLink]="['../dashboard', widget.dashboardId  ]" >{{widget.dashboardName}}</a>
                    </div>
                </td>
                <td class="text-right">
                    <div class="btn-group flex-btn-group-container">
                        <button type="submit"
                                [routerLink]="['../widget', widget.id ]"
                                class="btn btn-info btn-sm">
                            <span class="fa fa-eye"></span>
                            <span class="d-none d-md-inline" jhiTranslate="entity.action.view">View</span>
                        </button>
                        <button type="submit"
                                [routerLink]="['/', { outlets: { popup: 'widget/'+ widget.id + '/edit'} }]"
                                [queryParams]="{ id: widget.id }"
                                replaceUrl="true"
                                class="btn btn-primary btn-sm">
                            <span class="fa fa-pencil fa-fw"></span>
                            <span class="d-none d-md-inline" jhiTranslate="entity.action.edit">Edit</span>
                        </button>
                        <button type="submit"
                                [routerLink]="['/', { outlets: { popup: 'widget/'+ widget.id + '/delete'} }]"
                                [queryParams]="{ id: widget.id }"
                                replaceUrl="true"
                                class="btn btn-danger btn-sm">
                            <span class="fa fa-remove fa-fw"></span>
                            <span class="d-none d-md-inline" jhiTranslate="entity.action.delete">Delete</span>
                        </button>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <div *ngIf="widgets">
        <br>
        <br>
        <div class="row">
            <div class="col-lg-5 col-centered">
                <pagination [boundaryLinks]="true" [totalItems]="totalItems" [(ngModel)]="page" [rotate]="false" [maxSize]="7" [itemsPerPage]="itemsPerPage"
                            (pageChanged)="loadPage($event)" previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;"></pagination>
            </div>
        </div>
    </div>
    <br>
    <br>
    <br>
</div>
