#IF(#DELETE OR #DELETEALL)
      <input type="hidden" name="ACCEPT" value="1" />
      <div class="BottomMarginWide ep-notification-danger">
        <h3>{Warning}</h3>
        <p>{OnlineOffersWillBeEnded}</p>
      </div>
#ENDIF
#IF(NOT #DELETEALL)

    <table class="ContentList ep-js" data-js=".uiRichtable()">
      <thead>
        #IF(#DELETE)
        <tr>
          <td class="Checkbox"><input class="ep-js" data-js=".uiInput()" type="checkbox" name="selector" value="checkbox" onclick="OnCheckAll(this.form, 'ListObjectID', this.checked)" disabled="disabled" /></td>
          <td>{SKU}</td>
          <td>{Product}</td>
          <td><strong>{YourPriceOffer}</strong></td>
          <td><strong>{CheapestOffer}</strong></td>
          <td><strong>{DeliveryPeriod}</strong></td>
          <td>{Status}</td>
        </tr>
        #ELSE
        <tr>
          #IF(NOT #Pager.Items)
              <td colspan="7"></td>
          #ELSE
              <td class="Checkbox"><input class="ep-js" data-js=".uiInput()" type="checkbox" name="selector" value="Checkbox" onclick="OnCheckAll(this.form, 'ListObjectID', this.checked)" /></td>
            #IF(#Pager.OrderBy NE "Alias")
              <th><a href="#Pager.URL&amp;OrderBy=Alias" title="{SortColumn}"><strong>{SKU}</strong><i class="fa fa-unsorted" title="{SortColumn}"></i></a></th>
            #ELSIF(#INPUT.OrderDesc)
              <th><a href="#Pager.URL&amp;OrderBy=Alias&amp;OrderDesc=0" title="{SortColumn}"><strong>{SKU}</strong><i class="fa fa-sort-desc" title="{SortColumn}"></i></a></th>
            #ELSE
              <th><a href="#Pager.URL&amp;OrderBy=Alias&amp;OrderDesc=1" title="{SortColumn}"><strong>{SKU}</strong><i class="fa fa-sort-asc" title="{SortColumn}"></i></a></th>
            #ENDIF
            #IF(#Pager.OrderBy NE "NameOrAlias")
              <th><a href="#Pager.URL&amp;OrderBy=NameOrAlias" title="{SortColumn}"><strong>{Product}</strong><i class="fa fa-unsorted" title="{SortColumn}"></i></a></th>
            #ELSIF(#INPUT.OrderDesc)
              <th><a href="#Pager.URL&amp;OrderBy=NameOrAlias&amp;OrderDesc=0" title="{SortColumn}"><strong>{Product}</strong><i class="fa fa-sort-desc" title="{SortColumn}"></i></a></th>
            #ELSE
              <th><a href="#Pager.URL&amp;OrderBy=NameOrAlias&amp;OrderDesc=1" title="{SortColumn}"><strong>{Product}</strong><i class="fa fa-sort-asc" title="{SortColumn}"></i></a></th>
            #ENDIF

            #IF(#Pager.OrderBy NE "AmazonPrice")
              <th><a href="#Pager.URL&amp;OrderBy=AmazonPrice" title="{SortColumn}"><strong>{YourPriceOffer}</strong><i class="fa fa-unsorted" title="{SortColumn}"></i></a></th>
            #ELSIF(#INPUT.OrderDesc)
              <th><a href="#Pager.URL&amp;OrderBy=AmazonPrice&amp;OrderDesc=0" title="{SortColumn}"><strong>{YourPriceOffer}</strong><i class="fa fa-sort-desc" title="{SortColumn}"></i></a></th>
            #ELSE
              <th><a href="#Pager.URL&amp;OrderBy=AmazonPrice&amp;OrderDesc=1" title="{SortColumn}"><strong>{YourPriceOffer}</strong><i class="fa fa-sort-asc" title="{SortColumn}"></i></a></th>
            #ENDIF
            #IF(#Pager.OrderBy NE "BestPrice")
              <th><a href="#Pager.URL&amp;OrderBy=BestPrice" title="{SortColumn}"><strong>{CheapestOffer}</strong><i class="fa fa-unsorted" title="{SortColumn}"></i></a></th>
            #ELSIF(#INPUT.OrderDesc)
              <th><a href="#Pager.URL&amp;OrderBy=BestPrice&amp;OrderDesc=0" title="{SortColumn}"><strong>{CheapestOffer}</strong><i class="fa fa-sort-desc" title="{SortColumn}"></i></a></th>
            #ELSE
              <th><a href="#Pager.URL&amp;OrderBy=BestPrice&amp;OrderDesc=1" title="{SortColumn}"><strong>{CheapestOffer}</strong><i class="fa fa-sort-asc" title="{SortColumn}"></i></a></th>
            #ENDIF
            #IF(#Pager.OrderBy NE "DeliveryPeriod")
              <th><a href="#Pager.URL&amp;OrderBy=DeliveryPeriod" title="{SortColumn}"><strong>{DeliveryPeriod}</strong><i class="fa fa-unsorted" title="{SortColumn}"></i></a></th>
            #ELSIF(#INPUT.OrderDesc)
              <th><a href="#Pager.URL&amp;OrderBy=DeliveryPeriod&amp;OrderDesc=0" title="{SortColumn}"><strong>{DeliveryPeriod}</strong><i class="fa fa-sort-desc" title="{SortColumn}"></i></a></th>
            #ELSE
              <th><a href="#Pager.URL&amp;OrderBy=DeliveryPeriod&amp;OrderDesc=1" title="{SortColumn}"><strong>{DeliveryPeriod}</strong><i class="fa fa-sort-asc" title="{SortColumn}"></i></a></th>
            #ENDIF
            #IF(#Pager.OrderBy NE "OnlineStatus")
              <th><a href="#Pager.URL&amp;OrderBy=OnlineStatus" title="{SortColumn}"><strong>{Status}</strong><i class="fa fa-unsorted" title="{SortColumn}"></i></a></th>
            #ELSIF(#INPUT.OrderDesc)
              <th><a href="#Pager.URL&amp;OrderBy=OnlineStatus&amp;OrderDesc=0" title="{SortColumn}"><strong>{Status}</strong><i class="fa fa-sort-desc" title="{SortColumn}"></i></a></th>
            #ELSE
              <th><a href="#Pager.URL&amp;OrderBy=OnlineStatus&amp;OrderDesc=1" title="{SortColumn}"><strong>{Status}</strong><i class="fa fa-sort-asc" title="{SortColumn}"></i></a></th>
            #ENDIF
          #ENDIF
        </tr>
        #ENDIF
      </thead>
      <tfoot>
        <tr>
          <td colspan="7"><div class="Pager">#IF(NOT #DELETE)#INCLUDE("Pager")#ENDIF</div></td>
        </tr>
      </tfoot>
      <tbody>
      #LOCAL("PagerItems","")

      #IF(#DELETE)
        #SET("PagerItems",#DeleteObjects)
        #SET("AllowNewEntry",0)
      #ELSE
        #SET("PagerItems",#Pager.Items)
      #ENDIF

      #IF(#COUNT(#PagerItems))
        #LOOP(#PagerItems)
          <tr#IF(#FormError_ListObjectID) class="DialogError"#ELSIF(#ItemNo % 2) class="alternate"#ENDIF>
            <td class="Checkbox">
              <input type="checkbox"  class="ep-js" data-js=".uiInput()" name="ListObjectID" value="#ID" #IF(#DELETE) disabled="disabled" checked="checked"#ENDIF /></td>
              #IF(#DELETE)<input type="hidden" name="ListObjectID" value="#ID" />#ENDIF
            <td>
              #INCLUDE("INC-OfferIcon")
              <a href="?ViewAction=MBO-ViewGeneral&amp;ObjectID=#ID" alt="#Product.Alias" title="#Product.Alias">#Product.Alias</a>
            #INCLUDE("INC-BundleIcon")
            #INCLUDE("INC-VariationIcon")
            #INCLUDE("INC-IncompleteIcon")
            </td>
            <td><a href="?ViewAction=MBO-ViewGeneral&amp;ObjectID=#ID" alt="#Product.Alias" title="#Product.Alias">#Product.NameOrAlias </a></td>
            <td class="Money">#AmazonPrice[money]</td>
            <td class="Money">#BestPrice[money]</td>
            <td>#Product.AmazonDeliveryLatency {DaysFuzzy} </td>
            <td>
             #IF(NOT #COUNT(#Product.SubProducts) OR #Product.SuperProduct)
               #IF(#OnlineStatus == 0){IsPreparing}
               #ELSIF(#OnlineStatus == 1){Error}
               #ELSIF(#OnlineStatus == 2){IsUploading}
               #ELSIF(#OnlineStatus == 4){IsActive}
               #ELSIF(#OnlineStatus == 8){inactive}
               #ENDIF
             #ENDIF
            </td>

          </tr>
        #ENDLOOP
      #ELSE
        #IF(#INPUT.ViewAction EQ "MBO-SearchProducts")
        <tr>
          <td colspan="8" class="AlignMiddle">{NoSearchResults}</td>
        </tr>
        #ENDIF
      #ENDIF
      #ENDLOCAL
      #IF(#AllowNewEntry)
      <tr class="NewEntry">
        <td class="Checkbox"><i class="fa fa-lg fa-plus-circle"></i></td>
        <td colspan="6" #IF(#FormError_NewProduct)class="DialogError"#ENDIF>
          <button type="button" class="ep-tray#IF(NOT #IsSettingsComplete) Disabled#ENDIF">{AssignProducts}</button>
        </td>
      </tr>
      #ENDIF
      </tbody>
    </table>
#ENDIF

<script type="text/javascript">

    require([
        'jquery',
        'de_epages/presentation/tray/setup',
        '$ready!'
    ], function ($, setup) {

        'use strict';

        setup({
            node: $('button.ep-tray'),
            smartSearch: {
                source: 'JSONSmartSearchProductAlias',
                placeholder: '{SearchSKU}',
                name: 'NewProduct'
            },
            dialog: { title: '{AssignProducts}' },
            pageId: #ID,
            changeAction: 'JSONInsertProducts',
            tabs: {
                products: {
                    id: #Shop.ProductFolder.ID,
                    action: 'JSONSearchProductsToInsert',
                    objectName: 'ProductIDs'
                }
            }
            // <LEGACY>
            #IF(#System.UseOldTray),trayAction: 'AddProductsFromTray'#ENDIF
            // </LEGACY>
        });
    });

</script>