<!-- Debugging: html_theme_options = {{ html_theme_options }} -->
{% if theme_use_meilisearch %} {% set API_KEY = theme_use_meilisearch.api_key %}
<!-- Include the MeiliSearch CSS stylesheet only if theme present -->
<link href="{{ pathto('_static/css/meilisearch.css', 1) }}" rel="stylesheet" />

<!-- Create a search bar form with a text input and a dropdown selector for the search index -->
<form
  class="bd-search d-flex align-items-center"
  action="{{ pathto('search') }}"
  method="get"
>
  <input
    type="search"
    placeholder="Search"
    class="form-control"
    id="search-bar-input"
    autofocus
  />
  <span class="search-button__kbd-shortcut"
    ><kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd>K</kbd></span
  >
  <style>
    .bd-search .search-button__kbd-shortcut {
      right: 33%;
    }
  </style>
  {% if theme_use_meilisearch.index_uids %}
  <select id="indexUidSelector" class="index-select">
    {% for index_uid, index_name in theme_use_meilisearch.index_uids.items() %}
    <option value="{{ index_uid }}">{{ index_name }}</option>
    {% endfor %}
  </select>
  {% endif %}
  <i class="fa-solid fa-magnifying-glass"></i>
  <!-- Include the MeiliSearch JavaScript library for the search bar -->
  <script src="https://cdn.jsdelivr.net/npm/docs-searchbar.js@latest/dist/cdn/docs-searchbar.min.js"></script>

  {% if not theme_use_meilisearch.host %} {% set HOST_URL =
  "https://backend.search.pyansys.com/" %} {% else %} {% set HOST_URL =
  theme_use_meilisearch.host %} {% endif %}

  <script>
    document.body.style.overflow = "hidden !important";
    // Initialize the MeiliSearch bar with the given API key and host
    // inspect the first value of index UID as default
    var theSearchBar = docsSearchBar({
      hostUrl: "{{ HOST_URL }}",
      apiKey: "{{ API_KEY }}",
      indexUid: "{{ theme_use_meilisearch.index_uids.items()|first|first }}",
      inputSelector: "#search-bar-input",
      debug: true, // Set debug to true if you want to inspect the dropdown
      meilisearchOptions: {
        limit: 1000,
      },
    });

    // Listen for changes in the dropdown selector and update the index uid and suggestion accordingly
    document
      .getElementById("indexUidSelector")
      .addEventListener("change", function () {
        theSearchBar.indexUid = this.value;
        theSearchBar.suggestionIndexUid = this.value;
        theSearchBar.autocomplete.autocomplete.setVal("");
      });

    // Listen for changes in the search bar input and update the suggestion accordingly
    document
      .getElementById("search-bar-input")
      .addEventListener("change", function () {
        theSearchBar.suggestionIndexUid =
          document.getElementById("indexUidSelector").value;
      });

    // Set the focus on the search bar input
    document.getElementById("searchbar").focus();

    // Set the focus on the dropdown selector
    document
      .getElementById("searchbar")
      .addEventListener("indexUidSelector", function () {
        theSearchBar.autocomplete.autocomplete.close();
      });
  </script>
</form>
{% else %}
<!-- If there is no MiliSearch enabled, use the PyData search -->
{%- include "pydata_sphinx_theme/components/search-field.html" -%} {% endif %}
