<!--********************************************************************************
 * 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>
    :host /deep/ .dropdown {
     width: 200px;
   }

    :host /deep/ .dropdown-toggle {
     overflow: hidden;
     padding-right: 24px/* Optional for caret */
     ;
     text-align: left;
     text-overflow: ellipsis;
     width: 100%;
   }
   /* Optional for caret */

    :host /deep/ .dropdown-toggle .caret {
     position: absolute;
     right: 12px;
     top: calc(50% - 2px);
   }
   .ui-button-text {
     padding: 0;
   }

   :host /deep/ .ui-splitbutton.ui-buttonset .ui-button {
     color: black;
     border: 1px solid #ccc;
     font-size: 14px;
     height: 37px;
     background-color: transparent;
   }
   :host /deep/ .ui-splitbutton.ui-buttonset .ui-button:hover {
     color: black;
     background-color: #e6e6e6;
     border-color: #adadad;
   }
 </style>

<div style="padding-top: 15px;">
  <accordion>
    <accordion-group #basketGroup [isOpen]="false">
      <div accordion-heading class="thinheader container-fluid">
        <div class="row">
          <div class="col text-left">
            {{'basket.mdm-basket.shopping-basket' | translate }} &nbsp;&nbsp;
            <mdm-view (click)="onViewClick($event)"></mdm-view>
          </div>
          <div class="col text-right">
            <button type="button" class="btn btn-mdm" (click)="clearBasket($event)"  title="{{'basket.mdm-basket.tooltip-clear-shopping-basket' | translate }}"><span class="fa fa-eraser"></span></button>
            <p-splitButton icon="fa fa-arrow-circle-o-down" class="dropdown" (onClick)="saveBasketWithExtension($event, 'mdm')" (onDropdownClick)="stopEvent($event)" title="{{'basket.mdm-basket.tooltip-download-shopping-basket' | translate }}" [model]="launchers" [disabled]="isDownloadDisabled()"></p-splitButton>
            <div class="fileupload btn btn-mdm" title="{{'basket.mdm-basket.tooltip-upload-shopping-basket' | translate }}" (click)=onUploadClick($event)>
              <span class="fa fa-arrow-circle-o-up"></span>
              <input title="{{'basket.mdm-basket.tooltip-upload-shopping-basket' | translate }}" class="upload" name="datei" type="file" [accept]="allowedExtensions" id="fileInput" (change)="onUploadChange($event)">
            </div>
            <button type="button" type="submit" class="btn btn-mdm" (click)="showLoadModal($event)"  title="{{'basket.mdm-basket.tooltip-open-shopping-basket' | translate }}"><span class="fa fa-folder-open"></span></button>
            <button type="button" type="submit" class="btn btn-mdm btn-outline-secondary" (click)="showSaveModal($event)" title="{{'basket.mdm-basket.tooltip-save-shopping-basket' | translate }}"><span class="fa fa-floppy-o"></span></button>
            &nbsp;&nbsp;
            <span class="fa" [ngClass]="{'fa-chevron-down': basketGroup?.isOpen, 'fa-chevron-right': !basketGroup?.isOpen}"></span>
          </div>
        </div>
      </div>
      <div class="container-fluid">
        <div class="row">
          <mdm-tableview [results]="basketContent"
                         [view]="viewComponent.selectedView"
                         isRemovable="true"
                         [menuItems]="contextMenuItems"
                         [selectedEnvs]="environments"
                         [environments]="environments">
          </mdm-tableview>
        </div>
      </div>
    </accordion-group>
  </accordion>
</div>

<p-confirmDialog header="Information" icon="pi pi-exclamation-triangle" ></p-confirmDialog>

<div bsModal #lgLoadModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="SelectSearchComponents" aria-hidden="true" (keyup.enter)="loadBasket()">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" title="{{ 'basket.mdm-basket.tooltip-close' | translate }}" class="close" (click)="childLoadModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">{{'basket.mdm-basket.load-shopping-basket' | translate }}</h4>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="row" *ngIf="baskets.length > 0">
            <ul class="list-group" style="max-height:80vh; padding: 0; list-style-type: none; overflow-y:auto;">
              <div style="display: table; width: 100%; border: 1px solid #ddd;">
                <li class="list-group-item" *ngFor="let basket of baskets" [ngClass]="{'active': selectedBasket == basket}" (click)="toggleSelect(basket)" (dblclick)="loadBasket(basket)" style="cursor: pointer">
                  {{basket.name}}<span class="badge">{{basket.items.length}}</span>
                </li>
              </div>
            </ul>
          </div>
          <div class="row" *ngIf="baskets.length === 0">
            {{'basket.mdm-basket.no-saved-shopping-baskets-available' | translate }}
          </div>
          <div class="row" style="margin-top: 20px;">
            <button type="button" class="btn btn-outline-secondary pull-right" (click)="loadBasket()" [disabled]="baskets.length <= 0 || selectedBasket == undefined">
              <span class="fa fa-upload"></span> {{'basket.mdm-basket.btn-load' | translate }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<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">
        <button type="button" title="{{'basket.mdm-basket.close' | translate }}" class="close" (click)="childSaveModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">{{'basket.mdm-basket.save-basket-as' | translate }}:</h4>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="row" *ngIf="baskets.length > 0">
            <p-dataTable
              [value]="baskets"
              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="{{ 'basket.mdm-basket.existing-shopping-baskets' | translate }}">
                <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="{{'basket.mdm-basket.shopping-basket-name' | translate }}" [value]="basketName" (input)="basketName = $event.target.value" (keyup.enter)="saveBasket($event)" required>
            </div>
            <div class="col-md-2" style="padding: 0;">
              <button type="button" class="btn btn-outline-secondary pull-right" (click)="saveBasket($event)" [disabled]="!basketName" title="{{getSaveBtnTitle()}}">
                <span class="fa fa-floppy-o"></span> {{'basket.mdm-basket.btn-shopping-basket' | translate }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<overwrite-dialog></overwrite-dialog>