<div class="cin-search-wrapper d-flex justify-content-center">
  <div class="cin-search-box">
    <input type="hidden" id="jtl_token" value="{$jtl_token}">
    <input type="text" id="cin_ankauf_ql_cName" class="form-control" placeholder="Artikel suchen..." autocomplete="off"
      data-searchurl="{$cFrontendPfadURL}ajax.php" data-mincharacters="2">

    <div class="progress-container">
      <div class="search-progress bs-progress d-none">
        <div class="line"></div>
        <div class="subline inc"></div>
        <div class="subline dec"></div>
      </div>
    </div>

    <div class="min-chars-hint d-none">
      Bitte mindestens 2 Zeichen eingeben
    </div>

    <div class="no-result-hint d-none">
      Keine Ergebnisse gefunden
    </div>

    <div class="cin_ajaxsearch_display"></div>


  </div>
</div>


<div class="row position-relative form-wrapper">
  <div class="col-12 col-md-6 form-col">
  </div>
  <div id="selectedArticle" class="col-12 col-md-6 detail-col">
    <div id="cin_ankauf_images">
      <div id="cin_ankauf_image_list"></div>

      {if (isset($Artikel->Bilder) && count($Artikel->Bilder))}

        {foreach from=$Artikel->Bilder item=img}
          <a href="{$img->cPfadGross}" target="_blank">
            <img src="{$img->cPfadNormal}" alt="{$Artikel->cName}" title="{$Artikel->cName}">
          </a>

        {/foreach}

      {/if}
    </div>
    <div id="cin_ankauf_desc"></div>
  </div>
  <div class="col-12 queryline">
    <div class="form-group">
      <label for="cin_ankauf_ql_cName">
        <div class="d-flex">
          <span>
            {* {'article'|cin_quick_purchase_translate} *}
            {'article'}
          </span>
          <button {* class="btn btn-link text-primary btn-signin p-0 ml-auto
              {if true === $cin_ankauf_access} d-none
              {/if}">{'sign in | sign up'|cin_quick_purchase_translate}</button> *} class="btn btn-link text-primary btn-signin p-0 ml-auto
              {if true === $cin_ankauf_access} d-none
              {/if}">{'sign in | sign up'}</button>
        </div>
        <input type="text" id="cin_ankauf_ql_cName" name="cin_ankauf_ql_cName" class="form-control"
          aria-describedby="cin_help_ankauf_ql_cName" value="" autocomplete="off"
          {if true !== $cin_ankauf_access}disabled{/if}>
        <div class="progress-container">
          <div class="search-progress bs-progress d-none">
            <div class="line"></div>
            <div class="subline inc"></div>
            <div class="subline dec"></div>
          </div>
        </div>
      </label>
      <small id="cin_help_ankauf_ql_cName" class="text-muted">
        {* {'manufacturer, type or type number of your selling article'|cin_quick_purchase_translate} *}

      </small>
    </div>

    {assign var=asTile value=('tile' === $cin_ankauf_config['cin_ankauf_style_queryresults'])}
    <div id="cin_ankauf_results" class="container card d-none
              {if $asTile} tiles
              {/if}">

      {if $asTile}
        <h5 class="d-flex justify-content-between m-1">
          <div>
            <span id="articleCount"></span>
            {* {'articles found for purchase'|cin_quick_purchase_translate} *}
            {'articles found for purchase'}
            <span id="alternateform" class="d-none">
              <br>
              <a href="{$alternateformlink}" target="_blank" {if $alternateformlink == ''}disabled {/if}>
                {* {'Use our form for unlisted articles for this request'|cin_quick_purchase_translate} *}
                {'Use our form for unlisted articles for this request'}
              </a>
            </span>
          </div>
          <i id="cin_ankauf_close" class="fas fa-times-circle"></i>
        </h5>

        <ul id="cin_ankauf_results_container" class="row"></ul>

      {else}
        <div class="card-body">
          <h5 class="d-flex justify-content-between">
            <div>
              <span id="articleCount"></span>
              Artikel für Ankauf gefunden.
              <span id="alternateform" class="d-none">
                <br>
                <a href="{$alternateformlink}" target="_blank" {if $alternateformlink == ''}disabled {/if}>
                  {* {'Use our form for unlisted articles for this request'|cin_quick_purchase_translate} *}
                  {'Use our form for unlisted articles for this request'}
                </a>
              </span>
            </div>
            <i id="cin_ankauf_close" class="fas fa-times-circle"></i>
          </h5>
          <ul id="cin_ankauf_results_container"></ul>
        </div>
      {/if}
    </div>
  </div>
</div>
