<div class="floating-container">

    <section class="md-header of-md-tabs">
        <div class="md-header-items-container">
            <div class="md-header-items of-md-header-items">

                <div ng-repeat="page in pages.a" label="{{pages.o[page].title | translate}}"
                     class="of-tabs-item ng-scope ng-isolate-scope of-md-tab"
                     ng-class="{active: $index == activeTabIndex}"
                     id="tab_00{{$index}}"
                     role="tab"
                     ng-click="changeTab($index)">
                        <span class="ng-binding ng-scope of-md-tab-label">{{pages.o[page].title | translate}}</span>
                </div>

            </div>
        </div>
    </section>

    <div ng-if="activeTabIndex == 0"
         class="live-timeline-wrapper">
        <section class="tab-section padding-top-cancel">
            <div of-in-view
                 of-tag-screen
                 screen-name="{{ pages.find('top').screenName }}">
            </div>
            <div of-match-live-scores competitions="topCompetitions"></div>
        </section>
    </div>

    <div ng-if="activeTabIndex == 1"
         class="live-timeline-wrapper">
        <section class="tab-section padding-top-cancel">
            <div of-in-view
                 of-tag-screen
                 screen-name="{{ pages.find('all').screenName }}">
            </div>
            <div of-match-live-scores></div>
        </section>
    </div>

</div>
