<!-- ********************************************************************************
 * Copyright (c) 2015-2018 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>
  .modal-body >>> .dropup .dropdown-menu {
    margin-bottom: 38px !important;
  }

  .modal-body >>> .ui-tree .ui-tree-container {
    margin: 0 0 4px 0 !important;
    width: 100%;
    overflow: visible;
  }

  .modal-body >>> .ui-tree {
    min-height: 50vh !important;
    max-height: 76vh !important;
    overflow: auto;
  }

  .modal-body >>> .ui-tree .ui-treenode .ui-treenode-content .ui-treenode-label {
    padding-right: .75em;
  }
</style>
<div bsModal #lgEditSearchFieldsModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="SelectSearchComponents" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" title="{{TtlClose}}" class="close" (click)="childModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">{{LblSearchFieldEditor}}</h4>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-4" style="min-height: 50vh; max-height: 77vh;">
              <input [(ngModel)]="selectedSearchAttribute" [typeahead]="typeAheadValues"
                  (typeaheadOnSelect)="typeaheadOnSelect($event)"
                  typeaheadOptionField="label"
                  typeaheadGroupField="group"
                  typeaheadOptionsLimit="15"
                  placeholder="Suchtext eingeben"
                  class="form-control"
                  style="margin-bottom: 15px;">
              <searchattribute-tree [searchAttributes]="searchAttributes" [environments]="environments"></searchattribute-tree>
            </div>
            <div class="col-md-8" style="min-height: 50vh; max-height: 77vh; overflow-y:auto;">
              <label for="search-source" class="control-label" style="padding: 8px 0 15px 0;">{{LblSelectedSearchAttributes}}</label>
              <div *ngIf="layout.getSourceNames().length === 0" style="text-align: center;">
                Keine Suchattribute ausgewählt.
              </div>
              <div *ngFor="let env of layout.getSourceNames()">
              <div *ngIf="layout.getConditions(env).length > 0">
                <span style="font-weight: bold;">{{mapSourceNameToName(env)}}</span>
                <table class="table table-bordered searchdefinition">
                  <colgroup>
                    <col style="width: 44%;">
                    <col style="width: 44%;">
                    <col style="width: 4%;">
                    <col style="width: 4%;">
                    <col style="width: 4%;">
                  </colgroup>
                  <tr *ngFor="let condition of layout.getConditions(env)">
                    <td>{{condition?.type}}</td>
                    <td>{{condition?.attribute}}</td>
                    <td style="width: 30px; text-align: center; vertical-align: middle;">
                      <span class="glyphicon glyphicon-menu-up" [ngStyle]="{'visibility': isFirst(condition) ? 'hidden': 'visible'}" style="cursor: pointer; margin-bottom: 0;" (click)="moveUp(condition)"></span>
                    </td>
                    <td style="width: 30px; text-align: center; vertical-align: middle;">
                      <span class="glyphicon glyphicon-menu-down" [ngStyle]="{'visibility': isLast(condition)? 'hidden': 'visible'}" style="cursor: pointer;" (click)="moveDown(condition)"></span>
                    </td>
                    <td style="text-align: center;"><span class="glyphicon glyphicon-remove" style="cursor: pointer" title="{{TtlRemove}}" (click)="removeCondition(condition)"></span></td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="row" style="margin-top: 15px;">
          <div class="col-md-12">
            <button type="button" class="btn btn-default pull-right" (click)="addSearchFields()" [disabled]="conditions.length === 0">
              <span class="glyphicon glyphicon-ok"></span> {{LblApplyChanges}}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>