invoices.html

<div class="card">
	<div class="card-header">
		<h3 class="card-title">Invoices</h3>
	</div>
	<div class="card-body border-bottom py-3">

		<div class="d-flex">
			<div class="text-muted">
				Show
				<div class="mx-2 d-inline-block">
					<input type="text" class="form-control form-control-sm" value="8" size="3">
				</div>
				entries
			</div>

			<div class="ml-auto text-muted">
				Search:
				<div class="ml-2 d-inline-block">
					<input type="text" class="form-control form-control-sm">
				</div>
			</div>
		</div>

	</div>
	<div class="table-responsive">
		<table class="table card-table table-vcenter text-nowrap datatable">
			<thead>
			<tr>
				<th class="w-1"><input class="form-check-input m-0 align-middle" type="checkbox"></th>
				<th class="w-1">No. {% include ui/icon.html icon="chevron-up" class="icon-sm text-dark icon-thick" %}</th>
				<th>Invoice Subject {% include ui/icon.html icon="code" class="icon-sm" %}</th>
				<th>Client {% include ui/icon.html icon="code" class="icon-sm" %}</th>
				<th>VAT No. {% include ui/icon.html icon="code" class="icon-sm" %}</th>
				<th>Created {% include ui/icon.html icon="code" class="icon-sm" %}</th>
				<th>Status {% include ui/icon.html icon="code" class="icon-sm" %}</th>
				<th>Price {% include ui/icon.html icon="code" class="icon-sm" %}</th>
				<th></th>
			</tr>
			</thead>

			<tbody>
			{% for invoice in site.data.invoices limit: 8 %}
			<tr>
				<td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
				<td><span class="text-muted">00{{ forloop.index | plus: 1400 }}</span></td>
				<td><a href="invoice.html" class="text-reset" tabindex="-1">{{ invoice.name }}</a></td>
				<td>
					{% include ui/flag.html flag=invoice.country %}
					{{ invoice.client }}
				</td>
				<td>
					{{ invoice.vat-no }}
				</td>
				<td>
					{{ invoice.date }}
				</td>
				<td>
					<span class="status-icon bg-{{ invoice.status }}"></span> {{ invoice.status-name }}
				</td>
				<td>{{ invoice.price }}</td>

				<td class="text-right">
					<span class="dropdown ml-1">
						<button class="btn btn-secondary btn-sm dropdown-toggle align-text-top" data-boundary="viewport" data-toggle="dropdown">Actions</button>
						{% include ui/dropdown-menu.html right=true %}
					</span>
				</td>
			</tr>
			{% endfor %}
			</tbody>
		</table>
	</div>
	<div class="card-footer d-flex align-items-center">
		<p class="m-0 text-muted">Showing <span>1</span> to <span>8</span> of <span>16</span> entries</p>
		{% include ui/pagination.html class="m-0 ml-auto" %}
	</div>
</div>