<div ng-if="$ctrl.topics.length > 0" class="topics-component">
	<div class="mb-2" ng-repeat="topic in $ctrl.topics">
	<cla-card>
		<div>
			<a ng-href="/projects/{{$ctrl.projectId}}/topics/{{topic.id}}">{{topic.title}}</a>
			<span class="float-right comment-count">
				<span class="comment-count-icon d-inline-block">
					<ion-icon name="chatbox-outline"></ion-icon>
				</span>
				<span class="align-top">{{topic.comment_count}}</span>
			</span>
		</div>
		<div class="mb-2 small">
			<span class="text-muted" lmsg="projects.overview.topics.last_updated">[Last updated]</span>: <span>{{topic.date_modified}}</span>
		</div>

		<div class="row">
			<div class="col-xs-8 col-sm-6 col-md-5">
				<clang-user-list class="js-users-list" plusnumber="{{$ctrl.getAdditionalUserCount(topic)}}" on-plus-clicked="$ctrl.showAdditionalUsers(topic)">
					<a ng-href="{{user.profile_url}}" ng-repeat="user in topic.displayedUsers">
						<clang-user-list-item img="{{user.profile_img }}" name="{{user.name}}" profile="{{user.profile_url}}"></clang-user-list-item>
					</a>
				</clang-user-list>
			</div>
		</div>

	</cla-card>
	</div>
</div>

<div ng-if="$ctrl.topics.length === 0" class="topics-component no-topics">
	<a class="text-muted" ng-href="/projects/{{$ctrl.projectId}}#/discussionTab" lmsg="projects.overview.topics.no_topics">[Create Topics to start discussions abut the Project]</a>
</div>
