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
	
	<self>
		<div.group>
			for habit in habits
				<habit-item
					bind:name=habit.name
					bind:done=habit.done
				>


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

	css button.edit fs:xxs c:cooler4 @hover:blue5 bgc:transparent
	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
		
		<button.edit bind=editing> if editing then "Done" else "Edit"


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