<can-component tag="hello-world">
	<style type="less">
		i {
			color: red;
		}
	</style>
	<view>
		{{#if visible}}<b>{{caps message}}</b>{{else}}<i>Click me</i>{{/if}}
	</view>
	<view-model>
		import DefineMap from "can-define/map/map";

		export default DefineMap.extend({
			visible: { default: true },
			message: { default: "Hello There!" }
		});
	</view-model>
	<events>
		export default {
			click: function(){
				this.viewModel.visible = !this.viewModel.visible;
			}
		};
	</events>
	<helpers>
		exports.caps = function(txt){
			txt = txt.isComputed ? txt() : txt;
			return txt.toUpperCase();
		};
	</helpers>
</can-component>
