{%- if site.search.google.custom_search_engine_id -%}

<div class="search search--dark search--google-custom-search-engine">
  <div class="main">
    <div class="content js-gcse">
      <!-- <gcse:search enableAutoComplete="true" gname="search-box"></gcse:search>
      <gcse:searchresults-only gname="results"></gcse:searchresults-only> -->
    </div>
  </div>
</div>
<script>
  var gcse = document.getElementsByClassName('js-gcse')[0];
  var gcseSearch = document.createElement('gcse:search');
  gcseSearch.setAttribute('enableAutoComplete', 'true');
  gcseSearch.setAttribute('gname', 'search-box');
  var gcseSearchresults = document.createElement('gcse:searchresults-only');
  gcseSearchresults.setAttribute('gname', 'results');
  gcse.appendChild(gcseSearch);
  gcse.appendChild(gcseSearchresults);
</script>
<script>{%- include search-providers/google-custom-search-engine/search.js -%}</script>

{%- endif -%}