<template>
	<div
		v-if="stash"
		class="stash content"
	>
		<div class="stash-header">
			<h2 class="stash-name">{{ stash.name }}</h2>

			<router-link
				v-if="stash.user"
				:to="{ name: 'user', params: { username: stash.user.username } }"
				class="stash-username nolink"
			><Icon icon="user3" />{{ stash.user.username }}</router-link>
		</div>

		<div class="content-inner">
			<ul
				v-if="stash.scenes?.length > 0"
				class="stash-section stash-scenes nolist"
			>
				<li
					v-for="item in stash.scenes"
					:key="item.id"
				><Scene :release="item.scene" /></li>
			</ul>

			<ul
				v-if="stash.actors?.length > 0"
				class="stash-section stash-actors nolist"
			>
				<li
					v-for="item in stash.actors"
					:key="item.id"
				><Actor :actor="item.actor" /></li>
			</ul>
		</div>
	</div>
</template>

<script>
import Actor from '../actors/tile.vue';
import Scene from '../releases/scene-tile.vue';

async function fetchStash() {
	this.stash = await this.$store.dispatch('fetchStash', this.$route.params.stashId);
}

async function mounted() {
	this.fetchStash();
}

export default {
	components: {
		Actor,
		Scene,
	},
	data() {
		return {
			stash: null,
		};
	},
	mounted,
	methods: {
		fetchStash,
	},
};
</script>

<style lang="scss" scoped>
.stash-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--profile);
	color: var(--text-light);
}

.stash-name,
.stash-username {
	display: inline-flex;
	align-items: center;
	padding: .5rem 1rem;
	margin: 0;
	font-weight: bold;

	.icon {
		fill: var(--text-light);
		margin: -.1rem .5rem 0 0;
	}
}

.stash-section {
	padding: 1rem;

	&:not(:last-child) {
		border-bottom: solid 1px var(--shadow-hint);
	}
}

.stash-actors,
.stash-scenes {
    display: grid;
    flex-grow: 1;
    grid-gap: .5rem;
	box-sizing: border-box;
}

.stash-actors {
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}

.stash-scenes {
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
}
</style>
