@import url("./ui.css");
contacts = module('xstyle/test/contacts');
body {
	=>
		h1 'Contacts of the 27 club',
		ul.contacts-list (contacts/list) {
			each: li (item/firstName + ' ' + item/lastName) {
				on-click: contacts/select(item);
			};
			border-right: 1px solid #aaa;
			float: left;
			width: 150px;
			height: 220px;
		},
		div {
			selected = contacts/selected;
			=>
				h2 (selected/firstName + ' ' + selected/lastName),
				label.start-row 'First Name:',
				input[type=text] (selected/firstName),
				label.start-row 'Last Name:',
				input[type=text] (selected/lastName),
				label.start-row 'Email:',
				input[type=email] (selected/email),
				label.start-row 'Comments:',
				textarea (selected/comments),
				div
					button 'New Contact' {
						on-click: contacts/create();
					},
					button 'Delete' {
						on-click: contacts/delete(selected);
					},
					button 'Save' {
						on-click: contacts/save(selected);
					};
			float: left;
			margin: 20px;
		};
	font-family: "Segoe UI", "Segoe WP", "Helvetica Neue", Roboto, sans-serif;
}
.start-row {
	display: block;
}
h2 {
	margin-top: 0;
}
.error {
	color: red;
}