<div id="stats" class="uk-container">
    <div class="menubar ">
        <div class="page-title uk-article-title">Statistics</div>
    </div>

    <div class="content-wrapper">
        <div>
            <div class="contentPanel">
                <div *ngIf="errorMessage" class="uk-alert-danger uk-alert">{{ errorMessage }}</div>
                <div *ngIf="loadingMessage" class="loading-big">
                    <div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">{{ loadingMessage }}</div>
                    <div class="whiteFilm"></div>
                </div>

                <div class="page-controls">
                    <div class="filters">
                        <div class="show-options uk-float-right">
                            <button class="uk-button" type="button"> Bulk Actions</button>
                            <div uk-dropdown="mode: click">
                                <ul class="uk-nav uk-dropdown-nav">
                                    <li><a><i></i> Activate </a></li>
                                    <li><a><i></i> Deactivate </a></li>
                                    <li><a><i></i> Delete </a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div>
                    <div>
                        <div class="row users-list">
                            <div class="col-md-12">
                                <div class="filters marginBottom20">
                                    <div class="links form-group form-inline">
                                        <span>Filter by community:</span>
                                        <select class="uk-select uk-width-medium" #selectPid (change)="getStatsOfCommunity(selectPid.value)">
                                            <option *ngFor="let community of communities" value="{{ community.pid }}">{{ community.name }} </option>
                                        </select>
                                    </div>
                                </div>
                                <table class="uk-table uk-table-striped">
                                    <thead>
                                    <tr>
<!--                                        <th><input id="allPageCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th>-->
                                        <th>Name</th>
                                        <th>Show in statistics page</th>
                                        <th>Show in dashboard</th>
                                    </tr>
                                    </thead>
                                    <tbody *ngIf="stats">
                                    <tr *ngFor="let name of tableNames">
                                        <!--<td><input id="{{check.page._id}}" class="checkBox" type="checkbox"
                                                   name="pagescb[]" value="{{check.page._id}}" [(ngModel)]="check.checked">
                                        </td>-->
                                        <td>
                                            <div class="name">{{ name }}</div>
                                        </td>
                                        <td>
                                            <div *ngIf="stats.statistics[name].show" class="activated" >
                                                <input (click)="toggleShow(name)" class="deactivate" src="imgs/check-icon.png" title="Disable" width="20" type="image" height="20">
                                            </div>
                                            <div *ngIf="!stats.statistics[name].show" class="deactivated" >
                                                <input (click)="toggleShow(name)" class="deactivate" src="imgs/x-icon.png" title="Enable" width="20" type="image" height="20">
                                            </div>
                                        </td>
                                        <td>
                                            <div *ngIf="stats.statistics[name].showInDashboard" class="activated" >
                                                <input (click)="toggleShowInDashboard(name)" class="deactivate" src="imgs/check-icon.png" title="Disable" width="20" type="image" height="20">
                                            </div>
                                            <div *ngIf="!stats.statistics[name].showInDashboard" class="deactivated" >
                                                <input (click)="toggleShowInDashboard(name)" class="deactivate" src="imgs/x-icon.png" title="Enable" width="20" type="image" height="20">
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
<!--                                <div *ngIf="checkboxes.length==0" class="col-md-12">
                                    <div class="uk-alert-warning" uk-alert>No pages found</div>
                                </div>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
