<template>
	<div class="group-topics-component">
		<div class="row justify-content-center">
			<div class="col-12 col-md-8">
				<div class="card card-body border shadow-sm">
					<div class="d-flex justify-content-between align-items-center mb-3">
						<p class="h4 font-weight-bold mb-0">Group Topics</p>
						<select class="form-control bg-light rounded-lg border font-weight-bold py-2" style="width:95px;" disabled>
							<option>All</option>
							<option>Pinned</option>
						</select>
					</div>

					<div v-if="feed.length">
						<div v-for="(tag, index) in feed" class="">
							<div class="media py-2">
								<i class="fas fa-hashtag fa-lg text-lighter mr-3 mt-2"></i>
								<div :class="{ 'border-bottom': index != feed.length - 1 }" class="media-body">
									<a :href="tag.url" class="font-weight-bold mb-1 text-dark" style="font-size: 16px;">
										{{ tag.name }}
									</a>
									<p style="font-size: 13px;" class="text-muted">{{ tag.count }} posts in this group</p>
								</div>
							</div>
						</div>
					</div>

					<div v-else class="py-5">
						<p class="lead text-center font-weight-bold">No topics found</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
	export default {
		props: {
			group: {
				type: Object
			}
		},

		data() {
			return {
				feed: []
			}
		},

		mounted() {
			this.fetchTopics();
		},

		methods: {
			fetchTopics() {
				axios.get('/api/v0/groups/topics/list', {
					params: {
						gid: this.group.id
					}
				}).then(res => {
					this.feed = res.data;
				})
			}
		}
	}
</script>

<style lang="scss">
	.group-topics-component {
		margin-bottom: 50vh;
	}
</style>