{% extends '@nucleus/partials/particle.html.twig' %}

{% block stylesheets %}
<style>
{% if particle.particle_title_color or particle.particle_title_fontsize %}
#{{ id }}.g5-particle-title { {% if particle.particle_title_color %}color: {{ particle.particle_title_color }};{% endif %}{% if particle.particle_title_fontsize %}font-size: {{particle.particle_title_fontsize}}px;{% endif %} }
{% endif %}
{% if particle.padding %}
#{{id}} .tm-search-inner {padding:{{particle.padding}}; }
{% endif %}
#{{id}} .jl-search input{box-shadow:none;border-radius:0}
{% if particle.form_style == 'blank' %}
.tm-search .jl-form-blank{background:0 0!important;border-color:transparent!important}
.tm-search .jl-form-blank:focus{border-color:#e5e5e5!important;border-style:dashed!important}
{% endif %}
{% if particle.form_style == 'danger' %}
.tm-search .jl-form-danger,
.tm-search .jl-form-danger:focus{color:#f0506e;border-color:#f0506e!important}
{% endif %}
{% if particle.form_style == 'success' %}
.tm-search .jl-form-success,
.tm-search .jl-form-success:focus{color:#32d296;border-color:#32d296!important}
{% endif %}
{% if particle.search_lineheight %}
#{{id}}-particle .tm-search-inner {line-height:{{particle.search_lineheight}}px; }
{% endif %}
{% if particle.search_style == 'modal' %}
.jl-modal-dialog .jl-search input[type=search]{border:none;box-shadow:none}
{% endif %}
#{{id}} input.jl-search-input {margin-bottom:0;}
{% if particle.toggle_color %}
#{{id}} .jl-search-toggle {color: {{ particle.toggle_color }};}
{% endif %}
{% if particle.toggle_hover_color %}
#{{id}} .jl-search-toggle:focus, #{{id}} .jl-search-toggle:hover {color: {{ particle.toggle_hover_color }};}
{% endif %}
</style>
{% endblock %}

{# Set Max-Width Content #}
{% set content_maxwidth %}
{% if particle.g_maxwidth != 'inherit' %} jl-width-{{particle.g_maxwidth}}{% if particle.g_maxwidth_breakpoint != 'always' %}@{{particle.g_maxwidth_breakpoint}}{% endif %}{% if particle.g_maxwidth_alignment == 'left' %}{% elseif particle.g_maxwidth_alignment == 'center' %} jl-margin-auto{% else %} jl-margin-auto-left{% endif %}{% endif %}
{% endset %}

{# Set Particle Alignment #}
{% set particle_alignment %}
{% if particle.align != 'inherit' %} jl-text-{{particle.align|e}}{% if particle.breakpoint != 'always' %}@{{particle.breakpoint|e}}{% endif %}{% endif %}{% if particle.align != 'inherit' and particle.breakpoint != 'always' %}{% if particle.fallback != 'inherit' %} jl-text-{{particle.fallback|e}}{% endif %}{% endif %}
{% endset %}

{# set Particle Title Style #}
{% set particle_title_style %}
{% if particle.particle_title %}
<{{particle.particle_title_element|e}} id="{{ id }}" class="g5-particle-title{% if particle.particle_title_align != 'inherit' %} jl-text-{{particle.particle_title_align|e}}{% endif %}{% if particle.particle_predefined_color != 'default' %} jl-text-{{particle.particle_predefined_color|e}}{% endif %}{% if particle.particle_title_style != 'default' %} jl-{{particle.particle_title_style|e}}{% endif %}{% if particle.particle_title_decoration != 'none' %} jl-heading-{{particle.particle_title_decoration|e}}{% endif %}">
{% if particle.particle_title_decoration == 'line' %} <span>{{particle.particle_title|raw}}</span>
{% else %} {{particle.particle_title|raw}}
{% endif %}
</{{particle.particle_title_element|e}}>
{% endif %}
{% endset %}

{# set Animation #}
{% set animation %}
{% if particle.animation != 'inherit' %} jl-scrollspy="cls: jl-animation-{{particle.animation|e}};{% if particle.animation_repeat == 'enabled' %} repeat: true;{% endif %}{% if particle.animation_delay %} delay: {{particle.animation_delay|e}};{% endif %}"{% endif %}
{% endset %}

{% block particle %}
{% if particle.enabled %}
{{particle_title_style}}
<div id="{{ id }}" class="tm-search{{content_maxwidth}}{% if particle.class %} {{ particle.class }}{% endif %}{{particle_alignment}}{% if particle.margin == 'inherit' %}{% elseif particle.margin == 'default' %} jl-margin{% else %} jl-margin-{{particle.margin|e}}{% endif %}{% if particle.visibility != 'inherit' %} jl-visible@{{particle.visibility|e}}{% endif %}"{{animation}}>
  <div class="tm-search-inner{% if particle.search_text_color != 'default' %} jl-{{particle.search_text_color}}{% endif %}">

{% if gantry.platform.name == "joomla" %}

  {% if particle.search_style == 'default' %}
  <form class="jl-search jl-width-1-1{% if particle.large_form == '1' %} jl-search-large{% else %} jl-search-default{% endif %}" action="{{ gantry.siteUrl() }}/index.php/component/search/" method="post">
  {% if particle.search_icon != 'none'%}
  <button jl-search-icon class="{% if particle.search_icon == 'right'%} jl-search-icon-flip{% endif %}" title="{{particle.title|default('Search')}}"></button>
  {% endif %}
  <input class="jl-search-input{% if particle.form_style != 'default' %} jl-form-{{particle.form_style}}{% endif %}" type="search" name="searchword" placeholder="{{ particle.placeholder|default('Search...') }}" size="30" maxlength="200" value="">
  </form>

{% elseif particle.search_style == 'modal' %}

<a class="jl-search-toggle jl-search-icon jl-icon" href="#js-search-{{id}}" jl-search-icon jl-toggle></a>

<div id="js-search-{{id}}" class="jl-modal-full jl-modal" jl-modal>
  <div class="jl-modal-dialog jl-flex jl-flex-center jl-flex-middle" jl-height-viewport>
    <button class="jl-modal-close-full jl-close-large" type="button" jl-close></button>
    <form class="jl-search{% if particle.large_form == '1' %} jl-search-large{% endif %}" action="{{ gantry.siteUrl() }}/index.php/component/search/" method="post">
      <input class="jl-search-input jl-text-center{% if particle.form_style != 'default' %} jl-form-{{particle.form_style}}{% endif %}" type="search" name="searchword" placeholder="{{ particle.placeholder|default('Search...') }}" size="30" maxlength="200" value="" autofocus>
    </form>
  </div>
</div>

{% elseif particle.search_style == 'drop' %}
<a jl-search-icon href="#"></a>
<div jl-drop="mode: {{particle.drop_mode}}; pos: {{particle.drop_position|e}}; offset: 0">
  <form class="jl-search jl-search-navbar jl-width-1-1{% if particle.large_form == '1' %} jl-search-large{% endif %}" action="{{ gantry.siteUrl() }}/index.php/component/search/" method="post">
    <input class="jl-search-input jl-width-xxlarge{% if particle.form_style != 'default' %} jl-form-{{particle.form_style}}{% endif %}" type="search" name="searchword" placeholder="{{ particle.placeholder|default('Search...') }}" size="30" maxlength="200" value="">
  </form>
</div>

{% endif %}


{% elseif gantry.platform.name == "wordpress"  %}

{% if particle.search_style == 'default' %}

<form class="jl-search jl-width-1-1{% if particle.large_form == '1' %} jl-search-large{% else %} jl-search-default{% endif %}" action="{{ gantry.siteUrl() }}" method="get" role="search">
{% if particle.search_icon != 'none'%}
<button jl-search-icon class="{% if particle.search_icon == 'right'%} jl-search-icon-flip{% endif %}" title="{{particle.title|default('Search')}}"></button>
{% endif %}
<input class="jl-search-input{% if particle.form_style != 'default' %} jl-form-{{particle.form_style}}{% endif %}" type="search" name="s" placeholder="{{ particle.placeholder|default('Search...') }}" size="30" maxlength="200" value="">
</form>

{% elseif particle.search_style == 'modal' %}

<a class="jl-search-toggle jl-search-icon jl-icon" href="#js-search-{{id}}" jl-search-icon jl-toggle></a>
<div id="js-search-{{id}}" class="jl-modal-full jl-modal" jl-modal>
<div class="jl-modal-dialog jl-flex jl-flex-center jl-flex-middle" jl-height-viewport>
  <button class="jl-modal-close-full jl-close-large" type="button" jl-close></button>
  <form class="jl-search{% if particle.large_form == '1' %} jl-search-large{% endif %}" action="{{ gantry.siteUrl() }}" method="get" role="search">
    <input class="jl-search-input jl-text-center{% if particle.form_style != 'default' %} jl-form-{{particle.form_style}}{% endif %}" type="search" name="s" placeholder="{{ particle.placeholder|default('Search...') }}" size="30" maxlength="200" value="" autofocus>
  </form>
</div>
</div>

{% elseif particle.search_style == 'drop' %}

<a jl-search-icon href="#"></a>

<div jl-drop="mode: {{particle.drop_mode}}; pos: {{particle.drop_position|e}}; offset: 0">
<form class="jl-search jl-search-navbar jl-width-1-1{% if particle.large_form == '1' %} jl-search-large{% endif %}" action="{{ gantry.siteUrl() }}" method="get" role="search">
  <input class="jl-search-input jl-width-xxlarge{% if particle.form_style != 'default' %} jl-form-{{particle.form_style}}{% endif %}" type="search" name="s" placeholder="{{ particle.placeholder|default('Search...') }}" size="30" maxlength="200" value="">
</form>
</div>

{% endif %}
{% elseif gantry.platform.name == "grav"  %}

{% if particle.search_style == 'default' %}

<form class="jl-search jl-width-1-1{% if particle.large_form == '1' %} jl-search-large{% else %} jl-search-default{% endif %}" name="search" onSubmit="return validateSearch(event);" data-simplesearch-form>
    {% if particle.search_icon != 'none'%}
    <button jl-search-icon class="{% if particle.search_icon == 'right'%} jl-search-icon-flip{% endif %}" title="{{particle.title|default('Search')}}"></button>
    {% endif %}                
    <input
        name="searchfield"
        class="jl-search-input{% if particle.form_style != 'default' %} jl-form-{{particle.form_style}}{% endif %}"
        type="text"
        required
        value=""
        placeholder="{{ particle.placeholder|default('') }}"
        data-search-separator="{{ config.system.param_sep }}"
        data-search-input="{{ gantry.siteUrl() }}{{ config.plugins.simplesearch.route == '@self' ? '' : (config.plugins.simplesearch.route == '/' ? '' : config.plugins.simplesearch.route) }}/query"
        title="{{particle.title|default('Search')}}"
    />
</form>

{% elseif particle.search_style == 'modal' %}
<a class="jl-search-icon jl-icon" href="#js-search-{{id}}" jl-search-icon jl-toggle></a>
<div id="js-search-{{id}}" class="jl-modal-full jl-modal" jl-modal>
<div class="jl-modal-dialog jl-flex jl-flex-center jl-flex-middle" jl-height-viewport>
  <button class="jl-modal-close-full jl-close-large" type="button" jl-close></button>
  <form class="jl-search{% if particle.large_form == '1' %} jl-search-large{% endif %}" name="search" onSubmit="return validateSearch(event);" data-simplesearch-form>               
      <input
          name="searchfield"
          class="jl-search-input jl-text-center{% if particle.form_style != 'default' %} jl-form-{{particle.form_style}}{% endif %}"
          type="text"
          required
          value=""
          placeholder="{{ particle.placeholder|default('Search...') }}"
          data-search-separator="{{ config.system.param_sep }}"
          data-search-input="{{ gantry.siteUrl() }}{{ config.plugins.simplesearch.route == '@self' ? '' : (config.plugins.simplesearch.route == '/' ? '' : config.plugins.simplesearch.route) }}/query"
          title="{{particle.title|default('Search')}}"
      />
  </form>  
</div>
</div>

{% elseif particle.search_style == 'drop' %}
<a jl-search-icon href="#"></a>
<div jl-drop="mode: {{particle.drop_mode}}; pos: {{particle.drop_position|e}}; offset: 0">
<form class="jl-search jl-search-navbar jl-width-1-1{% if particle.large_form == '1' %} jl-search-large{% endif %}" action="{{ gantry.siteUrl() }}/query" method="post">
  <input class="jl-search-input jl-width-xxlarge{% if particle.form_style != 'default' %} jl-form-{{particle.form_style}}{% endif %}" type="search" name="s" placeholder="{{ particle.placeholder|default('Search...') }}" value="">
</form>
</div>

{% endif %}
{% endif  %}
</div>
</div>
{% endif  %}
{% endblock %}

{% block javascript_footer %}
    {% if gantry.platform.name == "grav" %}
    {% do gantry.load('jquery') %}
    {% do gantry.load('lightcase.init') %}     
        <script>
            {% set min_chars = config.plugins.simplesearch.min_query_length|default('3') %}
            function validateSearch(event) {
                var input = document.forms["search"]["searchfield"];
                var location = input.getAttribute('data-search-input');
                var separator = input.getAttribute('data-search-separator');
                if (input.value.length >= {{ min_chars }}) {
                    event.preventDefault();
                    window.location.href = location + separator + input.value;
                } else {
                    event.preventDefault();
                }
            }
        </script>
    {% endif %}    
{% endblock %}