<!DOCTYPE html>
<html>
<head>
	<title>Sortable Table using Polymer Web Components</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<script src="../../webcomponentsjs/webcomponents.min.js"></script>
	<link rel="import" href="../sortable-table.html">
	<link rel="import" href="fruit-icon.html">
	<link rel="import" href="project-docs.html">
</head>
<body unresolved is="project-docs">

	<h1>Row Templates</h1>

	Using <code>rowTemplate</code> to populate rows, should work when a cell <code>formula</code> is specified, and all normal row selection functionality should continue to operate (clicks and checkboxes).<br>
	Row templates allow live 2-way data-binding between cells, using individual <code>cellTemplate</code>s can't usually do this.<br>
	Notice the <em>Formula Total</em> doesn't refresh instantly, but the <em>Template Total</em> does.
	<p>

	<template id="example" bind>
		<sortable-table class="default" rowTemplate="simpleRowTemplate" rowSelection="{{rowSelection}}" multiSelect="{{multiSelect}}" checkbox="{{checkbox}}">
			<sortable-column name="fruit">Fruit</sortable-column>
			<sortable-column name="alice">Alice</sortable-column>
			<sortable-column name="bill">Bill</sortable-column>
			<sortable-column name="casey">Casey</sortable-column>
			<sortable-column name="live" formula="function(row){ return +row.alice + +row.bill + +row.casey; }">Template Total</sortable-column>
			<sortable-column name="total" formula="function(row){ return +row.alice + +row.bill + +row.casey; }">Formula Total</sortable-column>

			<template id="simpleRowTemplate">
				<td style="text-align:left;font-weight:bold">
					<template bind="{{record.fields.fruit}}">
						<fruit-icon fruit="{{value}}"></fruit-icon>
						{{value}}
					</template>
				</td>
				<td style="width:10%;"><input type="number" value="{{record.row.alice}}" style="width:100%;margin-left:-2px;text-align:right;font-size:larger;"></td>
				<td style="width:10%;"><input type="number" value="{{record.row.bill}}" style="width:100%;margin-left:-2px;text-align:right;font-size:larger;"></td>
				<td style="width:10%;"><input type="number" value="{{record.row.casey}}" style="width:100%;margin-left:-2px;text-align:right;font-size:larger;"></td>
				<td style="text-align:right"><b>{{+record.row.alice + +record.row.bill + +record.row.casey}}</b></td>
				<td style="text-align:right"><b>{{record.fields.total.value}}</b></td>
			</template>

			[
				{fruit: 'apple', alice: 4, bill: 10, casey: 2 },
				{fruit: 'banana', alice: 0, bill: 4, casey: 0 },
				{fruit: 'grape', alice: 2, bill: 3, casey: 5 },
				{fruit: 'pear', alice: 4, bill: 2, casey: 8 },
				{fruit: 'strawberry', alice: 0, bill: 14, casey: 0 }
			]
		</sortable-table>
		<p>
		<strong>Enabled Interactions:</strong><br>
		<input type="checkbox" checked="{{rowSelection}}">rowSelection<br>
		<input type="checkbox" checked="{{multiSelect}}">multiSelect<br>
		<input type="checkbox" checked="{{checkbox}}">checkbox<br>
	</template>

	<script>
	window.addEventListener('polymer-ready', function(){
		var model = {
			rowSelection: true,
			multiSelect: false,
			checkbox: true
		};
		document.getElementById('example').model = model;
	});
	</script>
</body>
</html>