{% extends "wallet/components/wallet_tab.jinja" %}
{% set tab = 'wallet_tx' %}
{% block content %}
	<style>
		.address {
			text-decoration: none;
			color: inherit;
			float: right;
			margin-left: 10px;
		}
		.table-holder .balance {
			display: inline;
		}
		.label {
			text-align: left;
			padding-left: 0;
			float: left;
			width: auto;
			flex-grow: 1;
		}
		.update {
			float: left;
			margin-right: 5px;
			margin-left: 5px;
		}
		.cancel {
			float: left;
			margin-left: 5px;
		}
		.edit {
			float: right;
			margin-top: 8px;
		}
		.label-row {
			display: flex;
			flex-direction: row;
		}
		.label-row > .btn {
			flex-grow: 0;
		}
	</style>
	{% from 'wallet/history/components/total_wallet_balances.jinja' import total_wallet_balances %}
	{{ total_wallet_balances(wallet, specter) }}
	<div style="padding: 0 30px; width: 100%;">
		{% from 'wallet/history/components/history_nav.jinja' import history_nav %}
		{{ history_nav('utxo', wallet_alias, viewtype) }}
		<span>View Type: </span><br>
		<div class="dropdown" style="margin-top: 5px;">
			<button class="btn radio dropbtn">{{ viewtype | title }} View &#9660;</button>
			<div class="dropdown-content">
				<a href="./?view=address&idx={{ idx }}">Address View</a>
				<a href="./?view=label&idx={{ idx }}">Labels View</a>
			</div>
		</div>
	</div>
	{% from 'wallet/components/editable_label.jinja' import editable_label %}
	{% from 'wallet/components/explorer_link.jinja' import explorer_link %}
	{% from 'wallet/history/components/tx_table.jinja' import tx_table %}
	{% from 'wallet/history/utxo/components/account_utxo_table.jinja' import account_utxo_table %}
	{% set is_address_view = viewtype == "address" %}
	{% set accounts = wallet.utxo_addresses(idx) if is_address_view else wallet.utxo_labels(idx)  %}
	{% set next_utxos = wallet.utxo_addresses(idx + 1) if is_address_view else wallet.utxo_labels(idx + 1) %}
	{% if idx != 0 or next_utxos|length != 0 %}
		<div>
			<a href="./?view={{ viewtype }}&idx={{ idx - 1 }}" class="pagination-arrow {% if idx == 0 %}pagination-disabled{% endif %}">&#8249;</a>
			{% if next_utxos|length > 0 or idx != 0 %}
			Page {{ idx + 1 }}
			{% endif %}
			<a href="./?view={{ viewtype }}&idx={{ idx + 1 }}" class="pagination-arrow {% if next_utxos|length == 0 %}pagination-disabled{% endif %}">&#8250;</a>
		</div>
	{% endif %}
	{% for account in accounts %}
		{% set balance = wallet.balance_on_address(account) if is_address_view else wallet.balance_on_label(account) %}
		{% if balance > 0 %}
			{% set account_label = wallet.get_address_name(account, -1) if is_address_view else account %}
			<div class="table-holder">
				<br>
				<form action="./?view={{ viewtype }}&idx={{ idx }}" method="POST" class="label-row">
					<br>
					<input type="hidden" name="account" value="{{ account }}"/>
					{{ editable_label(account_label, loop.index0) }}
					<br>
				</form><br><br>
				{% if is_address_view %}
					<span class="address optional">{{ explorer_link('address', account, account, specter.explorer) }}</span>
					<span class="tx scroll mobile-only">{{ explorer_link('address', account, account, specter.explorer) }}</span>
				{% else %}
				<br class="mobile-only">
				<br class="mobile-only">
				{% endif %}
				<p class="balance">Balance: 
					{{ balance | btcunitamount }} 
					{% if specter.unit == 'sat' %}
						sats
					{% else %}
						{% if specter.chain !='main' %}t{%endif%}BTC
					{% endif %}
					{% if specter.price_check %}
						<span class="note">&nbsp;({{ balance | altunit }})</span>
					{% endif %}
				</p>
				<br><br>
				{{ 
					tx_table(
						not (wallet.utxo_on_address(account) if is_address_view else wallet.utxo_on_label(account) > 0),
						account_utxo_table(account, viewtype, wallet, specter)
					) 
				}}
			</div>
		{% endif %}
	{% endfor %}
{% endblock %}
