tag habit-group
	prop habits = []
	
	css .group tween:all 200ms ease
		bgc:#fff  p:10px rd:lg
		d:flex g:10px g@xs:30px jc:center
		shadow:0 5px 15px black/20
	
	css div.controls mt:10px d:flex jc:space-between
		button bgc:transparent td@hover:underline fs:xs color:blue5 cursor:pointer
			
	def completeAll
		for habit in habits
			habit.done = true
	
	def resetAll
		for habit in habits
			habit.done = false
	
	def deleteItem index
		habits.splice(index, 1)
		
	<self>
		<div.group>
			for habit, i in habits
				<habit-item
					$key=habit.id
					bind:name=habit.name
					bind:done=habit.done
					@deleteItem=deleteItem(i)
				>
		<div.controls>
			<button @click=completeAll> "Complete All"
			<button @click=resetAll> "Reset All"


tag habit-item
	prop name = "Untitled"
	prop done = false
	prop editing = false

	css .actions d:flex jc:space-between
		button fs:xxs c:cooler4 @hover:blue5 bgc:transparent px:0
	css input[type=text] w:100% c:cool5 ta:center rd:sm
	css .item tween:all 200ms ease
		c:cool5 fw:500
		fs:xs rd:md p:5px
		size:70px @xs:90px
		bgc:cooler2
		d:vflex g:5px ja:center
		bgc:cooler2
		&.done bgc:emerald5 c:white

	<self>
		
		if editing
			<div.item .done=done>
				<input type="text" bind=name>
		else
			<button.item .done=done bind=done>
				<div> name
		
		<div.actions>
			<button.edit bind=editing> if editing then "Done" else "Edit"
			<button @click=emit("deleteItem")> "Delete"


imba.mount <habit-group habits=[
	{name: "Clean Up", done: true, id: 5}
	{name: "Exercise", done: false, id: 10}
	{name: "Study", done: true, id: 100}
]>