<!DOCTYPE html>
<html>
	<header>
		<title>{{name}}</title>
	</header>
	<body>
		<div id="container">
			<table>
				<tr>
					<td><b>Acheté</b></td>
					<td><b>Nom</b></td>
					<td><b>Quantité</b></td>
					<td><b>Prix</b></td>
				</tr>
				<tr>
					{% for article in articles %}
						<td class="buyed">
							<input type="checkbox" id={{article.id}}>
						</td>
						<td>
							<input type="text" value={{article.name}}>
						</td>
						<td>
							<input type="number" value="{{article.quantity}}" size="7" step="1">
						</td>
						<td>
							<input type="number" value="{{article.price}}" size="9" step="0.01"'>
						</td>
					{% endfor %}
				</tr>
				<tr>
					<td class="add_element" colspan="4">
						<a href={{add_button_url}}>
							<input type="button" value="+">
						</a>
					</td>
				</tr>
			</table>
		</div>
		<style>
			td.buyed {
				text-align: center;
				vertical-align: middle;
			}
			body {
				background: #67BE4B;
			}
			#container {
				width: 400px;
				margin: 0 auto;
				margin-top: 5%;
				border: 1px solid #f1f1f1;
				background: #fff;
			}
			td.add_element {
				background: #fff;
				margin: 100%;
				text-align: center;
			}
			td.add_element input[type=button] {
				width: 100%;
				border: 0px;
				background: #67BE4B;
			}
			td.add_element input[type=button]:hover {
				background: #fff;
				border: 1px solid #67BE4B;
			}
		</style>
	</body>
</html>
