<div class="container">
	<div name="comments_component" id="randId">
		<!--@head@
		<component class="\Claromentis\Core\Widget\CssLoader" src="/assets/styles/components/fileuploader.css" >
		-->

		<unique_section name="comments_localisation">
			<component class_key="js_localize" name="localize" keys="common.cla_comments.warning.comment_too_long, common.cla_comments.delete_prompt,common.cla_comments.reply.delete_prompt,
			common.cla_comments.delete_other_prompt,common.cla_comments.reply.delete_other_prompt,news.admin.comment_published,common.cla_comments.modify_failed,common.cla_comments.wrote,
			common.notifications.reply,common.notifications.like,common.notifications.unlike,common.notifications.post_like,common.notifications.post_likes,common.cla_comments.options.message,
			common.cla_comments.options.link,common.cla_comments.options.document,common.cla_comments.options.file,common.edit,common.delete,common.update,common.cancel,common.save,common.post,
			common.file_upload.inner_file,common.file_upload.upload_a_file,common.file_upload.drop_files,common.cla_comments.you,common.loading,common.cla_comments.people_who_liked_this,
			common.cla_comments.comment_published,common.cla_comments.reply_published,common.cla_comments.modify_failed,common.cla_comments.reply.modify_failed,common.cla_comments.add_failed,
			common.cla_comments.reply.add_failed,common.cla_comments.deleted,common.cla_comments.reply.deleted,common.cla_comments.delete_failed,common.cla_comments.reply.delete_failed,
			common.cla_comments.discuss,common.cla_comments.log_in,common.perms.hidden_name,common.cla_comments.placeholder,comments.permalink,common.cla_comments.view_more_replies,comments.error.thread_not_found,
			common.cla_comments.before_replies,common.cla_comments.after_replies,communication.messages.deleted_user_name,common.cla_comments.wrote_in,comments.pagination.show_more,comments.component.select_topic,
			comments.no_comments_posted">
		</unique_section>

		<cla-profile-image-url-loader image-url="${user_profile_image_url}"></cla-profile-image-url-loader>

		<div class="discussion"
			 ng-cloak=""
			 ng-controller="commentController as cc"
			 ng-init="cc.initAllDiscussions(${object_id}, '${object_type}', ${thread_id}, ${new_on_top})">

			<div ng-show="cc.userAuthenticated" class="pt-2">
				<div ng-if="!cc.pageLoading" name="new_comment" visible="1">
					<include file="includes/new.html" />
				</div>

				<div id="comments_{{ cc.uniqueId }}">
					<div class="media comment-row pb-3" ng-repeat="comment in cc.comments">

						<a ng-if="comment.user.deleted !== true" href="/intranet/people/viewprofile.php?id={{ comment.user.id }}" class="media-left mr-2">
							<img class="media-object profile-img" width="50" height="50" alt="photo" ng-src="{{ comment.user.photo }}"/>
						</a>

						<a ng-if="comment.user.deleted === true" class="media-left mr-2">
							<img class="media-object profile-img" width="50" height="50" alt="photo" ng-src="{{ comment.user.photo }}"/>
						</a>

						<div class="media-body comment-row">
							<span ng-if="comment.user.deleted">
								<lmsg src="communication.messages.deleted_user_name">[deleted user]</lmsg>
							</span>

							<span ng-if="comment.user.is_visible && comment.user.deleted !== true">
								<a href="/intranet/people/viewprofile.php?id={{ comment.user.id }}&from_list=true" ng-if="!comment.user.is_blocked">
									<strong>{{ comment.user.is_me ? cc.translations.my_comment : comment.user.name }}</strong>
								</a>
								<strong ng-if="comment.user.is_blocked">{{ comment.user.is_me ? cc.translations.my_comment : comment.user.name}}</strong>
							</span>

							<span ng-if="!comment.user.is_visible">{{ comment.user.name }}</span>
							<lmsg src="common.cla_comments.wrote_in">[wrote in]</lmsg>

							<span ng-if="comment.object_url">
								<a href="{{ comment.object_url }}" target="_blank">
									<strong ng-if="comment.object_title">{{ comment.object_title }}</strong>
									<strong ng-if="!comments.object_title">{{ comment.object_type_name }}</strong>
								</a>
							</span>

							<span ng-if="!comment.object_url && comment.object_title"><strong>{{ comment.object_title }}</strong></span>

							<span ng-if="!comment.object_url && !comment.object_title">{{ comment.object_type_name }}</span>

							<div ng-if="!comment.edit_mode">
								<cla-comment text="comment.text" mentioned="comment.mentioned" comment-id="comment.id" class="text-break"></cla-comment>

								<ng-include src="'/intranet/comments/html/ui/attachments.html'"></ng-include>

								<small class="text-muted" ng-show="!comment.reply_mode">

									<!-- replies enabled -->
									<span class="border-right mr-2 pr-2" ng-show="comment.permissions.add">
										<a href="" lmsg="title:common.notifications.reply" ng-click="cc.replyMode( $event, comment )">
											<lmsg src="common.notifications.reply">[Reply]</lmsg>
										</a>
            						</span>

									<!-- likes enabled -->
									<span class="border-right mr-2 pr-2" ng-show="!comment.user.is_me">
										<span ng-show="!comment.have_i_liked">
											<a href="" lmsg="title:common.notifications.like" ng-click="cc.like( $event, comment )">
												<ion-icon name="thumbs-up"></ion-icon>
												<lmsg src="common.notifications.like">[Like]</lmsg>
											</a>
                						</span>

										<span ng-show="comment.have_i_liked">
                    						<a href="" lmsg="title:common.notifications.unlike" ng-click="cc.unlike( $event, comment )"><lmsg src="common.notifications.unlike">[Unlike]</lmsg></a>
										</span>
									</span>

									<span class="border-right pr-1 mr-2" ng-show="comment.like_count > 0">
										<a href="" lmsg="title:common.notifications.like" ng-click="cc.showLikes( $event, comment )">{{comment.like_count}}
											<span ng-if="comment.like_count == 1">
												<lmsg src="common.notifications.post_like">[like]</lmsg>
											</span>

											<span ng-if="comment.like_count > 1">
												<lmsg src="common.notifications.post_likes">[likes]</lmsg>
											</span>
										</a>
									</span>

									<span class="border-right mr-2 pr-2" ng-if="!cc.is_thread_only">
                						<a href="/comments/permalink/{{ comment.id }}" lmsg="title:comments.permalink"><ion-icon name="link-outline"></ion-icon></a>
            						</span>

									<span date="{{ comment.timestamp.date }}">{{ comment.timestamp.date_str }}</span>
								</small>
							</div>

							<!-- reply -->
							<div ng-if="comment.reply_mode">
								<p>
									<comment-edit id="replytext-{{comment.id}}" name="comment_textreply" comment="comment.new_reply"></comment-edit>
								</p>

								<button lmsg="common.notifications.reply" type="button" class="btn btn-primary btn-sm" ng-click="cc.add( $event, comment )" ng-disabled="!cc.can_save">[Reply]</button>

								<button lmsg="common.cancel" type="button" class="btn btn-secondary btn-sm" ng-click="cc.replyMode( $event, comment )">[Cancel]</button>
							</div>

							<ng-include src="'/intranet/comments/html/ui/replies.html'"></ng-include>
						</div>
					</div>

					<div ng-if="!cc.pageLoading && cc.comments.length === 0" class="media comment-row pb-3">
						<div class="media-body comment-row" lmsg="comments.no_comments_posted">[No comments posted]</div>
					</div>

					<div ng-if="cc.pageLoading" class="d-flex justify-content-center pb-3">
						<span class="js-loading-spinner"><img src="/images/default/icons/loading.gif" width="16" height="16" alt="" /></span> <lmsg src="common.loading">[Loading…]</lmsg>
					</div>

					<div ng-if="!cc.pageLoading && cc.showMore" id="bottom-actions" ng-click="cc.loadMoreComments()">
						<a href="#" class="d-block show-more pb-3" lmsg="comments.pagination.show_more">[Show more…]<span class="float-right">↓</span></a>
					</div>
				</div>
			</div>

			<div class="modal fade jsWho-liked-this" tabindex="-1" role="dialog">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" lmsg="common.cla_comments.people_who_liked_this">[People who liked this]</h5>

							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
								<span aria-hidden="true">
									<ion-icon name="close-outline"></ion-icon>
								</span>
							</button>
						</div>

						<div class="modal-body">
							<div class="list jsDiscuss-list">
								<div class="media mb-2 jsMedia-discuss" ng-repeat="like in cc.liked">
									<a href="{{ like.link }}" class="mr-1" target="_blank">
										<img ng-src="{{ like.image }}" class="media-object profile-img" width="32">
									</a>
									<div class="media-body comment-row align-self-center">
										<a href="{{ like.link }}" target="_blank">{{ like.name }}</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div ng-hide="cc.userAuthenticated">
				<div class="alert alert-warning" lmsg="comments.error.access_denied"></div>
			</div>
		</div>
	</div>

	<div name="access_denied" class="card-body" visible="0">
		<span class="text-muted">
			<txt name="discuss:discussion_component:no_permission">[Sorry, this discussion cannot be displayed or you do not have permission to view it.]</txt>
			<br>
			<br>
			<a href="/discuss" class="btn btn-secondary"><txt name="discuss:discussion_component:discuss_homepage">Discuss homepage</txt></a>
		</span>
	</div>
</div>

<script type="text/javascript">
	requirejs(['comments', 'domReady'], function (comments, domReady) {
		domReady(function () {
			// changed to constant from because `.value()` registered after modules are loaded and may trigger the bug
			// update: using `constant()` means that AllDiscussionsConfig is global and settings are duplicate over components (if there is more than one)
			angular.module('commentsModule').factory('AllDiscussionsConfig', function() {
					var config = {};
					config = ${discussions.json};

					return config;
				});
			angular.module('commentsModule').constant('AggregationConfig', ${aggregationConfig.json});

			comments.init('${comments_component.id}');
		});
	});
</script>
