{#
// inputs:
// - location: string - Location where the search will be used, for exmaple: header.
// - classes:  string - CSS classes.
#}

{% set classes = classes|default('') %}

{% set categories = [
    {depth: 0, name: 'Instruments'},
    {depth: 1, name: 'Power Tools'},
    {depth: 1, name: 'Hand Tools'},
    {depth: 1, name: 'Machine Tools'},
    {depth: 1, name: 'Power Machinery'},
    {depth: 1, name: 'Measurement'},
    {depth: 1, name: 'Clothes and PPE'},
    {depth: 0, name: 'Electronics'},
    {depth: 0, name: 'Computers'},
    {depth: 0, name: 'Automotive'},
    {depth: 0, name: 'Furniture & Appliances'},
    {depth: 0, name: 'Music & Books'},
    {depth: 0, name: 'Health & Beauty'},
] %}

<div class="search search--location--{{ location }} {{ classes }}">
    <div class="search__body">
        <form class="search__form" action="">
            {% if location == 'header' %}
                <select
                    class="search__categories"
                    aria-label="Category"
                >
                    <option value="all">All Categories</option>
                    {% for category in categories %}
                        <option>
                            {%- for _ in range(0, 4 * category.depth) -%}
                                {%- if not loop.first %}&nbsp;{% endif -%}
                            {%- endfor -%}
                            {{- category.name -}}
                        </option>
                    {% endfor %}
                </select>
            {% endif %}
            <input class="search__input" name="search" placeholder="Search over 10,000 products" aria-label="Site search" type="text" autocomplete="off">
            <button class="search__button search__button--type--submit" type="submit">
                <svg width="20px" height="20px">
                    <use xlink:href="images/sprite.svg#search-20"></use>
                </svg>
            </button>
            {% if location == 'mobile-header' %}
                <button class="search__button search__button--type--close" type="button">
                    <svg width="20px" height="20px"><use xlink:href="images/sprite.svg#cross-20"></use></svg>
                </button>
            {% endif %}
            <div class="search__border"></div>
        </form>

        <div class="search__suggestions suggestions suggestions--location--{{ location }}"></div>
    </div>
</div>





