<div sb-background-image value-id="'homepage'" close-on-click="close_on_click" ng-class="{background_image: style_background_image, close_on_click: close_on_click}" ng-style="style_background_image">

    <sb-connection has-connection="has_connection"></sb-connection>

    <div id="tabbar_items" class="tabbar_items tabbar {{ layout_id }}" ng-class="{'slide-top': animate_tabbar}" ng-show="tabbar_is_visible">
        <ul id="tabbar" class="tabbar_l1">
            <li ng-repeat="option in limited_options | limitTo:limit_to" ng-if="option.is_active">
                <a href="{{ option.url }}" class="item" ng-class="{ is_link: option.is_link }">
                    <img ng-src="{{ option.icon_url }}" ng-class="{ colorable: option.icon_is_colorable }" width="30" height="30" />
                    <span class="block">{{ option.name }}</span>
                </a>
            </li>
            <li ng-show="more_items.is_visible">
                <a href="javascript:void(0)" class="item" ng-click="tabbar_is_visible = false; pages_list_is_visible = true;">
                    <img ng-src="{{ more_items.icon_url }}" class="{ colorable: more_items.icon_is_colorable }" width="30" height="30" />
                    <span class="block">{{ more_items.name }}</span>
                </a>
            </li>
            <li ng-show="customer_account.is_visible && !more_items.is_visible">
                <a href="{{ customer_account.url }}" class="item">
                    <img ng-src="{{ customer_account.icon_url }}" class="{ colorable: customer_account.icon_is_colorable }" width="30" height="30" />
                    <span class="block">{{ customer_account.name }}</span>
                </a>
            </li>
        </ul>
    </div>

    <div id="scrollview_tabbar_items" class="tabbar scrollable_content slide-top" ng-show="pages_list_is_visible">
        <ul>
            <?php // if($option_value->getFolderCategoryId()) continue; ?>
            <?php // if(!$option_value->isActive() AND !$is_overview) continue; ?>
            <li ng-repeat="option in filtered_options" ng-if="option.is_active">
                <a href="{{ option.url }}" class="item" >
                    <img ng-src="{{ option.icon_url }}" alt="" title="" width="30" height="30" class="left" />
                    <span class="block left">{{ option.name }}</span>
                    <div class="clear"></div>
                </a>
            </li>
            <li ng-if="customer_account.is_visible">
                <a href="{{ customer_account.url }}" class="item">
                    <img ng-src="{{ customer_account.icon_url }}" alt="" title="" width="30" height="30" class="left" />
                    <span class="block left">{{ customer_account.name }}</span>
                    <div class="clear"></div>
                </a>
            </li>
            <li>
                <a href="javascript:void(0)" class="item" ng-click="pages_list_is_visible = false; tabbar_is_visible = true;">
                    <span id="tabbar_name_close" class="block"><?php echo $this->_("Close") ?></span>
                </a>
            </li>
        </ul>
    </div>

</div>