<can-component tag="frankenstein">
	<style>
		h2.correct, h2.wrong { display: inline-block; }
		.correct { color: green; }
		.wrong { color: red; }
	</style>
	<template>
		<h2>What is the best Frankenstein Movie?</h2>
		<select can-value="choice">
			<option value="frankenstein">Frankenstein (1931)</option>
			<option value="bride-of-frankenstein">Bride of Frankenstein</option>
			<option value="young-frankenstein">Young Frankenstein</option>
			<option value="i-frankenstein">I, Frankenstein</option>
		</select>
		{{#if choice}}
			{{#if isCorrect}}
				<h2 class="correct">That's it!</h2>
			{{else}}
				<h2 class="wrong">No way!</h2>
			{{/if}}
		{{/if}}
	</template>
	<view-model from="can/component/examples/frankenstein-vm"></view-model>
	<script type="events">
		module.exports = {
			"h2 click": function() { alert("that's right!"); }
		};
	</script>
</can-component>
