var input = {
	amount: 0
	desc: ""
}

tag bank-transaction

	def render
		<self>
			<span.type> @data.type
			<span.amount> @data.amount
			<span.desc> @data.desc

tag bank-app
	@balance = 0
	@transactions = []
	
	def deposit
		@balance += input.amount
		@transactions.push({
			type: 'deposit'
			amount: input.amount
			desc: input.desc
		})
		
	def withdraw
		@balance -= input.amount
		@transactions.push({
			type: 'withdrawal'
			amount: -input.amount
			desc: input.desc
		})
		
	def render
		<self.grid>
			<h1> "Balance: {@balance}"
			<div.vbox>
				<input[input.amount] type='number'>
				<input[input.desc] type='text'>
				<button :click.deposit> "Deposit"
				<button :click.withdraw> "Withdraw"
			<div.transactions> for transaction in @transactions
				<bank-transaction data=transaction>

### css scoped

bank-transaction {
	display: block;
}

button {
	margin: 5px;
	width: auto;
}
input {
	width: 40px;
}

.grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	width: 80%;
	margin: 0 auto;
}
.vbox {
	display: flex;
	flex-direction: row;
}
###