{# @var className #}

{# Encapsulate search bar as custom element, so styles do not bleed out #}
{# IDEA: Should CMS use React component or Portal's React use custom element #}
{# WARNING: Some markup is duplicated in other repositories #}
{# SEE: https://confluence.tacc.utexas.edu/x/LoCnCQ #}
<tacc-search-bar class="s-search-bar  {{className}}" id="s-search-bar">
  <!-- The search bar is populated here (from the template below). -->
  <template>{% include "nav_search.raw.html" %}</template>
</tacc-search-bar>

<script type="module">
  import * as registerCustomElement from '/static/site_cms/js/modules/registerCustomElement.js';

  const template = document.getElementById('s-search-bar').firstElementChild;
  /* Load necessary Bootstrap outside raw markup so CMS */
  /* FAQ: CMS, Portal, User Guide each use a different Bootstrap file */
  /* TODO: After CMS redesign, use only one Bootstrap version (Portal's) */
  template.content.prepend(
    document.getElementById('css-bootstrap').cloneNode(true)
  );
  registerCustomElement.fromTemplate(template, 'tacc-search-bar');
</script>

<!-- Populate search field value from matching URL query parameter -->
{# FP-858: Instead use `{{request.GET.query_string}}` in CMS Django template #}
<script type="module">
  import * as inputFieldValue from '/static/site_cms/js/modules/inputFieldValue.js';

  const shadowRoot = document.getElementById('s-search-bar').shadowRoot;
  inputFieldValue.update(shadowRoot, 'query_string');
</script>
