<article class="match-day-modal-content">
    <header class="match-day-modal-header">
        <h1>{{'SELECT_MATCHDAY'| translate}}</h1>
    </header>
    <div class="match-day-container" ng-style="{height: {{matchDayContainerHeight}} + 'px'}">
        <ul class="match-day-list">
            <li ng-repeat="match in matchdays" class="match-day-list-item">
                <a ng-click="onSelectMatchDay(match)" class="match-day-btn">
                    <span class="match-day-indicator" ng-class="{'match-day-current': match.isCurrentMatchday, 'match-day-future': isFutureMatchDay(match), 'match-day-selected': selectedMatchday != undefined && selectedMatchday.id == match.id}">{{$index + 1}}</span>
                    <span class="match-day-info">
                        <span class="match-day-name">{{match.name}}</span>
                        <span class="match-day-date">{{match.kickoffFirst | amDateFormat:'ddd, DD MMM'}} - {{match.kickoffLast | amDateFormat:'ddd, DD MMM'}}</span>
                    </span>
                    <span ng-if="match.isCurrentMatchday" id="current-match-day"></span>
                </a>
            </li>
        </ul>
    </div>
    <footer class="match-day-modal-footer" ng-click="closeMatchModal()">
        <span class="glyphicon glyphicon-remove"></span> Close
    </footer>
</article>
