<template>
	<div
		v-if="user"
		class="user"
	>
		<div class="header">
			<h2 class="username">{{ user.username }}</h2>
		</div>

		<section
			v-if="stashes.length > 0"
			class="section"
		>
			<h3 class="heading">Stashes</h3>

			<ul class="stashes nolist">
				<li
					v-for="stash in stashes"
					:key="stash.id"
				>
					<h4 class="stash-name">{{ stash.name }}</h4>

					<ul class="stash nolist actors">
						<li
							v-for="item in stash.actors"
							:key="item.id"
						><Actor :actor="item.actor" /></li>
					</ul>

					<ul class="stash nolist scenes">
						<li
							v-for="item in stash.scenes"
							:key="item.id"
						><Scene :release="item.scene" /></li>
					</ul>
				</li>
			</ul>
		</section>
	</div>
</template>

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

async function mounted() {
	this.user = await this.$store.dispatch('fetchMe');
	this.stashes = await this.$store.dispatch('fetchUserStashes', this.user.id);
}

export default {
	components: {
		Actor,
		Scene,
	},
	data() {
		return {
			user: this.$route.params.username === this.$store.state.auth.user?.username
				? this.$store.state.auth.user
				: null,
			stashes: [],
		};
	},
	mounted,
};
</script>

<style lang="scss" scoped>
.header {
	padding: 1rem;
	background: var(--profile);
}

.username {
	margin: 0;
	font-size: 1.5rem;
	color: var(--text-light);
}

.section {
	padding: 1rem;
	margin: 0 0 1rem 0;
}

.heading {
	color: var(--primary);
}

.stash {
	margin: 0 0 1rem 0;
}

.stash-name {
	color: var(--shadow-strong);
	margin: 0 0 1rem 0;
}

.actors {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    grid-gap: .5rem;
    flex-grow: 1;
    flex-wrap: wrap;
}

.scenes {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    grid-gap: .5rem;
	box-sizing: border-box;
}
</style>
