<template>
	<section class="your-teams">
		<section-title icon="mdi mdi-account-group">
			{{ $t('HOMEPAGE_SECTION_TEAMS') }}
		</section-title>
		<div
			v-for="team in teams"
			:key="team.id"
			class="your-teams__team-row"
		>
			<div class="your-teams__toolbar">
				<team-icon
					:team="team"
					class="pr-3"
				/>
				<div class="your-teams__info">
					<span class="your-teams__title">
						{{ team.name }}
					</span>
					<span class="your-teams__member">
						{{ $t('HOMEPAGE_SECTION_TEAMS_MEMBER') }}
					</span>
				</div>
				<spacer />
				<w-button
					outline
					color="accent-1"
					:route="team.teamUrl"
				>
					{{ $t('HOMEPAGE_SECTION_TEAMS_VISIT') }}
					<w-icon>
						mdi mdi-arrow-right
					</w-icon>
				</w-button>
			</div>
			<project-list
				class="your-teams__projects"
				:projects="team.projects"
				:rows="2"
			/>
		</div>
	</section>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue';

export default Vue.extend({
	name: 'YourTeams',

	props: {
		teams: {
			type: Array as PropType<any[]>,
			required: true
		}
	},

	data: () => ({
		currentPages: {}
	}),

	created() {
		for(const team of this.teams) {
			this.$set(this.currentPages, team.id, 0);
		}
	}

});
</script>

<style lang="scss">
.your-teams {

	&__team-row {
		@include margin(4, t);
		@include margin(14, b);
	}

	&__toolbar {
		@include padding(2);
		@include padding(3, x);
		@include rounded(lg);

		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: var(--color-shade-2);
	}

	&__info {
		display: flex;
		flex-direction: column;

		@include dark {
			color: white;
		}
	}

	&__title {
		@include font-size(base);
		@include font-weight(semibold);
	}

	&__member {
		@include font-size(sm);
	}

	&__projects {
		@include padding(5, b);
	}
}
</style>