{if $theme_settings.header_links == 'shop-pages'}
    {$shop_pages = []} {* pages were shown in the core layout index.html template already *}
{else}
    {$shop_pages = $wa->shop->pages()}
{/if}


    {if isset($category)}
        {$selected_category=$category.id}
    {else}
        {$selected_category=null}
    {/if}

    {$categories = $wa->shop->categories(0, null, true)}

    {$tagcloud = $wa->shop->tags()}

    <!-- plugin hook: 'frontend_nav' -->
    {* @event frontend_nav.%plugin_id% *}
    {$_hook_frontend_sidebar_section = false}
    {foreach $frontend_nav as $plugin => $output}
        {if !empty($output)}
            {$_hook_frontend_sidebar_section = true}
        {/if}
    {/foreach}

    {if $theme_settings.category_nav_mode == 'dropdown' || $wa->isMobile()}
        <ul class="pages flyout-nav is-dropdown-nav">

            {* DROPDOWN "Shop by Department" navigation *}

            <li class="collapsible category-btn-item">
                <a href="javascript:void(0);" class="chevron down button nowrap">[`Shop by Department`]</a>
                <div class="flyout">
                    <div class="container">
                        {if count($categories)}
                            <div class="departments">
                                {wa_print_tree tree=$categories unfolded=true collapsible_class='collapsible' class="menu-v" elem ='<a href=":url" title=":name">:name</a>'}
                            </div>
                        {else}
                            <p class="align-center gray">
                                <br><br>
                                [`You did not create any product categories yet.`]
                            </p>
                        {/if}
                    </div>
                </div>
            </li>
        </ul>
    {/if}

    {if $theme_settings.category_nav_mode == 'inline' && !$wa->isMobile()}
        <ul class="pages flyout-nav is-inline-nav">

            {* INLINE category navigation *}

            {foreach $categories as $cat}
                {if count($cat.childs)}
                    <li class="collapsible">
                        <a href="{$cat.url}" class="chevron down nowrap">{$cat.name}</a>
                        <div class="flyout">
                            <div class="container">
                                {wa_print_tree tree=$cat.childs unfolded=true collapsible_class='collapsible' class="menu-v" elem ='<a href=":url" title=":name">:name</a>'}
                            </div>
                        </div>
                    </li>
                {else}
                    <li>
                        <a href="{$cat.url}">{$cat.name}</a>
                    </li>
                {/if}
            {/foreach}

        </ul>
    {/if}

    {if $theme_settings.show_header_search}
        <!-- product search -->
        <form method="get" action="{$wa->getUrl('shop/frontend/search')}" class="search wa-flex-fill">
            <div class="search-wrapper">
                <input id="search" type="search" name="query" {if !empty($query)}value="{$query}"{/if} placeholder="[s`Find products`]">
                <button type="submit">
                    <svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMinYMin">
                        <use xlink:href="#img-find"></use>
                    </svg>
                </button>
                {* <span class="search-sample">{sprintf('[`E.g. %s`]', '<a href="'|cat:$wa_app_url:"search/?query=productname":'">productname</a>')} *}
            </div>
        </form>
    {/if}

    {if $theme_settings.category_nav_mode == 'inline' && $wa->isMobile()}
        <ul class="pages flyout-nav is-inline-nav">

            {* INLINE category navigation *}

            {foreach $categories as $cat}
                {if count($cat.childs)}
                    <li class="collapsible">
                        <a href="{$cat.url}" class="chevron down nowrap">{$cat.name}</a>
                        <div class="flyout">
                            <div class="container">
                                {wa_print_tree tree=$cat.childs unfolded=true collapsible_class='collapsible' class="menu-v" elem ='<a href=":url" title=":name">:name</a>'}
                            </div>
                        </div>
                    </li>
                {else}
                    <li>
                        <a href="{$cat.url}">{$cat.name}</a>
                    </li>
                {/if}
            {/foreach}

        </ul>
    {/if}

    {if $theme_settings.category_nav_mode == 'dropdown'}
        <ul class="pages flyout-nav overflow-hidden is-pages">
            {if $tagcloud}
                {* TAGS *}
                <li class="collapsible">
                    <a href="javascript:void(0);" class="chevron down nowrap">[`Tags`]</a>
                    <div class="flyout">
                        <div class="container">
                            <div class="tags block align-center">
                                {foreach $tagcloud as $tag}
                                    <a href="{$wa_app_url}tag/{$tag.uri_name}/" style="font-size: {$tag.size}%; opacity: {$tag.opacity}">{$tag.name|escape}</a>
                                {/foreach}
                            </div>
                        </div>
                    </div>
                </li>
            {/if}

            {if $_hook_frontend_sidebar_section}

                {* PLUGINS @ frontend_nav *}

                {foreach $frontend_nav as $_key => $_}
                    <li class="collapsible">
                        <a href="javascript:void(0);" onClick="return false" class="chevron down nowrap">
                            {if substr($_key, -7) == '-plugin'}{$wa->pluginName(substr($_key, 0, -7))}{else}[`More`]{/if}
                        </a>
                        <div class="flyout">
                            <div class="container">
                                {$_}
                            </div>
                        </div>
                    </li>
                {/foreach}

                {foreach $frontend_nav_aux as $_key => $_}
                    <li class="collapsible">
                        <a href="javascript:void(0);" onClick="return false" class="chevron down nowrap">
                            {if substr($_key, -7) == '-plugin'}{$wa->pluginName(substr($_key, 0, -7))}{else}[`More`]{/if}
                        </a>
                        <div class="flyout">
                            <div class="container">
                                {$_}
                            </div>
                        </div>
                    </li>
                {/foreach}
            {/if}

            {if $shop_pages}
            {* PAGES *}

            {foreach $shop_pages as $page}
                <li{if strlen($page.url)>1 && $wa->currentUrl()|strstr:$page.url} class="selected"{/if}><a href="{$page.url}">{$page.name}</a></li>
            {/foreach}
            {/if}
        </ul>
    {/if}