

<script>

import { decor } from './decor'
export default decor;

</script>

<style scoped>

.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
	opacity: 0;
}

</style>

<template>
	<lounge #default="{ palette, terrain, cart }">
		<div
			cart-options
			:style="{
				display: 'flex',
				justifyContent: 'space-between',
				padding: '10px 0 20px 0'
			}"
		>
			<div
				:style="{
					display: 'flex',
					justifyContent: 'space-between',
					padding: '10px 50px 20px'
				}"
			>
			
				<s_button
					ref="button"
					boundaries="8px 20px 8px"

					:pressable="showing !== 'stats'"
					:clicked="open_stats"
				>stats</s_button>
				
				<div 
					:style="{
						width: '20px'
					}"
				/>
				
				<s_button
					ref="button"
					boundaries="8px 20px 8px"

					:pressable="showing !== 'list'"
					:clicked="open_list"
				>list</s_button>
			</div>
			
			<div
				:style="{
					display: 'flex',
					justifyContent: 'space-between',
					padding: '10px 50px 20px'
				}"
			>
				<s_button
					ref="button"
					:pressable="true"
					:clicked="open_empty"
					
					boundaries="8px 20px 8px"
					
				>empty</s_button>
			</div>
		</div>
		
		<div 
			cart-content
			v-if="showing === 'stats'"
			:style="{
				position: 'relative',
				minHeight: '800px'
			}"
		>		
			<change_indicator 
				:show="show_recipe === false"
				:style="{
					position: 'absolute',
					height: '100vh',
					top: 0,
					left: 0,
					width: '100vw'
				}"
			/>
		
			<Transition name="fade">
				<div v-if="show_recipe">
					<cautionary_ingredients 
						:land="_get (recipe, ['cautionary ingredients'], {})"
					/>
					
					<div :style="{ height: '10px', width: '10px' }" />
				
					<essential_nutrients 
						:EN="_get (recipe, ['essential nutrients'], {})"
					/>
				</div>
			</Transition>
			
			
		</div>
		
		<div
			v-if="showing == 'list'"
		>
			<s_panel
				:style="{
					minHeight: '400px'
				}"
			>
				<div v-for="(treasure, index) in cart.treasures">		
					<s_food_or_supp_summary 
						:treasure="treasure"
					/>
					
					<div :style="{ height: '5px' }" />
					
					<s_line v-if="index !== cart.treasures.length - 1" />
					
					<div :style="{ height: '5px' }" />
				</div>
				
				<div 
					v-if="!Array.isArray (cart.IDs) || cart.IDs.length === 0"
					:style="{
						padding: '.5in',
						textAlign: 'center'
					}"
				>
					<p>The grocery list is empty.</p>
				</div>
			</s_panel>
		</div>
	</lounge>
</template>