<!--
  Licensed to the Apache Software
	Foundation (ASF) under one or more contributor license agreements. See the
	NOTICE file distributed with this work for additional information regarding
	copyright ownership. The ASF licenses this file to You under the Apache License,
	Version 2.0 (the "License"); you may not use this file except in compliance
	with the License. You may obtain a copy of the License at
  http://www.apache.org/licenses/LICENSE-2.0
  Unless required by applicable law or agreed to in writing, software distributed
	under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES
	OR CONDITIONS OF ANY KIND, either express or implied. See the License for
  the specific language governing permissions and limitations under the License.
  -->
<div class="container-fluid px-0">
    <app-modal-loading-indicator [show]="!!pendingSearch"></app-modal-loading-indicator>
    <div class="mrow">
        <div class="col-md-12 px-0">
            <div >
                <div class="input-group flex-nowrap search">
                    <span class="input-group-prepend">
                        <button class="btn btn-secondary btn-saved-searches" type="button" (click)="showSavedSearches()">Searches</button>
                    </span>
                    <div appAceEditor *ngIf="!isQueryBuilderModeManual()" class="flex-fill" placeholder="Search Alerts" [text]="queryBuilder.displayQuery" (textChanged)="onSearch($event)"> </div>
                    <div class="flex-fill" *ngIf="isQueryBuilderModeManual()">
                        <input #manualQuery type="text"
                            class="manual-query-input"
                            [value]="queryBuilder.getManualQuery()"
                            data-qe-id="manual-query-input">
                    </div>
                    <span class="input-group-append">
                        <button class="btn btn-secondary btn-options" (click)="toggleQueryBuilderMode()">
                            <span *ngIf="isQueryBuilderModeManual()">Use Query Builder</span>
                            <span *ngIf="!isQueryBuilderModeManual()">Use Manual Query</span>
                        </button>
                    </span>
                    <span class="input-group-append">
                        <button class="btn btn-secondary btn-search-clear" type="button" (click)="onClear()"></button>
                    </span>
                    <span class="input-group-append" style="white-space: nowrap;" [class.d-none]="isQueryBuilderModeManual()">
                        <app-time-range class="d-flex position-relative" (timeRangeChange)="onTimeRangeChange($event)" [disabled]="timeStampFilterPresent" [selectedTimeRange]="selectedTimeRange"> </app-time-range>
                    </span>
                    <span class="input-group-append" [class.d-none]="isQueryBuilderModeManual()">
                        <button data-qe-id="alert-search-btn" class="btn btn-secondary btn-search rounded-right" type="button" data-name="search" (click)="onSearch(alertSearchDirective.getSeacrhText())"></button>
                    </span>
                    <span class="input-group-append" [class.d-none]="!isQueryBuilderModeManual()">
                        <button class="btn btn-secondary btn-search rounded-right" type="button" data-name="search" (click)="search(false, null)"></button>
                    </span>
                    <div class="input-group-append">
                        <span class="save-button" (click)="showSaveSearch()">
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mrow">
        <div class="col-md-9 px-0">
            <span class="col-form-label-lg">Alerts ({{searchResponse.total}}) </span>
            <div *ngIf="subgroupTotal" data-qe-id="alert-subgroup-total">Alerts in Groups ({{subgroupTotal}})</div>
        </div>
        <div class="col-md-3 px-0">
            <div class="pull-right" style="position: relative; display: block;">
                <div class="btn cog">
                    <i class="fa fa-cog configure-table-icon" (click)="showConfigureTable()"></i>
                </div>
                <div #settingsIcon class="btn settings">
                    <i class="fa fa-sliders" aria-hidden="true"></i>
                </div>
                <app-configure-rows
                    [srcElement]="settingsIcon"
                    [refreshInterval]="autoPollingSvc.getInterval()"
                    [pageSize]="tableMetaData.size"
                    (configRowsChange)="onConfigRowsChange($event)"
                    ></app-configure-rows>

                <app-auto-polling #autoPolling></app-auto-polling>

                <div id="table-actions" class="dropdown d-inline-block">
                    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ACTIONS</button>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
                        <span class="dropdown-item" [class.disabled]="selectedAlerts.length == 0" (click)="processOpen($event)">Open</span>
                        <span class="dropdown-item" [class.disabled]="selectedAlerts.length == 0" (click)="processDismiss($event)">Dismiss</span>
                        <span class="dropdown-item" [class.disabled]="selectedAlerts.length == 0" (click)="processEscalate($event)">Escalate</span>
                        <span class="dropdown-item" [class.disabled]="selectedAlerts.length == 0" (click)="processResolve($event)">Resolve</span>
                        <span class="dropdown-item" [class.disabled]="selectedAlerts.length == 0 || isMetaAlertPresentInSelectedAlerts" (click)="processAddToAlert($event)">Add to Alert</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid no-gutters">
    <div class="row">
      <div class="px-0" style="width: 200px;max-width: 200px;" [class.d-none]="isQueryBuilderModeManual()">
        <app-alert-filters [facets]="searchResponse.facetCounts" (facetFilterChange)="onAddFacetFilter($event)"> </app-alert-filters>
      </div>
      <div class="col px-0 pl-4" style="overflow: auto;">
        <div class="alert alert-warning" role="alert"
            *ngIf="staleDataState"
            [innerHTML]="getStaleDataWarning()"
            data-qe-id="staleDataWarning"
            ></div>
        <div class="alert alert-warning" role="alert"
            *ngIf="autoPollingSvc.getIsCongestion()"
            [innerHTML]="getPollingCongestionWarning()"
            data-qe-id="pollingCongestionWarning"
            ></div>
        <div class="col-xs-12 pl-0 pb-3">
          <app-group-by [facets]="groupFacets" (groupsChange)="onGroupsChange($event)"> </app-group-by>
        </div>
        <div class="col-xs-12 px-0">
            <app-table-view #dataViewComponent
                            [alerts]="alerts" *ngIf="groups.length === 0"
                            [pagination]="pagination"
                            [alertsColumnsToDisplay]="alertsColumnsToDisplay"
                            [selectedAlerts]="selectedAlerts"
                            (onResize)="onResize()"
                            (onAddFilter)="onAddFilter($event)"
                            (onShowDetails)="showDetails($event)"
                            (onSelectedAlertsChange)="onSelectedAlertsChange($event)"
                            (onSortChanged)="onSortChanged($event)"
                            (onPageChanged)="onPageChanged($event)"></app-table-view>
            <app-tree-view #dataViewComponent *ngIf="groups.length !== 0"
                           [alerts]="alerts"
                           [alertsColumnsToDisplay]="alertsColumnsToDisplay"
                           [selectedAlerts]="selectedAlerts"
                           [globalConfig]="globalConfig"
                           [query]="queryForTreeView()"
                           [groups]="groups"
                           (onResize)="onResize()"
                           (onAddFilter)="onAddFilter($event)"
                           (onShowDetails)="showDetails($event)"
                           (onSelectedAlertsChange)="onSelectedAlertsChange($event)"
                           (onMetaAlertCreated)="search($event)"
                           (treeViewChange)="onTreeViewChange($event)"></app-tree-view>
        </div>
    </div>
  </div>
</div>