{% extends "layout/base.html.twig" %}

{% block base_style %}
{# Apex theme #}
    {{ parent() }}

    {% d3modcfgcheck modid="d3_extsearch" %}{% endd3modcfgcheck %}

    {% if mod_d3_extsearch %}
        {% set sCssName = "out/src/css/d3extsearch_"|cat(oModCfg_d3_extsearch.getMappedThemeId())|cat(".min.css") %}

        {% if sAboveTheFoldCssFile %}
            {% include sAboveTheFoldCssFile with {assign: "atfCss"} %}
        {% endif %}

        {{ style({ include: oViewConf.getModuleUrl('d3_extsearch', sCssName) }) }}
        {% if atfCss %}<style>{{ atfCss }}</style>{% endif %}

        {% if blSearchPluginInstall == '1' and sSearchPluginURL %}
            <link rel="search" type="application/opensearchdescription+xml" title="{{ oxcmp_shop.oxshops__oxname.value }}" href="{{ sSearchPluginURL }}" />
        {% endif %}

        <script type="application/ld+json">
            {
                "@context": "http://schema.org",
                "@type": "WebSite",
                "url": "{{ oViewConf.getHomeLink() }}",
                "potentialAction": {
                    "@type": "SearchAction",
                    "target": "{{ oViewConf.getSelfLink()|add_url_parameters("cl=search")|add_url_parameters("searchparam={search_term_string}")}}]",
                    "query-input": "required name=search_term_string"
                }
            }
        </script>
    {% endif %}

{% endblock %}

{% block base_js %}
{# Wave + Apex theme #}
    {{ parent() }}

    {% d3modcfgcheck modid="d3_extsearch" %}{% endd3modcfgcheck %}

    {% if mod_d3_extsearch and false == oModCfg_d3_extsearch.isThemeIdMappedTo('mobile') %}
        {% if blUseSuggestSearch %}
            {% apply spaceless %}
                {% block d3_extsearch_js__suggest %}
                    {% block d3_extsearch_js__suggest_jsfile %}
                        {{ script({ include: oViewConf.getModuleUrl('d3_extsearch', 'out/src/js/apex/d3extsearch.min.js'), dynamic: __oxid_include_dynamic }) }}
                    {% endblock %}

                    {% block d3_extsearch_js__suggest_jssuggestcall %}
                        {% set sCharSet = "charset"|translate %}
                        {% set d3script %}{% apply spaceless %}
                            document.addEventListener("DOMContentLoaded", () => {
                                try {
                                    var suggestSearch = new d3ExtsearchSuggest({
                                        sWaitMessage: '{% apply spaceless %}{{ sD3QSWaitMessage }}{% endapply %}',
                                        sParentThemeId: '{{ oModCfg_d3_extsearch.getReferenceThemeId() }}',
                                        sRequestUrl: '{{ oViewConf.getSelfLink()|add_url_parameters("cl=d3_extsearch_response")|cat("&amp;shp=")|cat(oViewConf.getActiveShopId())|cat("&")|raw }}',
                                        iMinCharCount: 3
                                    });
                                } catch (e) {
                                    {# don't use console.error because of undefined break in PhantomJS while generating critical css #}
                                    console.error(e.message);
                                }
                            });
                        {% endapply %}{% endset %}
                        {{ script({ add: d3script.__toString(), dynamic: __oxid_include_dynamic }) }}
                    {% endblock %}

                    {% if not blD3EmptySearch %}
                        {% set sSBDefault = "D3_EXTSEARCH_FIELD_NOTICE"|translate %}
                        {{ script({ add: "var sD3SearchBoxDefault = '"|cat(sSBDefault)|cat("';"), dynamic: __oxid_include_dynamic }) }}
                    {% else %}
                        {{ script({ add: "var sD3SearchBoxDefault = '';", dynamic: __oxid_include_dynamic }) }}
                    {% endif %}
                {% endblock %}
            {% endapply %}
        {% endif %}

        {% if blD3ShowIAS %}
            {% apply spaceless %}
                {% block d3_extsearch_js__ias %}
                    {% block d3_extsearch_js__ias_jsfile %}
                        {{ script({ include: oViewConf.getModuleUrl('d3_extsearch', 'out/src/js/d3extsearch_ias.min.js'), dynamic: __oxid_include_dynamic }) }}
                    {% endblock %}

                    {% block d3_extsearch_js__suggest_jsiascall %}
                        {% set sCharSet = "charset"|translate %}
                        {% set d3script %}{% apply spaceless %}
                            $(document).ready(function () {
                                $(document).d3extsearchias();
                            });
                        {% endapply %}{% endset %}
                        {{ script({ add: d3script.__toString(), dynamic: __oxid_include_dynamic }) }}
                    {% endblock %}

                    <div id="IAS_box" class="IAS_box IAS_box_{{ oModCfg_d3_extsearch.getParentThemeId() }}">
                        <div class="headline">
                            <div class="closebtn" id="IAS_closebtn">X</div>
                            <label for="IAS_input">{{ translate({ ident: "D3_EXTSEARCH_IAS_SEARCH" }) }}</label>
                        </div>
                        <form action="{{ oViewConf.getBaseDir() }}index.php" method="get" onSubmit="d3_extsearch_popup.popup.load();">
                            <div>
                                {{ oViewConf.getHiddenSid() }}
                                <input type="hidden" name="cl" value="search">
                                <input id="IAS_input" type="text" size="30" value="" name="searchparam">
                                <span class="btn">
                                    <input type="submit" class="btn" value="{{ translate({ ident: "D3_EXTSEARCH_IAS_STARTSEARCH" }) }}">
                                </span>
                            </div>
                        </form>
                    </div>
                {% endblock %}
            {% endapply %}
        {% endif %}

        {% if blD3ShowSearchPopup %}
            {% block d3_extsearch_js__popup %}
                <div id="d3extsearch_message" class="d3extsearch_popup">
                    <strong style="text-align: center;">{{ translate({ ident: "D3_EXTSEARCH_SEARCHINPROGRESS" }) }}</strong>
                </div>

                <script type="text/javascript">
                    let d3_extsearch_popup = {
                        // Popups
                        popup: {
                            load : function(){
                                let id = 'd3extsearch_message';
                                let pcl = 'd3extsearch_popup load on';
                                let mcl = 'on';
                                let _mk = document.getElementById('d3extsearch_mask');
                                let _el = document.getElementById(id);
                                if(_mk && _el) {
                                    _mk.className = mcl;
                                    _el.className = pcl;
                                }
                            }
                        }
                    };
                </script>

                <div id="d3extsearch_mask"></div>
            {% endblock %}
        {% else %}
            {% block d3_extsearch_js__nopopup %}
                <script type="text/javascript">
                    let d3_extsearch_popup = {
                        popup: {
                            load : function(){ }
                        }
                    };
                </script>
            {% endblock %}
        {% endif %}
    {% endif %}
{% endblock %}