<div id="birthday" ng-show="::birthdays.length" style="padding-top: 0;">

	<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-imgColumn">
						<div wizdom365-presence-picture="" size="AVATAR" accountname="item.accountName" email="item.email" name="item.name" image="item.pictureURL"></div>
					</div>

					<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>
	<div class="container-fluid wd-birthday-pagination-container wizdom-fullwidth text-center" 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>