<!--********************************************************************************
 * Copyright (c) 2015-2020 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0
 *
 ********************************************************************************-->

<style>
#searchtext .form-control, #searchtext .btn {
    border-color: #000000;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0, 0, 0,.6);
}

/* :host /deep/ .ui-multiselect .ui-multiselect-label {
  padding: .25em 2em .25em .25em;
} */
</style>

<div class="container" style="padding: 0;">
  <div class="row">
    <div class="col-sm">
      <label for="search-source" class="col-form-label">{{ 'search.mdm-search.lbl-search-filter' | translate }}</label>
      <p-dropdown [options]="filters" optionLabel="name" (onChange)="onFilterChange($event)" [style]="{'width': '100%'}"></p-dropdown>
    </div>
    <div class="col-sm">
      <label for="search-source" class="col-form-label">{{ 'search.mdm-search.lbl-source' | translate }}</label>
      <p-multiSelect [options]="dropdownModel" maxSelectedLabels=2 [(ngModel)]="selectedEnvs" (onChange)="selectedEnvironmentsChanged()" title="{{ 'search.mdm-search.tooltip-select-sources' | translate }}" [style]="{'width': '100%'}"></p-multiSelect>
    </div>
    <div class="col-sm">
      <label for="search-resulttype" class="col-form-label">{{ 'search.mdm-search.lbl-result-type' | translate }}</label>
      <p-dropdown [options]="definitions" optionLabel="label" (onChange)="onResultTypeChane($event)" [style]="{'width': '100%'}"></p-dropdown>
    </div>
  </div>
  <div class="row" style="margin-top: 5px; margin-bottom: 10px;">
    <div class="col-sm input-group" id="searchtext" style="width:100%">
      <input type="text" class="form-control" name="searchText" placeholder="{{ 'search.mdm-search.enter-search-text' | translate }}" [(ngModel)]="currentFilter.fulltextQuery" (keyup.enter)="onSearch()" aria-describedby="basic-addon1" 
        title="{{ 'search.mdm-search.tooltip-search-text' | translate }}">
      <div class="input-group-append">
        <button type="button" class="btn btn-mdm-no-margin" (click)="onSearch()">{{ 'search.mdm-search.btn-search' | translate }}</button>
      </div>
    </div>
  </div>
</div>

<accordion>
  <accordion-group id="advancedSearch" [isOpen]="isAdvancedSearchOpen" #advancedSearch [ngClass]="{'greyed': !isAdvancedSearchActive}">
    <div accordion-heading class="thinheader container-fluid">
      <div class="row">
        <div class="col text-left">
          <input type="checkbox" [(ngModel)]="isAdvancedSearchActive" (click)="onCheckBoxClick($event)" title="{{ getAdvancedSearchCbxTitle() | translate }}"/> &nbsp;{{ 'search.mdm-search.lbl-advanced-search' | translate }} &nbsp;&nbsp;
          <button type="button" title="{{ 'search.mdm-search.tooltip-create-new-search-filter' | translate }}" class="btn btn-mdm" (click)="showSearchFieldsEditor($event)" [disabled]=!isAdvancedSearchActive><span class="fa fa-plus"></span></button>
          <button type="button" title="{{ 'search.mdm-search.tooltip-edit-search-filter' | translate }}" class="btn btn-mdm" (click)="showSearchFieldsEditor($event,currentFilter.conditions)" [disabled]=!isAdvancedSearchActive><span class="fa fa-pencil-square-o"></span></button>
          <button type="button" class="btn btn-mdm" (click)="showSaveModal($event)" title="{{ 'search.mdm-search.tooltip-save-search-filter' | translate }}" [disabled]=!isAdvancedSearchActive><span class="fa fa-floppy-o"></span></button>
          <button type="button" class="btn btn-mdm" (click)="deleteFilter($event)" title="{{ 'search.mdm-search.tooltip-delete-search-filter' | translate }}"><span class="fa fa-times"></span></button>
        </div>
        <div class="col text-right">
          <button type="button" class="btn btn-mdm" (click)="resetConditions($event)" title="{{ 'search.mdm-search.tooltip-reset-search-conditions' | translate }}" [disabled]=!isAdvancedSearchActive><span class="fa fa-eraser"></span></button>
          <span class="fa" style="color: #333 !important; padding-left: 15px;" [ngClass]="{'fa-chevron-down': advancedSearch?.isOpen, 'fa-chevron-right': !advancedSearch?.isOpen}"></span>
        </div>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div *ngIf="layout.getSourceNames().length === 0" style="text-align: center; margin-bottom: 5px;">
            {{ 'search.mdm-search.no-search-attributes-selected' | translate }}
          </div>
          <div *ngFor="let env of layout.getSourceNames()">
            <div *ngIf="layout.getConditions(env).length > 0">
              <div style="font-weight: bold;" *ngIf="mapSourceNameToName(env) === 'Global'" title="{{ 'search.mdm-search.tooltip-global-search-attributes' | translate }}">
                {{ 'search.mdm-search.global-search-attributes' | translate }}
              </div>
              <div style="font-weight: bold;" *ngIf="mapSourceNameToName(env) !== 'Global'"  title="Suchattribute, die nicht in allen Datenquellen verfügbar sind, sondern nur in der aktuellen Datenquelle.">
                {{ 'search.mdm-search.search-attributes-from' | translate }} {{mapSourceNameToName(env)}}
              </div>
              <table class="table table-bordered searchdefinition">
                <colgroup>
                  <col style="width: 17%;">
                  <col style="width: 17%;">
                  <col style="width: 5%;">
                  <col style="width: 58%;">
                  <col style="width: 3%;">
                </colgroup>
                <tr search-condition class="condition" *ngFor="let condition of layout.getConditions(env)"
                    [env]="env"
                    [condition]="condition"
                    [disabled]="!isAdvancedSearchActive"
                    [selectedEnvs]="selectedEnvironments"
                    (onRemove)="removeCondition($event)">
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </accordion-group>
  <accordion-group  id="searchResults" [isOpen]="isSearchResultsOpen" #searchResults>
    <div accordion-heading class="thinheader container-fluid">
      <div class="row">
        <div class="col text-left">
          {{ 'search.mdm-search.results' | translate }} &nbsp;&nbsp;
          <mdm-view (click)="onViewClick($event)"></mdm-view>
        </div>
        <div class="col text-right">
          <span class="badge">{{results?.rows.length}}</span>&nbsp;
          <button type="button" class="btn btn-mdm" (click)="clearResultlist($event)" title="{{ 'search.mdm-search.tooltip-clear-search-results' | translate }}"><span class="fa fa-eraser"></span></button>
          <button type="button" class="btn btn-mdm" title="{{ 'search.mdm-search.tooltip-add-selection-to-shopping-basket' | translate }}" (click)="selected2Basket($event)">
            <span class="fa fa-shopping-cart" style="color:#DADADA; margin-right: -12px;"></span>
            <span class="fa fa-shopping-cart" style="color:#A8A4A4; margin-right: -12px;"></span>
            <span class="fa fa-shopping-cart"></span>
          </button>
          <span class="fa" [ngClass]="{'fa-chevron-down': searchResults?.isOpen, 'fa-chevron-right': !searchResults?.isOpen}" style="padding-left: 15px;"></span>
        </div>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row">
          <mdm-tableview
            [results]="results"
            [view]="viewComponent.selectedView"
            isShopable="true"
            [menuItems]="contextMenuItems"
            [selectedEnvs]="selectedEnvironments"
            [searchAttributes]="allSearchAttributesForCurrentResultType"
            [environments]="environments"
            [loading]="loading">
          </mdm-tableview>
      </div>
    </div>
  </accordion-group>
</accordion>

<div bsModal #lgSaveModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="SelectSearchComponents" aria-hidden="true">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
      <h4 class="modal-title">{{ 'search.mdm-search.title-save-search-filter-as' | translate }}:</h4>
        <button type="button" class="close" (click)="childSaveModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="row" *ngIf="filters?.length > 0">
            <p-dataTable
              [value]="filters"
              resizableColumns="false"
              [reorderableColumns]="false"
              [rows]="10"
              [paginator]="true"
              [pageLinks]="3"
              [rowsPerPageOptions]="[10,20,50]"
              [(selection)]="selectedRow"
              (onRowClick)="onRowSelect($event)"
              (onRowSelect)="onRowSelect($event)">
              <p-column [style]="{'width':'30px'}" selectionMode="single"></p-column>
              <p-column header="{{LblExistingFilterNames}}">
                <ng-template pTemplate="body" let-col let-row="rowData" >
                  {{row.name}}
                </ng-template>
              </p-column>
            </p-dataTable>
          </div>
          <div class="row" style="margin-top: 15px;">
            <div class="col-md-10" style="padding-left: 0;">
            <input type="text" class="form-control" placeholder="{{ 'search.mdm-search.search-filter-name' | translate }}" [(value)]="filterName" (input)="filterName = $event.target.value" (keyup.enter)="saveFilter($event)">
            </div>
            <div class="col-md-2" style="padding: 0;">
              <form class="form-inline">
                <button type="button" class="btn btn-mdm pull-right" (click)="saveFilter($event)" [disabled]="!filterName" title="{{ getSaveFilterBtnTitle() | translate }}">
                  <span class="fa fa-floppy-o"></span> {{ 'search.mdm-search.btn-save' | translate }}
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<edit-searchFields [searchAttributes]="allSearchAttributesForCurrentResultType" [environments]="selectedEnvironments"></edit-searchFields>
<overwrite-dialog></overwrite-dialog>