traxxx/]

<template>
	<div
		v-if="tag"
		class="content"
	>
		<div
			class="tag"
			:class="{ nomedia: !hasMedia }"
		>
			<div class="header">
				<h2 class="title">
					<Icon icon="price-tag4" />
					{{ tag.name }}
				</h2>

				<p
					v-if="description"
					class="description header-description"
					v-html="description"
				/>
			</div>


			<div class="content-inner">
				<Photos
					v-if="hasMedia"
					:tag="tag"
					class="compact"
				/>

				<FilterBar :fetch-releases="fetchReleases" />
				<Releases :releases="tag.releases" />
			</div>
		</div>
	</div>
</template>

<script>
/* eslint-disable no-v-html */
import { Converter } from 'showdown';

import escapeHtml from '../../../src/utils/escape-html';

import FilterBar from '../header/filter-bar.vue';
import Photos from './photos.vue';
import Releases from '../releases/releases.vue';

const converter = new Converter();

async function fetchReleases() {
	this.tag = await this.$store.dispatch('fetchTagBySlug', {
		tagSlug: this.$route.params.tagSlug,
		range: this.$route.params.range,
	});

	this.hasMedia = this.tag.poster || this.tag.photos.length > 0;
	this.description = this.tag.description && converter.makeHtml(escapeHtml(this.tag.description));
}

async function route() {
	await this.fetchReleases();
}

async function mounted() {
	await this.fetchReleases();
	this.pageTitle = this.tag.name;
}

export default {
	components: {
		FilterBar,
		Photos,
		Releases,
	},
	data() {
		return {
			tag: null,
			description: null,
			releases: null,
			pageTitle: null,
			hasMedia: false,
		};
	},
	watch: {
		$route: route,
	},
	mounted,
	methods: {
		fetchReleases,
	},
};
</script>

<style lang="scss" scoped>
@import 'theme';

.tag {
    flex-grow: 1;
    overflow: hidden;

    &.nomedia {
        flex-direction: column;

        .sidebar {
            display: none;
        }

        .header {
            display: flex;
        }
    }
}

.header {
    background: var(--profile);
    color: var(--text-light);
    justify-content: space-between;
    padding: .5rem 1rem;

    .title {
        margin: 0 2rem 0 0;
    }
}

.title {
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    text-transform: capitalize;

    .icon {
        fill: var(--text-light);
        width: 1.25rem;
        height: 1.25rem;
    }
}

.description {
    margin: 0;
    line-height: 1.5;
}

.dark .sidebar {
    border-right: solid 1px var(--shadow-hint);
}
</style>