{{~ it : MainItem }}

    <li class="{{= MainItem.CssClass }}" data-id="{{= MainItem.CategoryID }}" data-element="topCategory.root">
        <section>
            {{? MainItem.IsSeperator }}
                <button aria-controls="drop_{{= MainItem.CategoryID}}" aria-expanded="false" data-href="{{= MainItem.AutoUrl }}" class="header {{= MainItem.Children.length > 0 ? 'has_children' : ''}}" data-element="topCategoryLink" {{= (MainItem.LinkRedirect ? 'data-redirect' : '') }}>{{= MainItem.Name }}</button>
            {{??}}
                <a href="{{= MainItem.AutoUrl }}" class="{{= MainItem.Children.length > 0 ? 'has_children' : ''}}" data-element="topCategoryLink" {{= (MainItem.LinkRedirect ? 'data-redirect' : '') }} {{= (MainItem.LinkIsExternal ? 'rel="external"' : '') }}>{{= MainItem.Name }}</a>
            {{?}}

            {{? MainItem.Children.length > 0}}
                <div class="drop section_wrapper clearfix l2" data-element="topCategory.drop" id="drop_{{= MainItem.CategoryID}}">
                    <div>
                        <div class="drop_categories wrapper">
                            {{~ MainItem.Children : SecondItem }}
                                <div>
                                    <a data-is-empty-x="{{= (SecondItem.Children.length == 0 && SecondItem.TopContentBlocks.length == 0) }}" href="{{= SecondItem.AutoUrl }}" class="{{= SecondItem.CssClass }} show-third-level" data-id="{{= SecondItem.CategoryID }}">
                                        {{? SecondItem.SVGImage != ''}}
                                            <span class="svg_menuicon svg_{{= SecondItem.CategoryID }}">
                                                {{= SecondItem.SVGImage }}
                                            </span>
                                        {{?}}
                                        <span class="drop_categories__name">{{= SecondItem.Name }}</span>
                                        {{? SecondItem.Children.length > 0 || SecondItem.TopContentBlocks.length > 0}}
                                            <button class="focusable-only" aria-label="Hoppa till underkategorier för {{= SecondItem.Name }}" onclick="return AriaMainCategoryJumpInto(this)">+</button>
                                        {{?}}
                                    </a>
                                </div>
                            {{~}}
                        </div>
                        <div class="drop_content clearfix">
                           
                            <div class="wrapper">                              

                                {{~ MainItem.Children : SecondItem }}
                                    
                                    <ul class="{{= SecondItem.CssClass }} {{= SecondItem.CssClassAddon }} third-level-item" data-id="{{= SecondItem.CategoryID }}">
                                        <li class="{{= SecondItem.TopContentBlocks.length > 0 ? 'has_topblocks' : '' }} {{= SecondItem.SideContentBlocks.length > 0 ? 'has_sideblocks' : '' }}">
                                            {{? SecondItem.TopContentBlocks.length > 0 }}
                                                <div class="dropdown_link--all">
                                                    {{~ SecondItem.TopContentBlocks : ContentItem }}
                                                        <a href="{{= ContentItem.LinkUrl }}" {{? ContentItem.LinkIsExternal}}rel="external"{{?}} class="parent">{{= ContentItem.Headline }}</a>
                                                    {{~}}
                                                </div>
                                            {{?}}
                                            
                                            <div class="wrapper__left-right">
                                                <div class="wrapper__left">
                                                    <section>
                                                        {{? SecondItem.IsSeperator }}
                                                            <span data-href="{{= SecondItem.AutoUrl }}" class="header {{= SecondItem.Children.length > 0 ? 'has_children' : ''}}" {{= (SecondItem.LinkRedirect ? 'data-redirect' : '') }}>{{= SecondItem.Name }}</span>
                                                        {{??}}
                                                            <a href="{{= SecondItem.AutoUrl }}" class="  {{= SecondItem.Children.length > 0 ? 'has_children' : ''}}" {{= (SecondItem.LinkIsExternal ? 'rel="external"' : '') }} {{= (SecondItem.LinkRedirect ? 'data-redirect' : '') }}>{{= SecondItem.Name }}</a>
                                                        {{?}}
                                            
                                                        {{? SecondItem.Children.length > 0}}
                                                            {{= it.subTemplate(SecondItem.Children, {level: 3}) }}
                                                        {{?}}
                                                    </section>
                                                </div>
                                                {{? SecondItem.SideContentBlocks.length > 0 }}
                                                    <div class="wrapper__right">
                                                        <div class="sideblocks sideblocks__wrapper">
                                                            {{~ SecondItem.SideContentBlocks : ContentItem }}
                                                                <div class="sideblocks__item">
                                                                    {{? ContentItem.HasImage }}
                                                                        <div class="sideblocks__item__img">
                                                                            {{? ContentItem.HasLink }}
                                                                                <a href="{{= ContentItem.LinkUrl }}" {{? ContentItem.LinkIsExternal}}rel="external"{{?}} class="parent"> 
                                                                            {{?}}
                                                                                <img src="{{= UploadUrl.ContentBlock_Mobile }}{{= ContentItem.Image }}" alt="{{= ContentItem.ImageAlt }} "/>
                                                                            {{? ContentItem.HasLink }}
                                                                                </a>
                                                                            {{?}}
                                                                        </div>
                                                                    {{?}}

                                                                    {{? ContentItem.HasBody }}
                                                                        <div class="sideblocks__item__txt">
                                                                            {{? ContentItem.HasVisibleHeadline }}
                                                                                <span class="h4">{{= ContentItem.Headline }}</span>
                                                                            {{?}}

                                                                            {{= ContentItem.Description }}
                                                                        
                                                                            {{? ContentItem.HasLink && ContentItem.LinkText != '' }}
                                                                                <p><a class="item__link" href="{{= ContentItem.LinkUrl }}" {{? ContentItem.LinkIsExternal}}rel="external"{{?}}>{{= ContentItem.LinkText }}</a></p>
                                                                            {{?}}
                                                                        </div>
                                                                    {{?}}
                                                                </div>
                                                            {{~}}
                                                        </div>
                                                    </div>   
                                                {{?}}
                                            </div>

                                            {{? SecondItem.CategoryID == 12 }}
                                                <div class="dropdown_link--special">
                                                    <a href="/fonster-fonsterdorrar/12" class="parent"><span>Vilken serie ska jag välja?</span> – Tryck här! </a>
                                                </div>
                                            {{?}}
                                        </li>
                                    </ul>
                                
                                {{~}}                                
                            </div>
                        </div>
                    </div>
                </div>
            {{?}}
        </section>
    </li>
{{~}}