<style lang="scss">
@import "../css/_globals";

#header {
	align-items: baseline;
	display: flex;
	height: 60px;
	margin: 0 -20px 20px; /* lpList padding */
	position: relative;
}

#hamburger {
	cursor: pointer;
	display: inline-block;
	opacity: 0.6;
	transition: transform $transitionDurationSlow;

	&:hover {
		opacity: 1;
	}

	.lpHasSidebar & {
		transform: rotate(90deg);
	}
}

#lpListName {
	font-size: 24px;
	font-weight: 600;
	padding: 12px 15px;
}

.headerItem {
	flex: 0 0 auto;
	height: 100%;
	padding: 17px 16px;
	position: relative;

	&:first-child {
		padding-left: 20px;
	}

	.lpPopover {
		&:hover .lpTarget {
			color: $blue1;
		}
	}

	.lpTarget {
		font-weight: 600;
		padding: 17px 16px 15px;
	}

	&#lpListName {
		flex: 1 0 auto;
	}

	&.hasPopover {
		padding: 0;
	}

	&.signInRegisterButtons {
		height: auto;
		padding: 0 16px;
	}
}
</style>

<template>
	<div v-if="isLoaded" id="main" :class="{lpHasSidebar: library.showSidebar}">
		<sidebar />
		<div class="lpList lpTransition">
			<div id="header" class="clearfix">
				<span class="headerItem">
					<a id="hamburger" class="lpTransition" @click="toggleSidebar"><i class="lpSprite lpHamburger" /></a>
				</span>
				<input id="lpListName" :value="list.name" type="text" class="lpListName lpSilent headerItem" value="New List" placeholder="List Name" autocomplete="off" name="lastpass-disable-search" @input="updateListName">
				<span>{{ lastSync }}</span>
				<share />
				<listSettings />
				<moreDropdown />
				<span class="clearfix" />
			</div>

			<list />

			<div id="lpFooter">
				<div class="lpSiteBy">
					This frontend is based on the work of <a class="lpHref" href="https://github.com/galenmaly/lighterpack" target="_blank" rel="noopener noreferrer">Lighterpack</a>.
				</div>
			</div>
		</div>

		<globalAlerts />
		<speedbump />
		<copyList />
		<importCsv />
		<itemImage />
		<itemViewImage />
		<itemLink />
		<help />
		<changePassword />
	</div>
</template>

<script>
import globalAlerts    from '../components/globalAlerts.vue';
import sidebar         from '../components/sidebar.vue';
import share           from '../components/share.vue';
import listSettings    from '../components/listSettings.vue';
import moreDropdown    from '../components/moreDropdown.vue';
import changePassword  from '../components/changePassword.vue';
import help            from '../components/help.vue';
import list            from '../components/list.vue';
import itemImage       from '../components/itemImage.vue';
import itemViewImage   from '../components/itemViewImage.vue';
import itemLink        from '../components/itemLink.vue';
import importCsv       from '../components/importCsv.vue';
import copyList        from '../components/copyList.vue';
import speedbump       from '../components/speedbump.vue';

export default {
	name: 'Dashboard',
	components: {
		sidebar,
		share,
		listSettings,
		moreDropdown,
		changePassword,
		help,
		list,
		itemLink,
		copyList,
		importCsv,
		itemImage,
		itemViewImage,
		speedbump,
		globalAlerts,
	},
	mixins: [],
	data() {
		return {
			isLoaded: false,
			lastSync: '',
		};
	},
	computed: {
		library() {
			return this.$store.state.library;
		},
		list() {
			return this.library.getListById(this.library.defaultListId);
		},
		isSignedIn() {
			return this.$store.state.loggedIn;
		},
	},
	created() {
		bus.$on('lastSyncDate', (lastSyncDate) => {
			this.lastSync = 'Last sync: ' + lastSyncDate;
		});
	},
	beforeMount() {
		if (!this.$store.state.library) {
			router.push('/login');
		} else {
			this.isLoaded = true;
		}
	},
	methods: {
		toggleSidebar() {
			this.$store.commit('toggleSidebar');
		},
		updateListName(evt) {
			this.$store.commit('updateListName', { id: this.list.id, name: evt.target.value });
		},
	},
};
</script>
