#IF(NOT #DEFINED(#ASIN))
<div data-esf="ep-searchbar-root" class="ep-searchbar-root">
  <div class="ep-searchbar-quicksearch-wrapper">
    <form action="?ViewAction=MBO-ViewGeneral&ObjectID=#ObjectID" method="post" class="ep-searchbar-quicksearch NoWrap" data-id="ep-searchbar-quicksearch" data-esf="ep-searchbar-quicksearch">
      <input data-esf="ep-searchbar-quicksearchinput" placeholder="{AmazonProductNumber}" value="#IF(#DEFINED(#INPUT.SearchEanAsin))#INPUT.SearchEanAsin#ELSE#Product.UPCEAN#ENDIF" name="SearchEanAsin" class="ep-ui-smartsearch ep-js ep-searchbar-quicksearchinput" data-js=".uiInput()" autocomplete="off">
      <button data-esf="ep-searchbar-quicksearchbutton"  class="ep-button ep-button-fake fa fa-search fa-lg ep-searchbar-quicksearch-button" title="{StartSearch}"></button>
    </form>
    <button data-id="ep-searchbar-toggle" data-esf="ep-searchbar-toggle" data-ep-searchbar='{"type": "toggleSearch", "options": {"quicksearch": "ep-searchbar-quicksearch", "advancedsearch": "ep-searchbar-advancedsearch", "storageId": "searchbarProductManagerToggle"}}' type="button" class="ep-button ep-button-searchbar-toggle ep-searchbar-toggle" title="Erweiterte Suche">{ShowExtendedSearchUnity} <i class="fa fa-chevron-down"></i></button>
  </div>
  <form action="?ViewAction=MBO-ViewGeneral&ObjectID=#ObjectID" method="post" data-esf="ep-searchbar-advancedsearch" data-id="ep-searchbar-advancedsearch" class="ep-searchbar-advancedsearch ui-helper-clearfix container-fluid BottomWideMargin">

    <div class="row">
      <div class="col-xs-12">
        <div class="ep-notification-info MarginBottom">
          <p>{ProductSearchInfoText}</a></p>
        </div>#REM <!-- .ep-notification-info MarginBottom--> #ENDREM
      </div>#REM <!-- .col-xs-12 --> #ENDREM
    </div>#REM <!-- .row --> #ENDREM

    <div class="row ClearBoth">
      <div class="col-xs-4 BottomWideMargin">
        <div class="row">
          <div class="col-xs-12">
            <label class="ep-label" for="SearchEanAsin">{AmazonProductNumber}</label>
            <span></span><span class="Tooltip ep-js" data-js=".uiTooltip({});">{BubbleHelpProductCode}</span>
          </div>#REM <!-- .col-xs-12 --> #ENDREM
        </div>#REM <!-- .row --> #ENDREM
        <div class="row">
          <div class="col-xs-12">
            <input type="text" class="ep-js" data-js=".uiInput()" name="SearchEanAsin" id="SearchEanAsin" value="#IF(#DEFINED(#INPUT.SearchEanAsin))#INPUT.SearchEanAsin#ELSE#Product.UPCEAN#ENDIF" />
          </div>#REM <!-- .col-xs-12 --> #ENDREM
        </div>#REM <!-- .row --> #ENDREM
      </div>#REM <!-- .col-xs-4 BottomWideMargin --> #ENDREM
    </div>#REM <!-- .row ClearBoth --> #ENDREM

    <div class="row ClearBoth">
      <div class="col-xs-4 BottomWideMargin">
        <div class="row">
          <div class="col-xs-12">
            <label class="ep-label" for="SearchString">{AmazonProducts}</label>
            <span></span><span class="Tooltip ep-js" data-js=".uiTooltip({});">{BubbleHelpProductName}</span>
          </div>#REM <!-- .col-xs-12 --> #ENDREM
        </div>#REM <!-- .row --> #ENDREM
        <div class="row">
          <div class="col-xs-12">
            <input type="text" class="ep-js" data-js=".uiInput()" name="SearchString" id="SearchString" value="#IF(#DEFINED(#INPUT.SearchString))#INPUT.SearchString#ELSIF(#DEFINED(#SearchString))#SearchString#ELSE#Product.Name#ENDIF" />
          </div>#REM <!-- .col-xs-12 --> #ENDREM
        </div>#REM <!-- .row --> #ENDREM
      </div>#REM <!-- .col-xs-4 BottomWideMargin--> #ENDREM

      <div class="col-xs-4 BottomWideMargin">
        <div class="row">
          <div class="col-xs-12">
            <label class="ep-label" for="SearchStringBrand">{AmazonBrands}</label>
            <span></span><span class="Tooltip ep-js" data-js=".uiTooltip({});">{BubbleHelpProductBrand}</span>
          </div>#REM <!-- .col-xs-12 --> #ENDREM
        </div>#REM <!-- .row --> #ENDREM
        <div class="row">
          <div class="col-xs-12">
            <input type="text" class="ep-js" data-js=".uiInput()" name="SearchStringBrand" id="SearchStringBrand" #IF(NOT #DEFINED(#INPUT.SearchString) AND NOT #DEFINED(#Product.Name))disabled#ENDIF value="#IF(#DEFINED(#INPUT.SearchStringBrand))#INPUT.SearchStringBrand#ELSE#Product.Manufacturer#ENDIF" />
          </div>#REM <!-- .col-xs-12 --> #ENDREM
        </div>#REM <!-- .row --> #ENDREM
      </div>#REM <!-- .col-xs-4 BottomWideMargin --> #ENDREM
    </div>#REM <!-- .row ClearBoth --> #ENDREM

    <div class="row">
      <div class="col-xs-12 AlignRight">
        <button type="submit" data-esf="ep-searchbar-advancedSearchButton" id="StartSearch" class="ep-button ep-button-cta">{StartSearch}</button>
      </div>
    </div>
  </form>
</div>

<script>
    require([
      'jquery',
      'ep',
      'de_epages/presentation/ui/searchbar',

      '$ready!'
    ], function($, ep, de_epages) {
      $('.ep-searchbar-root').presentationUiSearchbar({
        startOpen: true
      });

      var $inputSearchString = $('#'+'SearchString'),
              $inputSearchStringBrand = $('#'+'SearchStringBrand'),
              $inputSearchEanAsin = $('#'+'SearchEanAsin'),
              $buttonStartSearch = $('#'+'StartSearch');

      $inputSearchString.on('input', function(event) {
        if($inputSearchString.val().trim().length > 0) {
          $inputSearchStringBrand.prop("disabled", false);
          $buttonStartSearch.prop("disabled", false);
        } else {
          if ($inputSearchEanAsin.val().trim().length === 0 && $inputSearchString.val().trim().length === 0){
            $buttonStartSearch.prop("disabled", true);
            $inputSearchStringBrand.prop("disabled", true);
          } else {
            $inputSearchStringBrand.prop("disabled", true);
          }
        }
      });

      $inputSearchEanAsin.on('input', function(event) {
        if ($inputSearchEanAsin.val().trim().length > 0) {
          $buttonStartSearch.prop("disabled", false);
        } else {
          if ($inputSearchString.val().trim().length === 0 && $inputSearchEanAsin.val().trim().length === 0){
            $buttonStartSearch.prop("disabled", true);
            $inputSearchStringBrand.prop("disabled", true);
          } else {
            $inputSearchStringBrand.prop("disabled", true);
          }
        }

      });
    });

    #IF(#FoundEanAsin NEQ 0)
      require([
        'jquery',
        'ep',

        'ep/ui/simple-tooltip',
        '$ready!'
      ], function($, ep, simpleTooltip) {
        simpleTooltip.show({
          element: ep('#'+'SearchEanAsin'),
          message:  '<p>{PopupInfoText1}</p> <a href="?ViewAction=MBO-ViewGeneral&ObjectID=#Product.ID" class="DialogAction PseudoLink">{PopupChangeProductCode}</a> <p>{PopupInfoText2}</p>',
          event: 'hover',
          interactive: true
        });
      });
    #ENDIF
</script>
#ENDIF