{{ include('common/header.twig') }}{% set credit = 0 %}{% set debit = 0 %}
<div class="page-title">
    <div class="row align-items-center">
        <div class="col-sm-6">
            <h2 class="page-title-text d-inline-block">{{ page_title }}</h2>
            <div class="breadcrumbs d-inline-block">
                <ul>
                    <li><a href="{{ common.info.url }}">Dashboard</a></li>
                    <li>{{ page_title }}</li>
                </ul>
            </div>
        </div>
		<div class="col-sm-6 text-right">
			<div class="btn btn-white btn-sm text-left mr-2">
				<i class="las la-filter text-danger pr-2"></i>
                <input type="text" class="table-date-range" data-start="{{ period.start|date(common.info.date_format) }}" data-end="{{ period.end|date(common.info.date_format) }}" data-route="reports&name=statement&id={{account.id}}">
			</div>
			<div class="dropdown d-inline-block mr-2">
                <a class="btn btn-white btn-sm dropdown-toggle" data-toggle="dropdown"><i class="las la-cloud-download-alt text-primary pr-2"></i> Toggle column</a>
                <ul class="dropdown-menu dropdown-menu-right toggle-button">
                    <li><a href="#" data-column="0"><i class="las la-toggle-on pr-2"></i><span>#</span></a></li>
                    <li><a href="#" data-column="1"><i class="las la-toggle-on pr-2"></i><span>Date</span></a></li>
                    <li><a href="#" data-column="2"><i class="las la-toggle-on pr-2"></i><span>Description</span></a></li>
                    <li><a href="#" data-column="3"><i class="las la-toggle-on pr-2"></i><span>Debit</span></a></li>
                    <li><a href="#" data-column="4"><i class="las la-toggle-on pr-2"></i><span>Credit</span></a></li>
                </ul>
            </div>
			<div class="dropdown d-inline-block mr-2">
				<a class="btn btn-white btn-sm dropdown-toggle" data-toggle="dropdown"><i class="las la-cloud-download-alt text-primary pr-2"></i> Export</a>
				<ul class="dropdown-menu dropdown-menu-right export-button">
					<li><a href="#" class="pdf"><i class="las la-file-pdf pr-2"></i>PDF</a></li>
					<li><a href="#" class="excel"><i class="las la-file-excel pr-2"></i>Excel</a></li>
					<li><a href="#" class="csv"><i class="las la-file-csv pr-2"></i>CSV</a></li>
					<li><a href="#" class="print"><i class="las la-print pr-2"></i>Print</a></li>
					<li><a href="#" class="copy"><i class="las la-copy pr-2"></i>Copy</a></li>
				</ul>
			</div>
		</div>
	</div>
</div>
<div class="row">
	<div class="col-md-4 col-lg-3">
		<div class="panel panel-default">
			<div class="widget-12">
				<div class="row">
					<div class="col-7 text-left">
						<h3 class="text-primary m-0 report-credit-value"></h3>
						<h6>Total Credit</h6>
					</div>
					<div class="col-5 icon text-right"><i class="las la-money-bill-wave-alt text-primary"></i></div>
				</div>
				<div class="progress progress-lg mt-1">
					<div class="progress-bar progress-bar-striped progress-bar-primary" style="width: 100%"></div>
				</div>
			</div>
		</div>
		<div class="panel panel-default">
			<div class="widget-12">
				<div class="row">
					<div class="col-7 text-left">
						<h3 class="text-danger m-0 report-debit-value"></h3>
						<h6>Total Debit</h6>
					</div>
					<div class="col-5 icon text-right"><i class="las la-money-bill-wave text-danger"></i></div>
				</div>
				<div class="progress progress-lg mt-1">
					<div class="progress-bar progress-bar-striped progress-bar-danger" style="width: 100%"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-8 col-lg-9">
		<div class="panel panel-default">
			<div class="panel-body">
				<div class="table-responsive">
					<table class="table table-middle table-bordered table-striped datatable-count-table">
						<thead>
							<tr>
								<th>#</th>
								<td>Date</td>
								<td>Description</td>
								<td>Debit</td>
								<td>Credit</td>
							</tr>
						</thead>
						<tbody>
							{% for value in result %}
								<tr>
									<td>{{ loop.index }}</td>
									<td>{{ value.date|date(common.info.date_format) }}</td>
									<td>{{ value.description }}</td>
									<td>{{ common.info.currency_abbr~value.debit }}{% set debit = debit + value.debit %}</td>
									<td>{{ common.info.currency_abbr~value.credit }}{% set credit = credit + value.credit %}</td>
								</tr>
							{% endfor %}
						</tbody>
						<tfoot>
							<tr>
								<th></th>
								<th></th>
								<th></th>
								<th></th>
								<th></th>
							</tr>
						</tfoot>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
<input type="hidden" class="report-statement-credit" value="{{ common.info.currency_abbr~credit }}">
<input type="hidden" class="report-statement-debit" value="{{ common.info.currency_abbr~debit }}">
{{ include('common/footer.twig') }}