{% extends '../_layouts/_main.twig' %}
{% block addition %}
	<link rel="stylesheet" href="/css/partials/userspace.css" type="text/css" media="all" />
{% endblock %}
{% block content %}
	<div class="cp-userspace">
		<div class="cp-userspace-topInfo">
			<ul class="cp-userspace-topInfo__list">
				<li title="Speaks Estonian from Estonia"><img src="/images/flag/ru.png" alt="" width="24" height="18">.</li>
				<li><strong>Deador</strong> (Private)</li>
				<li class="sep">Free loan: <strong>-357.41 €</strong></li>
			</ul>
		</div>

		<div class="mb-20"></div>

		<div class="cp-userspace-tabs">
			<ul class="cp-userspace-tabs__list">
				<li>
					<a href="#">Profile</a>
				</li>
				<li>
					<a href="#"><i class="fa fa-shopping-cart"></i> Cart</a>
				</li>
				<li>
					<a href="#">Order 4603884</a>
				</li>
				<li>
					<a href="#">Orders (4)</a>
				</li>
				<li>
					<a href="#">Offers</a>
				</li>
				<li>
					<a href="#">Credit bills</a>
				</li>
				<li>
					<a href="#">Emails</a>
				</li>
				<li>
					<a href="#">Viewed pages</a>
				</li>
				<li class="active">
					<a href="#">Documents</a>
				</li>
			</ul>
		</div>

		<div class="cp-userspace-pane">

			<div class="mb-20">
				<ul class="tab-btns _inline">
					<li><a href="tab-documents.html">Счета</a></li>
					<li><a href="tab-documents_credit.html" class="active">Кредитные счета</a></li>
				</ul>
			</div>

			<div class="mb-20 flex-row row-32 align-items-end">
				<div class="flex-col-auto">
					<div class="form-group">
						<div class="form-label"><strong>Выберите год:</strong></div>
						<div class="form-field watcher">
							<select class="form-control">
								<option>2021</option>
								<option>2022</option>
								<option selected>2023</option>
							</select>
						</div>
					</div>
				</div>
				<div class="flex-col-auto">
					<div class="form-group">
						<div class="form-label"><strong>Выберите дочернее подразделение:</strong></div>
						<div class="form-field watcher">
							<select class="form-control">
								<option>Все</option>
								<option>---</option>
								<option>---</option>
								<option>---</option>
								<option>---</option>
								<option>---</option>
							</select>
						</div>
					</div>
				</div>
				<div class="flex-col-auto ml-auto text-right">
					<span class="icobox size_16">
						<i class="ico fa fa-download text-primary"></i>
						<a href="#" class="dash-link">Скачать все pdf одним архивом</a>
					</span>
					<br />
					<span class="icobox size_16">
						<i class="ico fa fa-download text-primary"></i>
						<a href="#" class="dash-link">Скачать всю таблицу счетов в Excel</a>
					</span>
				</div>
			</div>

			<div class="scroller-x">
				{% set tableData = [
					{
						"id" : "230216-4545596",
						"company" : "HITEH AUTOTEENINDUS OÜ - Kristjan Palmet",
						"date" : "16.02.2023",
						"paymentTerm" : "21.03.2023",
						"price" : 13.45,
						"tax" : 2.69,
						"total" : 16.14,
						"payments" : [
						{
							"sum" : 16.14,
							"label" : "Wire transfer",
							"details" : "18.02.2023, 13:10:45 Swedbank"
						}
					],
						"paymentDiff" : 0
					},{
						"id" : "230216-4545596",
						"company" : "HITEH AUTOTEENINDUS OÜ - Kristjan Palmet",
						"date" : "16.02.2023",
						"paymentTerm" : "21.03.2023",
						"price" : 13.45,
						"tax" : 2.69,
						"total" : 16.14,
						"payments" : [
							{
								"sum" : 16.14,
								"label" : "Loan <a href='#'>193745CR4355925</a>",
								"details" : "18.02.2023, 13:10:45 Swedbank"
							},{
								"sum" : 16.14,
								"label" : "Wire transfer",
								"details" : "18.02.2023, 13:10:45 Swedbank"
							},{
								"sum" : 16.14,
								"label" : "Loan <a href='#'>193745CR4355925</a>",
								"details" : "18.02.2023, 13:10:45 Swedbank"
							}
						],
						"paymentDiff" : -109.82
					},{
						"id" : "230216-4545596",
						"company" : "HITEH AUTOTEENINDUS OÜ - Kristjan Palmet",
						"date" : "16.02.2023",
						"paymentTerm" : "21.03.2023",
						"price" : 13.45,
						"tax" : 2.69,
						"total" : 16.14,
						"payments" : [
							{
								"sum" : 16.14,
								"label" : "Wire transfer",
								"details" : "18.02.2023, 13:10:45 Swedbank"
							}
						],
						"paymentDiff" : 9
					},{
						"id" : "230216-4545596",
						"company" : "HITEH AUTOTEENINDUS OÜ - Kristjan Palmet",
						"date" : "16.02.2023",
						"paymentTerm" : "21.03.2023",
						"price" : 13.45,
						"tax" : 2.69,
						"total" : 16.14,
						"payments" : [
							{
								"sum" : 16.14,
								"label" : "Wire transfer",
								"details" : "18.02.2023, 13:10:45 Swedbank"
							}
						],
						"paymentDiff" : 0
					},{
						"id" : "230216-4545596",
						"company" : "HITEH AUTOTEENINDUS OÜ - Kristjan Palmet",
						"date" : "16.02.2023",
						"paymentTerm" : "21.03.2023",
						"price" : 13.45,
						"tax" : 2.69,
						"total" : 16.14,
						"payments" : [
							{
								"sum" : 16.14,
								"label" : "Wire transfer",
								"details" : "18.02.2023, 13:10:45 Swedbank"
							}
						],
						"paymentDiff" : 0
					},{
						"id" : "230216-4545596",
						"company" : "HITEH AUTOTEENINDUS OÜ - Kristjan Palmet",
						"date" : "16.02.2023",
						"paymentTerm" : "21.03.2023",
						"price" : 13.45,
						"tax" : 2.69,
						"total" : 16.14,
						"payments" : [
							{
								"sum" : 16.14,
								"label" : "Wire transfer",
								"details" : "18.02.2023, 13:10:45 Swedbank"
							}
						],
						"paymentDiff" : 0
					},{
						"id" : "230216-4545596",
						"company" : "HITEH AUTOTEENINDUS OÜ - Kristjan Palmet",
						"date" : "16.02.2023",
						"paymentTerm" : "21.03.2023",
						"price" : 13.45,
						"tax" : 2.69,
						"total" : 16.14,
						"payments" : [
							{
								"sum" : 16.14,
								"label" : "Loan <a href='#'>193745CR4355925</a>",
								"details" : "18.02.2023, 13:10:45 Swedbank"
							}
						],
						"paymentDiff" : 0
					},{
						"id" : "230216-4545596",
						"company" : "HITEH AUTOTEENINDUS OÜ - Kristjan Palmet",
						"date" : "16.02.2023",
						"paymentTerm" : "21.03.2023",
						"price" : 13.45,
						"tax" : 2.69,
						"total" : 16.14,
						"payments" : [
							{
								"sum" : 16.14,
								"label" : "Wire transfer",
								"details" : "18.02.2023, 13:10:45 Swedbank"
							},{
								"sum" : 16.14,
								"label" : "Loan <a href='#'>193745CR4355925</a>",
								"details" : "18.02.2023, 13:10:45 Swedbank"
							},{
								"sum" : 16.14,
								"label" : "Wire transfer",
								"details" : "18.02.2023, 13:10:45 Swedbank"
							}
						],
						"paymentDiff" : 0
					},{
						"id" : "230216-4545596",
						"company" : "HITEH AUTOTEENINDUS OÜ - Kristjan Palmet",
						"date" : "16.02.2023",
						"paymentTerm" : "21.03.2023",
						"price" : 13.45,
						"tax" : 2.69,
						"total" : 16.14,
						"payments" : [
							{
								"sum" : 16.14,
								"label" : "Wire transfer",
								"details" : "18.02.2023, 13:10:45 Swedbank"
							}
						],
						"paymentDiff" : 0
					},{
						"id" : "230216-4545596",
						"company" : "HITEH AUTOTEENINDUS OÜ - Kristjan Palmet",
						"date" : "16.02.2023",
						"paymentTerm" : "21.03.2023",
						"price" : 13.45,
						"tax" : 2.69,
						"total" : 16.14,
						"payments" : [
							{
								"sum" : 16.14,
								"label" : "Wire transfer",
								"details" : "18.02.2023, 13:10:45 Swedbank"
							}
						],
						"paymentDiff" : 0
					},{
						"id" : "230216-4545596",
						"company" : "HITEH AUTOTEENINDUS OÜ - Kristjan Palmet",
						"date" : "16.02.2023",
						"paymentTerm" : "21.03.2023",
						"price" : 13.45,
						"tax" : 2.69,
						"total" : 16.14,
						"payments" : [
							{
								"sum" : 16.14,
								"label" : "Wire transfer",
								"details" : "18.02.2023, 13:10:45 Swedbank"
							}
						],
						"paymentDiff" : 0
					},{
						"id" : "230216-4545596",
						"company" : "HITEH AUTOTEENINDUS OÜ - Kristjan Palmet",
						"date" : "16.02.2023",
						"paymentTerm" : "21.03.2023",
						"price" : 13.45,
						"tax" : 2.69,
						"total" : 16.14,
						"payments" : [
							{
								"sum" : 16.14,
								"label" : "Wire transfer",
								"details" : "18.02.2023, 13:10:45 Swedbank"
							}
						],
						"paymentDiff" : 0
					}
				] %}
				<table class="cp-table _striped _highlight _js-highlight">
					<thead>
					<tr>
						<th class="text-right">Номер счёта</th>
						<th>Дочернее подразделение</th>
						<th class="text-right">Дата счёта</th>
						<th class="text-right">Срок оплаты</th>
						<th class="text-right">Сумма</th>
						<th class="text-right">Налог</th>
						<th class="text-right">К выплате</th>
						<th class="text-right">Оплачено</th>
						<th>Метод выплаты</th>
						<th class="text-right">Остаток</th>
						<th>Запросить выплату</th>
						<th class="text-center">Скачать счёт</th>
					</tr>
					</thead>
					<tbody>
					{% for tr in tableData %}
						<tr>
							<td class="text-right"><a href="/bill/{{ tr.id }}">{{ tr.id }}</a></td>
							<td>{{ tr.company }}</td>
							<td class="text-right">{{ tr.date }}</td>
							<td class="text-right">{{ tr.paymentTerm }}</td>
							<td class="text-right">{{ tr.price }} €</td>
							<td class="text-right">{{ tr.tax }} €</td>
							<td class="text-right">{{ tr.total }} €</td>
							<td class="text-right">
								{% for payment in tr.payments %}
									<div class="text-nowrap">{{ payment.sum }} €</div>
								{% endfor %}
							</td>
							<td>
								{% for payment in tr.payments %}
									<div class="text-nowrap" data-toggle="tooltip" title="{{ payment.details }}">{{ payment.label }}</div>
								{% endfor %}
							</td>
							<td class="text-right">
								{% set payout = false %}
								{% if tr.paymentDiff < 0 %}
									<strong class="color-danger">{{ tr.paymentDiff }} €</strong>
									{% set payout = true %}
								{% elseif tr.paymentDiff > 0 %}
									<strong class="color-green">{{ tr.paymentDiff }} €</strong>
								{% else %}
									{{ tr.paymentDiff }} €
								{% endif %}
							</td>
							<td>
								{% if payout %}
									<a href="#">Запросить выплату</a>
								{% endif %}
							</td>
							<td class="text-center"><a href="/link/to/pdf/{{ tr.id }}">pdf</a></td>
						</tr>
					{% endfor %}
					</tbody>
				</table>
			</div>

		</div>

	</div>
{% endblock %}