{% set title = "lnk_bills" %}

{% extends "layout/dash.html" %}

{% block content %}

<style id="grid">
.container.module:nth-child(1n) {
	grid-area: 1 / 1 / 5 / 5;
}
</style>

<div class="container module">

<button type="button" class="btn btn-primary" style="margin:10px;" data-toggle="modal" data-target="#myModal">Add</button>
<div class="modal fade" id="myModal" role="dialog">
	<div class="modal-dialog">
		<!-- Modal content-->
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">Add bill</h4>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			<div class="modal-body">
{% macro render_field(field) %}
	<dt>{{ field.label }}
	<dd>{{ field(**kwargs)|safe }}
	{% if field.errors %}
		<ul class=errors>
		{% for error in field.errors %}
		<li>{{ error }}</li>
		{% endfor %}
		</ul>
	{% endif %}
	</dd>
{% endmacro %}
				<form method=post>
					<dl>
						{{ render_field(form.payment_to) }}
						{{ render_field(form.description) }}
						{{ render_field(form.sum) }}
						{{ render_field(form.kid) }}
						{{ render_field(form.date_due) }} YYYY-MM-DD 
					</dl>
					<input type=submit value="Add">
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

<table class="table">
	<thead class="thead-light">
		<tr>
			<th scope="col">Payment to</th>
			<th scope="col">Description</th>
			<th scope="col" style="width: 120px">Sum</th>
			<th scope="col" style="width: 220px">KID</th>
			<th scope="col" style="width: 120px">Date Due</th>
			<th scope="col" style="width: 150px">Payment status</th>
		</tr>
	</thead>
	<tbody>
{% for row in data %}
		<!--<tr class="table-{{ 'success' if row[5] else 'danger' }}">-->
		<tr>
			<th>{{ row[0] }}</th>
			<td>{{ row[1] }}</td>
			<td>{{ row[2] }}</td>
			<td>{{ row[3] }}</td>
			<td>{{ row[4] }}</td>
			<td style="background-color:{{ '#4F4' if row[5] else '#F44' }};"></td>
		</tr>
{% endfor %}
	</tbody>
</table>

</div>

{% endblock %}