<div class="modal fade js-task-add-modal" id="acknowledge-users-list-popup_{{ comment.id }}" tabindex="-2" role="dialog" aria-labelledby="add-task-popup">
	<div class="modal-dialog modal-xl" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title text-dark">
					<span lmsg="common.cla_comments.read_status">[Read status]</span>
				</h5>
				<button type="button" class="btn close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">
						<ion-icon name="close-outline"></ion-icon>
					</span>
				</button>
			</div>

			<!-- users who can acknowledge comment -->
			<div class="modal-body overflow-hidden">
				<div class="container mb-2">
					<div class="row" ng-if="cc.acknowledgement_loading_unread">
						<div class="col-12 d-flex justify-content-center">
							<div class="spinner-border">
								<span class="sr-only" lmsg="common.loading">[Loading...]</span>
							</div>
						</div>
					</div>

					<div class="row" ng-if="!cc.acknowledgement_loading_unread">
						<div class="col">
							<span lmsg="common.cla_comments.unread">[Unread]</span>&nbsp;<span class="badge rounded-pill bg-light text-dark">{{ comment.unacknowledged_users.paging.total }}</span>
						</div>
					</div>

					<div class="row" ng-if="!cc.acknowledgement_loading_unread">
						<div class="col-md-4"
							 dir-paginate="user in comment.unacknowledged_users.data | itemsPerPage: comment.itemsPerPage"
							 current-page="comment.currentPage"
							 total-items="comment.unacknowledged_users.paging.total"
							 pagination-id="comment.acknowledgementUsersListId">
							<clang-user-details user="user"></clang-user-details>
						</div>
					</div>

					<dir-pagination-controls
						current-page="comment.currentPage"
						max-size="5"
						pagination-id="comment.acknowledgementUsersListId"
						on-page-change="cc.loadListUsersWhoCanAcknowledgeComment($event, comment, newPageNumber)"
						template-url="/intranet/comments/html/ui/include/custom-dir-pagination.html">
					</dir-pagination-controls>
				</div>

				<!-- users who acknowledge comment -->
				<div class="container mb-2">
					<div class="row" ng-if="cc.acknowledgement_loading">
						<div class="col-12 d-flex justify-content-center">
							<div class="spinner-border">
								<span class="sr-only" lmsg="common.loading">[Loading...]</span>
							</div>
						</div>
					</div>

					<div class="row" ng-if="!cc.acknowledgement_loading">
						<div class="col">
							<span lmsg="common.cla_comments.read">[Read]</span>&nbsp;<span class="badge rounded-pill bg-light text-dark">{{ comment.acknowledgements.paging.total }}</span>
						</div>
					</div>

					<div class="row" ng-if="!cc.acknowledgement_loading">
						<div class="col-md-4"
							dir-paginate="user in comment.acknowledgements.data | itemsPerPage: comment.itemsPerPage"
							current-page="comment.currentPageUserList"
							total-items="comment.acknowledgements.paging.total"
							pagination-id="comment.acknowledgementUsersListUnreadId">
							<clang-user-details user="user"></clang-user-details>
						</div>
					</div>

					<dir-pagination-controls
						current-page="comment.currentPageUserList"
						max-size="5"
						pagination-id="comment.acknowledgementUsersListUnreadId"
						on-page-change="cc.loadAcknowledgementsPerComment($event, comment, newPageNumber)"
						template-url="/intranet/comments/html/ui/include/custom-dir-pagination.html">
					</dir-pagination-controls>
				</div>
			</div>

			<div class="modal-footer justify-content-center">
				<button type="button" class="btn btn-primary" data-dismiss="modal">
					<span lmsg="common.cla_comments.close">[Close]</span>
				</button>
			</div>
		</div>
	</div>
</div>
