<div class="wizdom-departmentUsers bootstrap-wrapper">
    <div class="webpart-edit-button-container" ng-if="::editMode">
        <button class="editWebpartButton btn" ng-click="editWebpart()" type="button" title='{{"Edit Webpart" | translate}}'>
            <span class="ms-Icon ms-Icon--Edit"></span><span class="editWebpartButtonText">{{"Edit" | translate}}</span>
        </button>
    </div>
	<div wizdom365-spinner="" loading="!dataReady"></div>

	<div ng-show="dataReady">
		<div ng-show="isConfigured">
			<div class="wizdom-departmentUsers-main">
				<div wizdom-include='webpartProperties.templateUrl'></div>
			</div>

			<div ng-show="!users.length">
				{{'There is no employees in the department' | translate}}
			</div>
		</div>

		<div ng-show="!isConfigured">
			{{'Please configure the web part' | translate}}
		</div>
	</div>

	<div class="container-fluid text-center" ng-if="users.length > webpartProperties.itemsPerPage">
		<div class="wd-noticeboard-pagination-inner-container">
			<pagination total-items="users.length"
						style="margin-bottom:0; padding-bottom:0;"
						ng-change="setPage(currentPage)"
						ng-model="currentPage"
						items-per-page="webpartProperties.itemsPerPage"
						max-size="5"
						boundary-links="false"
						previous-text="&lsaquo;"
						next-text="&rsaquo;"
						first-text="&laquo;"
						last-text="&raquo;"></pagination>
		</div>
	</div>
</div>