<vn-crud-model
    url="/api/AbsenceTypes"
    data="$ctrl.absenceTypes" auto-load="true">
</vn-crud-model>
<div class="main-with-right-menu">
    <vn-card pad-small>
        <vn-horizontal class="calendar-list">
            <section class="calendar" ng-repeat="month in $ctrl.months">
                <vn-calendar
                    data="$ctrl.events"
                    default-date="month"
                    display-controls="false">
                </vn-calendar>
            </section>
        </vn-horizontal>
    </vn-card>
    <vn-side-menu side="right">
        <vn-vertical pad-small>
            <vn-vertical class="totalBox">
                <h6 translate>Holidays</h6>
                <vn-auto>
                    {{'Used' | translate}} {{$ctrl.calendar.holidaysEnjoyed}} 
                    {{'of' | translate}} {{$ctrl.calendar.totalHolidays}} {{'days' | translate}}
                </vn-auto>
            </vn-vertical>
            <vn-color-legend data="$ctrl.legends"></vn-color-legend>
        </vn-vertical>
    </vn-side-menu>
</div>