{{> components/header/cookie-header}}
<div class="banners market" data-banner-location="top">
    <div class="banner">
        <p>
            <!--span class="slogan">
                <strong>{{lang 'header.banners_top.slogan'}}</strong>
            </span>
            <span class="phone">
                <strong>{{lang 'header.banners_top.phone'}}</strong>
            </span-->
            <span class="slogan" style="
                display: inline-block;
                width: 80%;
                text-align: left;
            ">
                <strong>Due to continuing price increases and the shortages of components, Moxa has announced an upcoming 6% price increase on all product lines. The new pricing will take effect on any online orders after January 31, 2022. 
                    <a href="/notification/" style="text-decoration: underline;">Please see details here</a>.
                </strong>
            </span>
            <span class="phone" style="display: inline-block;">
                <strong>{{lang 'header.banners_top.phone'}}</strong>
            </span>            
            <span class="plist u-hidden">
                <strong><a href="{{urls.account.wishlists.all}}">{{lang 'header.banners_top.plist'}}</a></strong>
            </span>
        </p>
    </div>
</div>
<header class="amp-header  header" role="banner">
    <div class="onediv">
        <a href="#" class="mobileMenu-toggle" data-mobile-menu-toggle="menu">
            <span class="mobileMenu-toggleIcon">Toggle menu</span>
        </a>
        <div class="twodiv_1 logo_div">
                {{#if settings.store_logo.image}}
                <a href="{{urls.home}}" class="header-logo__link">
                <img class="header-logo-image" src="{{getImage settings.store_logo.image 'logo_size'}}" alt="{{settings.store_logo.title}}" title="{{settings.store_logo.title}}">
               </a>
            {{/if}}
        </div>
        <div class="twodiv_2">
            {{!--
            <input id="searchinput"  placeholder="Search Products 11" onkeydown="if(event.keyCode==13) {divonclick()}">
                <span style="cursor: pointer;"onclick="divonclick()" class="search-icon" ></span>
            </input>
            --}}

            <div class="navUser-item navUser-item--quicksearch quickSearch--desktop">
                <button class="navUser-action navUser-action--quickSearch"
                       type="button"
                       id="quick-search-expand"
                       data-search="quickSearch"
                       aria-controls="quickSearch"
                       aria-label="{{lang 'common.search'}}"
                       title="{{lang 'common.search'}}"
                    >
                        <i class="qs-icon"></i>
                </button>
                <div class="dropdown dropdown--quickSearch" id="quickSearch" aria-hidden="true" data-prevent-quick-search-close>
                    {{> components/common/quick-search name='nav-quick-search' class='qs--desktop'}}
                </div>
            </div>
        </div>
        <div class="twodiv_3">
            <ul class="navUser-section navUser-section--alt">
                <li class="navUser-item navUser-item--compare" >
                    <a class="navUser-action navUser-item--compare"
                        href="{{urls.compare}}"
                        data-compare-nav
                        aria-label="{{lang 'common.compare'}}"
                    >
                    <i class="iconfont iconxiangxi" style="font-size: 22px; display: flex; justify-content: center; align-items: center"></i>
                        <span class="text">{{lang 'common.compare'}} </span>
                        <span class="countPill countPill--positive countPill--alt">0</span>
                    </a>
                </li>
                <li class="navUser-item navUser-item--account">
                    <a href="javascript:void(0)" class="navUser-action">
                    <img class="navUser-icon" id="toggle-account-dropdown" src="{{cdn 'assets/img/header/account-icon.png'}}" alt="Account">
                    </a>
                    <div class="account-dropdown {{#if customer}}logged_in{{else}}not_logged_in{{/if}}">
                        {{#if customer}}
                            <a class="navUser-action"
                            style="display: block; padding-bottom: 5px;"
                                href="{{urls.account.index}}"
                                aria-label="{{lang 'common.account'}}"
                            >
                                {{lang 'common.account'}}
                            </a>
                            <a class="navUser-action"
                            style="display: block; padding-bottom: 5px;"
                                href="{{urls.auth.logout}}"
                                aria-label="{{lang 'common.logout'}}"
                            >
                                {{lang 'common.logout'}}
                            </a>
                        {{else}}
                            <a class="navUser-action"
                                href="{{urls.auth.login}}"
                                aria-label="{{lang 'common.login'}}"
                            >
                                {{lang 'common.login'}}
                            </a>
                            {{#if settings.account_creation_enabled}}
                                <span class="navUser-or">{{lang 'common.or'}}</span>
                                <a class="navUser-action"
                                    href="{{urls.auth.create_account}}"
                                    aria-label="{{lang 'common.sign_up'}}"
                                >
                                    {{lang 'common.sign_up'}}
                                </a>
                            {{/if}}
                        {{/if}}
                    </div>
                </li>
                <li class="navUser-item navUser-item--cart">
                    <a class="navUser-action"
                        data-cart-preview
                        data-dropdown="cart-preview-dropdown"
                        data-options="align:right"
                        href="{{urls.cart}}"
                        aria-label="{{lang 'cart.nav_aria_label'}}"
                    >
                        <!-- <span class="navUser-item-cartLabel">{{lang 'common.cart'}}</span> -->
                        <img class="navUser-icon" src="{{cdn 'assets/img/header/cart-icon.png'}}" alt="cart">
                        <span class="countPill cart-quantity"></span>
                    </a>

                    <div class="dropdown-menu" id="cart-preview-dropdown" data-dropdown-content aria-hidden="true"></div>
                </li>
            </ul>
        </div>
    </div>

    <div class="navPages-container" id = "menu" data-menu>
        <div class="twodiv_2_1">

             <div id="demo" class="box demo1">
    			<ul class="tab_menu">
                    {{#each pages}}
                        {{#if  name '===' '_Products'}}
                        <li menu-for="products"> <a   style="color: white;padding: 8px;text-transform: capitalize;" class="navPages-action{{#if name '==' ../page.title}} activePage{{/if}}"
                            aria-label="{{name}}" >
                         {{#replace '_'   name}}{{/replace}}
                         </a></li>
                         {{else if  name '===' '_Solutions'}}
                         <li menu-for="solutions"> <a style="color: white;padding: 8px;text-transform: capitalize;" class="navPages-action{{#if name '==' ../page.title}} activePage{{/if}}"
                            aria-label="{{name}}" >
                         {{#replace '_'   name}}{{/replace}}
                         </a></li>
                         {{else if  name '===' 'Blog'}}
                         {{else if name '===' 'Contact'}}
                         <li menu-for="{{toLowerCase name}}" class="no-dropdown" >
                            <a href="{{url}}"style="color: white;padding: 8px;text-transform: capitalize;" class="navPages-action{{#if name '==' ../page.title}} activePage{{/if}}" aria-label="{{name}}">{{name}}</a>
                         </li>
                         {{else}}
                         <li menu-for="{{toLowerCase name}}"> <a  href="javascript:void(0)" style="color: white;padding: 8px;text-transform: capitalize;" class="navPages-action{{#if name '==' ../page.title}} activePage{{/if}}"
                            aria-label="{{name}}">
                            {{name}}
                         </a></li>
                        {{/if}}
                    {{/each}}
    			</ul>
                <div class="tab_box" headerold>
                    <div class="tab_box-container">
                        <div class="hide productdiv tabdiv products-item">
                            {{> components/common/header/product  }}
                            <div class="close-dorpdown-menu" style="height: 20px;">
                                <i aria-hidden="true" class="icon">
                                    <svg>
                                        <use xlink:href="#icon-chevron-down"></use>
                                    </svg>
                                </i>
                            </div>
                        </div>

                        <div class="hide productdiv tabdiv solutions-item">
                            {{> components/common/header/solutions  }}
                            <div class="close-dorpdown-menu" style="height: 20px;">
                                <i aria-hidden="true" class="icon">
                                    <svg>
                                        <use xlink:href="#icon-chevron-down"></use>
                                    </svg>
                                </i>
                            </div>
                        </div>

                        <div class="hide productdiv tabdiv about-item" >
                            <div>
                            {{> components/common/header/about  }}
                            </div>
                            <div class="close-dorpdown-menu" style="height: 20px;">
                                <i aria-hidden="true" class="icon">
                                    <svg>
                                        <use xlink:href="#icon-chevron-down"></use>
                                    </svg>
                                </i>
                            </div>
                        </div>

                        <div class="hide productdiv tabdiv support-item" >
                            <div>
                            {{> components/common/header/support  }}
                            </div>
                            <div class="close-dorpdown-menu" style="height: 20px;">
                                <i aria-hidden="true" class="icon">
                                    <svg>
                                        <use xlink:href="#icon-chevron-down"></use>
                                    </svg>
                                </i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mobile_div_menu">
            <div class="twodiv_2">
                {{!--
                <input id="searchinputmobile"  placeholder="Search Products" onkeydown="if(event.keyCode==13) {divonclickmobile()}">
                    <span style="cursor: pointer;"onclick="divonclickmobile()" class="search-icon" ></span>
                </input>
                --}}
                <div class="navUser-item--quicksearch">
                    <div class="dropdown dropdown--quickSearch" id="quickSearch" aria-hidden="true" data-prevent-quick-search-close>
                        {{> components/common/quick-search name='nav-quick-search' class='qs--mobile'}}
                    </div>
                </div>
            </div>
            <div class="mobile-list">
                    <div onclick="btn_click(this)" url_text="{{urls.account.index}}" class="item account phone_account phone_account_default">
                        <span class="micon">
                            <i style="font-size: 32px;" class="iconfont iconyonghu"></i>
                        </span>
                        <div class="text">
                            <span>My Account</span>
                        </div>
                    </div>
                    <div onclick="btn_click(this)" url_text="{{urls.account.wishlists.all}}" class="item xinyuandan phone_account phone_account_default">
                        <span class="micon">
                            <i style="font-size: 32px;" class="iconfont iconshoucang-solid"></i>
                        </span>
                        <div class="text">
                            <span>Project List</span>
                        </div>
                    </div>
                    <div onclick="btn_click(this)" class="item phone phone_account phone_account_default">
                        <span class="micon">
                            <i style="font-size: 30px;" class="iconfont iconphone_header"></i>
                        </span>
                        <div class="text">
                            <span>888.908.3330</span>
                        </div>
                    </div>
            </div>
            {{> components/common/navigation-menu-new}}
        </div>
    </div>
    {{!--
    <div class="dropdown dropdown--quickSearch" id="quickSearch" aria-hidden="true" data-prevent-quick-search-close>
        {{> components/common/quick-search name='nav-quick-search'}}
    </div>
    --}}
</header>
<style>
.phone_account_chiose{
    color:#008787;
}
.phone_account_default{
    color:#414042;
}
</style>
<!-- <script src="{{cdn 'assets/js/theme/global/jquery-1.4.2.min.js'}}"></script> -->

<script src="{{cdn 'assets/js/theme/global/jquery.tabs.js'}}"></script>

<script src="{{cdn 'assets/js/theme/global/jquery.lazyload.js'}}"></script>
<script>

    function btn_click(obj){
        $(".phone_account").removeClass("phone_account_chiose");
        $(".phone_account").addClass("phone_account_default");
        $(obj).removeClass("phone_account_default");
        $(obj).addClass("phone_account_chiose");
        if($(obj).hasClass("phone")){
            var text = $(obj).find("div").children().text();
            window.location.href = "tel:+"+text;
        } else {
            var url = $(obj).attr("url_text");
            window.location.href = url;
        }
    }

    function divonclick(){
        window.location.href="/search.php?search_query="+$("#searchinput").val();
    }
    function divonclickmobile(){
        window.location.href="/search.php?search_query="+$("#searchinputmobile").val();
    }

    $('.close-dorpdown-menu').click(function(){
        $('.tab_box .productdiv').addClass('hide');
        $('.tab_menu>li').removeClass('current');
    })
    var menuTimeout;
    $('.tab_menu>li').mouseenter(function(){
        var par = $(this).attr('menu-for')
        $('.tab_menu>li').removeClass('current');
        $('.productdiv').addClass('hide');
        $(this).addClass('current');
        menuTimeout = setTimeout(function(){

            $(`.productdiv.${par}-item`).removeClass('hide');
        },500)
    }).mouseleave(function(){
        clearTimeout(menuTimeout)
    })
    $('.header').mouseleave(function(){
        $('.tab_menu>li').removeClass('current');
        $('.productdiv').addClass('hide');
    })
</script>

{{#each categories}}
    {{#if id '===' '441'}}
        {{#each children}}
            <script type="text/javascript">
                fetch('/graphql', {
                    method: 'POST',
                    credentials: 'same-origin',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer {{ ../../settings.storefront_api.token }}'
                    },
                    body: JSON.stringify({
                        query: `
                        query solutionmenu {
                        site {
                        route(path: "{{url}}") {
                            node {
                            ... on Category {
                                entityId
                                name
                                path
                                description
                                defaultImage {
                                ...ImageFields
                                }
                            }
                            }
                        }
                        }
                    }
                    fragment ImageFields on Image {
                        url320wide: url(width: 320)
                        url1280wide: url(width: 1280)
                    }
                        `
                    }),
                })
                .then(res => res.json())
                .then(json => {
                    var solution = json.data.site.route.node;
                    var sHtml = '';
                    var sId = solution.entityId;
                    var target = `.solution-menu-dropdown #solution_${sId}`
                    var targetMobile = `.navPage-subMenu-list .solution-menu-dropdown #solution_${sId}`
                    //var img = solution.defaultImage.url1280wide;
                    var imgThumb = '';
                    var imgFull = ''
                    if(solution.defaultImage != null){
                        imgThumb = solution.defaultImage.url320wide;
                        imgFull = solution.defaultImage.url1280wide;
                    }
                    var sImage = `<img class="lazyload" src="${imgThumb}" data-src="${imgFull}">`;
                    var desc = '';
                    if(solution.description != null) {
                        desc = solution.description
                    }

                    $(`${target} .twodiv`).html(sImage);
                    $(`${target} .solution-content`).html(desc);
                    $(targetMobile).find('.solution-image').hide();
                    $(targetMobile).find('.solution-content *').css({
                        "font-size": "15px",
                        "font-weight": "700",
                        "text-transform": "uppercase"

                    })

                    if($(`${target} a`).attr('href') != undefined) {
                        $(`${target} a`).attr('href', $(`${target} a`).attr('href').replace('%%GLOBAL_ShopPathSSL%%/','/'))
                    }
                })
             </script>
        {{/each}}
    {{/if}}
{{/each}}