<vn-crud-model url="AbsenceTypes" data="absenceTypes" auto-load="true"> </vn-crud-model> <div class="vn-w-lg"> <vn-card class="vn-pa-sm calendars"> <vn-icon ng-if="::$ctrl.isSubordinate" icon="info" color-marginal vn-tooltip="To start adding absences, click an absence type from the right menu and then on the day you want to add an absence"> </vn-icon> <vn-calendar ng-repeat="month in $ctrl.months" data="$ctrl.events" default-date="month" format-day="$ctrl.formatDay($day, $element)" display-controls="false" hide-contiguous="true" hide-year="true" on-selection="$ctrl.onSelection($event, $days)"> </vn-calendar> </vn-card> </div> <vn-side-menu side="right"> <div class="vn-pa-md"> <div class="totalBox" style="text-align: center;"> <h6 translate>Holidays</h6> <div> {{'Used' | translate}} {{$ctrl.calendar.holidaysEnjoyed}} {{'of' | translate}} {{$ctrl.calendar.totalHolidays || 0}} {{'days' | translate}} </div> </div> <div class="vn-pt-md"> <vn-autocomplete label="Year" data="$ctrl.yearFilter" ng-model="$ctrl.year" show-field="year" value-field="year" order="DESC"> </vn-autocomplete> </div> <div class="input vn-py-md" style="overflow: hidden;"> <vn-chip ng-repeat="absenceType in absenceTypes" ng-class="::{'selectable': $ctrl.isSubordinate}" ng-click="$ctrl.pick(absenceType)"> <vn-avatar ng-style="{backgroundColor: absenceType.rgb}"> <vn-icon icon="check" ng-if="absenceType.id == $ctrl.absenceType.id"></vn-icon> </vn-avatar> {{absenceType.name}} </vn-chip> </div> <div class="vn-py-md"> <vn-chip> <vn-avatar class="festive"> </vn-avatar> <span translate>Festive</span> </vn-chip> </div> </div> </vn-side-menu> <vn-confirm vn-id="confirm" message="This item will be deleted" question="Are you sure you want to continue?"> </vn-confirm>