<div id="birthday" ng-show="::birthdays.length">

	<div class="icon-birthday-flag-dims icon-birthday-flag" style="margin:0 auto;">
	</div>


	<div class="birthday-heading">
		<span ng-if="webpartProperties.plusDays == 0">
			<!-- {{ birthdays.length }} -->
			{{ "Birthday(s) today!" | translate }}
		</span>
		<span ng-if="webpartProperties.plusDays > 0">
			<!-- {{ birthdays.length }} -->
			{{ "Upcoming birthday(s)" | translate }}
		</span>
	</div>

	<div id="wizdomBirthdaySlider" style="position:relative; height: 100px; overflow:hidden;" ng-mouseleave="startAnimation()" ng-mouseover="stopAnimation()">
		<div ng-repeat="item in ::birthdays"
			 class="birthdayPerson slide-animation-birthdayslider"
			 direction="{{direction}}"
			 ng-swipe-left="nextSlide()"
			 ng-swipe-right="prevSlide()"
			 ng-show="isCurrentSlideIndex($index)" style="padding-top: 0;">
			<!--
				<a href="{{ item.publicUrl }}">
				<span ng-bind="item.name"></span>
				<span>{{ item.date | date: 'd MMM' }}</span>
			</a>
			-->
	
			<div class="wizdom-employees bootstrap-wrapper" style="text-align: left;">
				<div class="wizdom-employees-row">
					

					<div class="wizdom-employees-textColumn">
						<h4 class="name"><a ng-href="{{::item.publicUrl}}">{{::item.name}}</a></h4>
						<section>
							<div class="department" ng-show="::(item.date.length)"><b>{{'Birthday' | translate}}:</b> {{::item.date | wizdom365PhonebookDateFilter | date: 'MMMM d'}}</div>
						</section>
					</div>
				</div>
			</div>
		</div>

		<div class="container-fluid wd-birthday-pagination-container wizdom-fullwidth text-center birthday-margin" ng-if="birthdays.length > 1">
			<div class="wd-birthday-pagination-inner-container row">
				<pagination total-items="birthdays.length"
					ng-model="$index"
					ng-change="setCurrentSlideIndex($index -1)"
					items-per-page="1"
					max-size="10"
					boundary-links="true"
					previous-text="&lsaquo;"
					next-text="&rsaquo;"
					first-text="&laquo;"
					last-text="&raquo;"></pagination>
			
			</div>
		</div>
	</div>
</div>