<!-- Schedule start -->

    <section ng-controller="CompetitionControllerMatchday"
         class="tab-section"
         layout="vertical"
         layout-fill
         layout-align="center center" class="animate-switch tab2">

            <div
                of-in-view
                of-tag-screen
                screen-name="{{ pages.find('schedule').screenName }}">
            </div>
            <button type="button" class="btn btn-default matchday-modal-btn" data-animation="am-fade-and-slide-top" ng-click="openMatchModal()">
                <span class="glyphicon glyphicon-calendar"></span><span class="matchday-label">{{selectedMatchday.name}}</span>
            </button>

            <loading ng-if="isLoadingMatchdays || isLoadingMatchday"></loading>

            <div ng-if="!isLoadingMatchdays && !isLoadingMatchday" class="push-matchday-down">
                <div ng-if="!matchdays.length || !matchday" of-coming-soon></div>

                <div ng-if="matchday.kickoffs" ng-repeat="kickoff in matchday.kickoffs">

                    <article ng-repeat="group in ::kickoff.groups" class="">
                        <of-match-header title="{{::kickoff.kickoffAt | amDateFormat:'dddd, MMMM Do YYYY'}}"></of-match-header>
                        <div class="card">
                            <table
                                    of-match-table
                                    ng-if="!isLoadingStats"
                                    kickoff="kickoff"
                                    games="group.matches"
                                    class="score-table card-body">
                            </table>
                        </div>
                    </article>
                </div>
            </div>

    </section>

</md-tab>
<!-- Schedule end -->