<div>
    <div class="header">
        <vn-button
            icon="keyboard_arrow_left"
            class="flat"
            ng-click="$ctrl.movePrevious()"
            translate-attr="::{title: 'Previous'}"
            ng-if="$ctrl.displayControls"/>
        </vn-button>
        <div class="title">
            <span translate>{{$ctrl.defaultDate | date: 'MMMM'}}</span>
            <span ng-hide="::$ctrl.hideYear">{{$ctrl.defaultDate | date: 'yyyy'}}</span>
        </div>
        <vn-button
            icon="keyboard_arrow_right"
            class="flat"
            ng-click="$ctrl.moveNext()"
            translate-attr="::{title: 'Next'}"
            ng-if="$ctrl.displayControls">
        </vn-button>
    </div>
    <div id="days-header" ng-class="{'hide-weeks': $ctrl.hideWeeks}">
        <div class="week-numbers" ng-if="!$ctrl.hideWeeks"></div>
        <div class="weekdays">
            <section
                ng-repeat="day in ::$ctrl.weekDays"
                translate-attr="::{title: day.name}" 
                ng-click="$ctrl.selectWeekDay($event, day.index)">
                <span>{{::day.localeChar}}</span>
            </section>
        </div>
    </div>

    <div id="days-container" ng-class="{'hide-weeks': $ctrl.hideWeeks}">
        <div class="weeks" ng-if="!$ctrl.hideWeeks">
            <section ng-repeat="week in $ctrl.weekNumbers"
                class="day">
                <div class="day-number">
                    {{::week}}
                </div>
            </section>
        </div>
        <div
            class="days"
            ng-class="{'hide-contiguous': $ctrl.hideContiguous}">
            <section
                ng-repeat="day in $ctrl.days"
                class="day"
                ng-class="::$ctrl.getDayClasses(day)"
                vn-repeat-last
                on-last="$ctrl.repeatLast()">
                <div
                    class="day-number"
                    ng-click="$ctrl.select($event, day)">
                    {{::day | date: 'd'}}
                </div>
            </section>
        </div>
    </div>
</div>