<div class="tabbed-content {{ shortcode.options.class }} {{ shortcode.options.visibility }}">
    <h4 ng-if="shortcode.options.title" class="uppercase text-{{ shortcode.options.align }}">
        {{ shortcode.options.title }}
    </h4>

    <ul class="nav nav-{{ shortcode.options.style }} nav-{{ shortcode.options.navStyle }} nav-size-{{ shortcode.options.navSize }} nav-spacing-{{ shortcode.options.navSpacing }} nav-{{ shortcode.options.align }}" ng-class="{ 'nav-vertical': shortcode.options.type === 'vertical' }">
        <li class="tab"
            ng-repeat="shortcode in $customCtrl.shortcode.children track by shortcode.$id"
            ng-class="{ 'active': $customCtrl.shortcode.states.activeTab === shortcode.index }">
            <a href="javascript:void(0);"
               ng-click="$customCtrl.setTab($index); $event.stopPropagation();">
                {{ shortcode.options.title }}
            </a>
        </li>
    </ul>
    <div class="tab-panels">
        <content></content>
    </div>
</div>