{% comment %}
 # -----------------------------------------------------------------------------
 # ~/_includes/templates/j1/modules/navigator/procedures/topsearch.proc
 # Liquid PROCEDURE template to create search input for the quicklinks bar
 #
 # Product/Info:
 # https://jekyll.one
 #
 # Copyright (C) 2022 Juergen Adams
 #
 # J1 Template is licensed under the MIT License.
 # See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
 #
 # -----------------------------------------------------------------------------
 # Test data:
 #   liquid_var: {{ liquid_var | debug }}
 #   topsearch_options: {{ topsearch_options | debug }}
 # -----------------------------------------------------------------------------
{% endcomment %}

{% comment %} Liquid procedure parameter|s
-------------------------------------------------------------------------------- {% endcomment %}
{% assign topsearch_options = include.options %}


{% comment %} Liquid procedures
-------------------------------------------------------------------------------- {% endcomment %}
{% capture select_color     %}themes/{{site.template.name}}/procedures/global/select_color.proc{% endcapture %}
{% capture select_icon_size %}themes/{{site.template.name}}/procedures/global/select_icon_size.proc{% endcapture %}


{% comment %} Liquid var initialization
-------------------------------------------------------------------------------- {% endcomment %}

{% comment %} Set config files
-------------------------------------------------------------------------------- {% endcomment %}

{% comment %} TODO: Params should passed by the generator
--------------------------------------------------------------------------------
{% assign quick_search_config   = site.data.modules.j1_jekyll_search %}
{% assign elastic_search_config = site.data.modules.j1_elastic_search %}
--------------------------------------------------------------------------------
{% endcomment %}


{% comment %} Set quicksearch properties
-------------------------------------------------------------------------------- {% endcomment %}
{% assign topsearch_id        = topsearch_options.container_id %}
{% assign icon_family         = topsearch_options.icon_family | downcase %}
{% assign placeholder         = topsearch_options.placeholder %}
{% assign search_heading_lead = topsearch_options.search_heading_lead %}
{% assign result_heading_lead = topsearch_options.result_heading_lead %}
{% assign search_icon         = topsearch_options.search_icon %}
{% assign close_icon          = topsearch_options.close_icon %}
{% assign clear_icon          = topsearch_options.clear_icon %}

{% assign quick_search   = true %}
{% assign elastic_search = false %}

{% if topsearch_options.type == 'quick_search' %}
  {% assign quick_search   = true %}
{% endif %}

{% if topsearch_options.type == 'elastic_search' %}
  {% assign elastic_search = true %}
  {% assign quick_search   = false %}
{% endif %}

{% if topsearch_options.icon_family     == 'FontAwesome' or topsearch_options.icon_family == 'FontAwesome4' or topsearch_options.icon_family == 'FontAwesome5' %}
  {% assign icon_family = 'fa' %}
{% elsif topsearch_options.icon_family  == 'MDI' or topsearch_options.icon_family == 'Material Design Icons'%}
  {% assign icon_family = 'mdi' %}
{% else %}
  {% assign icon_family = 'mdi' %}
{% endif %}

{% include {{select_color}} color=topsearch_options.icon_color fallback="#9E9E9E" %}
{% capture icon_color %}style="color:{{color}}"{% endcapture %}

{% include {{select_icon_size}} family=topsearch_options.icon_family size=topsearch_options.icon_size %}
{% assign icon_size = size %}


{% comment %} Main
-------------------------------------------------------------------------------- {% endcomment %}
{% if topsearch_options.enabled %}

  {% comment %} lunrSearch engine
  ------------------------------------------------------------------------------ {% endcomment %}
  {% if quick_search %}
    <!-- [INFO   ] [j1.modules.navigator.topsearch.proc   ] [ start processing: top search ] -->
    <div id="{{topsearch_id}}" class="top-search ml-4 mr-4" style="background-color: #eceff1 !important; display: none;">
    	<div class="input-group">
    	  <span class="input-group-addon"><i class="mdi mdi-magnify mdi-2x mb-2" style="color:#9E9E9E"></i></span>
    	  <input id="search-query" type="text" name="q" placeholder="{{placeholder}}" autocomplete="off" class="form-control">
    	  <span id="clear-topsearch" class="form-clear form-clear-searcher d-none" style="margin-top: 0.75rem"><i class="mdi mdi-format-clear mdi-2x" style="color:#9E9E9E"></i></span>
    	  <span class="input-group-addon close-search"><i class="mdi mdi-close mdi-3x" style="color:#9E9E9E"></i></span>
    	</div>

      <!-- [INFO   ] [j1.modules.navigator.topsearch.proc   ] [ place: results container ] -->
      <div class="search-results hide-scrollbar">
        <section id="search-results" style="display: none"></section>
      </div>

      <!-- [INFO   ] [j1.modules.navigator.topsearch.proc   ] [ place: mustache template ] -->
      {% raw %}
      <script id="search-results-template" type="text/mustache">
        <ul style="list-style: none; margin-left: .5rem; margin-right: 4.25rem">
        {{#docs}}
          <li>
            <h4 class="result-item"> <a href="{{url}}" target="_blank">{{title}} · {{tagline}}</a> </h4>
            <p class="result-item-text small text-muted mt-2 mb-0">
              <i class="mdi mdi-calendar-blank mdi-18px mr-1"></i>{{displaydate}}
            </p>
            <p class="result-item-text">{{description}}</p>
            <p class="result-item-text small text-muted mb-3">
              <i class="mdi mdi-tag-text-outline mdi-18px mr-1"></i><span class="sr-categories">{{#categories}} {{.}} · {{/categories}}</span>
              <i class="mdi mdi-tag mdi-18px mr-1 ml-2"></i><span class="sr-tags">{{#tags}} {{.}} · {{/tags}}</span>
            </p>
          </li>
        {{/docs}}
        <ul>
      </script>
      {% endraw %}

    {% endif %}
    </div>
    <!-- [INFO   ] [j1.modules.navigator.topsearch.proc   ] [ end processing: top search ] -->
{% endif %}