<template id="tx-table">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
    <style>
        .tx-table {
            display: table;
        }
        tx-row {
            display: contents;
        }
        .pagination-container {
            text-align: center;
            width: 100%;
        }
        .pagination-next, .pagination-back {
            cursor: pointer;
        }
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        input[type=number] {
            -moz-appearance: textfield;
        }

        .pagination-idx {
            min-width: 50px;
            max-width: 50px;
            width: 50px;
            margin: 7px 7px 7px 3px;
            text-align: center;
            height: 35px;
        }
        .search {
            /* float: right; */
            margin: auto;
            width: 100%;
            max-width: 350px;
        }
        .search-container {
            width: 100%;
            display: flex;
            margin-bottom: 0.5em;
        }
        .up-arrow {
            width: 0;
            height: 0;
            border: solid 5px transparent;
            background: transparent;
            border-bottom: solid 7px #fff;
            border-top-width: 0;
            cursor: pointer;
            float: right;
            margin-right: 50px;
            margin-top: 5px;
        }

        .down-arrow {
            width: 0;
            height: 0;
            border: solid 5px transparent;
            background: transparent;
            border-top: solid 7px #fff;
            border-bottom-width: 0;
            margin-top:1px;
            cursor: pointer;
            float: right;
            margin-right: 50px;
            margin-top: 5px;
        }
        
        .export-container {
            max-width: 50%;
            margin: 20px auto;
            border: 1px solid #fff;
            padding: 20px;
            text-align: center;
            border-radius: 7px;
        }
        .export {
            max-width: 200px;
            margin: auto;
        }
        .selected-rows-action-box {
            float: right;
        }
        .selected-rows-action-box .btn {
            width: 200px;
            margin: 5px;
            height: 38px;
        }
    </style>
    <nav class="row">
        <button
            type="button"
            class="txlist-view-btn btn radio left">
            {{ _("History") }}
        </button>
        <button
            type="button"
            class="utxo-view-btn btn radio right">
            UTXO
        </button>
    </nav>
    <div class="pagination-container">
        <a class="pagination-back pagination-arrow pagination-disabled">&#8249;</a>
        {{ _("Page") }} <input class="pagination-idx" type="number" step="1" min="1" value="1"></input><span class="pagination-counter"></span>
        <a class="pagination-next pagination-arrow pagination-disabled">&#8250;</a>
        <br>
    </div>
    <div class="search-container">
        <!--Left part of the toolbar-->
        <div style="flex: 1;">
            {% include "includes/page-limit-select.html" %}
        </div>
        <!--Middle part of the toolbar-->
        <input class="search" type="text" placeholder="Search..." />
        <!--Placeholder for right part of the toolbar-->
        <div style="flex: 1;"></div>
    </div>
    <div class="selected-rows-action-box row hidden">
        <form class="freeze-tx-form" method="POST">
            <input type="hidden" class="csrf-token" name="csrf_token" value="{{ csrf_token() }}"/>
            <button type="button" class="btn freeze-tx-btn">
                <tool-tip title="Freezing UTXOs">
                    {{ _("Freezing a UTXO will make Specter disallow spending it.") }}<br><br>
                    {{ _("This is useful especially for dealing with a dust attack, where you don't want to accidentally spend the dust received.") }}"
                </tool-tip>&nbsp;&nbsp;
                Un/Freeze UTXOs
            </button>
        </form>
        <form class="compose-tx-form" method="POST">
            <input type="hidden" class="csrf-token" name="csrf_token" value="{{ csrf_token() }}"/>
            <button type="button" class="btn compose-tx-btn">{{ _("Create new transaction") }}</button>
        </form>
    </div>
    <div class="export-container hidden">
        <h1>{{ _("Export transactions to CSV") }}</h1>
        <div class="{% if not specter.price_check or not (specter.alt_rate and specter.alt_symbol) %}hidden{% endif %}">
        {{ _("Fetch historical price data") }}:
        <label class="switch">
        <input type="checkbox" class="export-prices">
        <span class="slider"></span>
        </label><br><br>
        <div class="note">
            {{ _("If enabled, specter will try to fetch historical prices for each transaction date from the configured price provider.") }}
            <br><b>{{ _("This has privacy implications!") }}</b>
        </div><br>
        </div>
        <a class="export btn" download>{{ _("Export") }}</a>
    </div>
    <table class="tx-table">
        <thead>
            <tr>
                <th value="category" class="category-header"><div class="category-arrow"></div></th>
                <th value="txid" class="optional txid-header">TxID<div class="txid-arrow"></div></th>
                <th value="label" class="optional label-header">{{ _("Label") }}<div class="label-arrow"></div></th>
                <th value="amount" class="amount-header">{{ _("Amount") }}<div class="amount-arrow"></div></th>
                <th value="time" class="time-header">{{ _("Time") }}<div class="time-arrow up-arrow"></div></th>
                <th value="confirmations" class="confirmations-header">{{ _("Confirmations") }}<div class="confirmations-arrow"></div></th>
                <th value="blockhash" class="optional hidden blockhash-header">
                    {% include "includes/merkletooltip.html" %}
                    {{ _("Block Hash") }}
                </th>
                <th style="width: 50px; padding: 10px;"><button type="button" class="export-btn btn" style="width: 50px;">{{ _("Export") }}</button></th>
            </tr>
    </thead>
    <tr class="empty">
        <td></td>
        <td>{{ _("Fetching transactions...") }}</td>
        <td class="optional"></td>
        <td class="optional"></td>
        <td></td>
        <td></td>
        <td class="optional hidden blockhash-empty"></td>
        <td></td>
    </tr>
    <tr class="summary-row hidden">
        <td></td>
        <td class="summary-tx-count"></td>
        <td class="optional"></td>
        <td class="summary-amount"></td>
        <td class="optional"></td>
        <td></td>
        <td class="optional hidden blockhash-summary"></td>
        <td></td>
    </tr>
	<tbody class="tx-tbody">
	</tbody>
    </table>
</template>

<script type="text/javascript">
    /**
     * Custom element for showing a table of transactions.
     * Can be configured to show:
     *  - The transaction history of a wallet (set attribute `type` to "txlist" and `wallet` to the wallet's alias)
     *  - The UTXO list of a wallet (set attribute `type` to "utxo" and `wallet` to the wallet's alias)
     *  - The transaction history of all the user's wallets (set attribute `type` to "txlist" and `wallet` to null)
     *  - The UTXO list of all the user's wallets (set attribute `type` to "utxo" and `wallet` to null)
     * The uses Specter's API to fetch transactions every time the user changes its parameters.
     * These parameters are configured using components included in this table element:
     *  - Tabs for switching between History (`type="txlist"`) and UTXO (`type="utxo"`) list types
     *  - Sorting transactions by any column (ascending or descending)
     *  - Search bar to filter transactions using free text search
     *  - Configuring limit for transactions displayed per page
     *  - Pagination, jumping between pages and showing the total pages count
     *  - Export - export the full (unfiltered) list from which the table is drawing its data as CSV (optionally with price history)
     * 
     * The table also supports:
     *  - Showing amounts in either BTC or sats (set attribute `btc-unit` to either "btc" or "sat")
     *  - Showing prices next to the amounts (set attribute `price` to the BTC price and symbol to the symbol of the currency you're pricing at)
     *  - Showing validated blockhash column (set attribute `blockhash` to either "true" or "false")
    */
    class TxTableElement extends HTMLElement {
        constructor() {
            super();
            // Create a shadow root
            var shadow = this.attachShadow({mode: 'open'});
            var style = document.getElementById('tx-table').content;
            var clone = style.cloneNode(true);
            this.el = clone.querySelector(".tx-table");
            this.tbody = clone.querySelector(".tx-tbody");

            // Empty row element
            this.emptyRow = clone.querySelector(".empty");

            // Blockhash header and empty column
            this.blockhashHeader = clone.querySelector(".blockhash-header");
            this.blockhashEmpty = clone.querySelector(".blockhash-empty");
            this.blockhashSummary = clone.querySelector(".blockhash-summary");

            // Tabs (History/ UTXO)
            this.txlistViewBtn = clone.querySelector(".txlist-view-btn");
            this.utxoViewBtn = clone.querySelector(".utxo-view-btn");

            // Pagination
            this.paginationNext = clone.querySelector(".pagination-next");
            this.paginationBack = clone.querySelector(".pagination-back");
            this.paginationContainer = clone.querySelector(".pagination-container");
            this.paginationCounter = clone.querySelector(".pagination-counter");
            this.paginationIdxInput = clone.querySelector(".pagination-idx");
            this.pageLimitSelect = clone.querySelector(".page-limit-select");

            // Search bar element
            this.searchInput = clone.querySelector(".search");

            // Sorting headers and arrows
            this.categoryHeader = clone.querySelector(".category-header");
            this.txidHeader = clone.querySelector(".txid-header");
            this.labelHeader = clone.querySelector(".label-header");
            this.amountHeader = clone.querySelector(".amount-header");
            this.timeHeader = clone.querySelector(".time-header");
            this.confirmationsHeader = clone.querySelector(".confirmations-header");
            this.categoryArrow = clone.querySelector(".category-arrow");
            this.txidArrow = clone.querySelector(".txid-arrow");
            this.labelArrow = clone.querySelector(".label-arrow");
            this.amountArrow = clone.querySelector(".amount-arrow");
            this.timeArrow = clone.querySelector(".time-arrow");
            this.confirmationsArrow = clone.querySelector(".confirmations-arrow");

            // Summary row
            this.summaryRow = clone.querySelector(".summary-row");
            this.summaryTxCount = clone.querySelector(".summary-tx-count");
            this.summaryAmount = clone.querySelector(".summary-amount");

            // Export button
            this.exportBtn = clone.querySelector(".export-btn");
            this.exportContainer = clone.querySelector(".export-container");
            this.export = clone.querySelector(".export");
            this.exportPricesSwitch = clone.querySelector(".export-prices");

            // Selected rows
            this.selectedRowsActionBox = clone.querySelector(".selected-rows-action-box");
            this.composeTxForm = clone.querySelector(".compose-tx-form");
            this.composeTxBtn = clone.querySelector(".compose-tx-btn");
            this.freezeTxForm = clone.querySelector(".freeze-tx-form");
            this.freezeTxBtn = clone.querySelector(".freeze-tx-btn");
            this.selectedRows = [];
            
			this.txlistViewBtn.onclick = () => {
				if (!this.txlistViewBtn.classList.contains("checked")) {
					this.utxoViewBtn.classList.remove("checked");
					this.txlistViewBtn.classList.add("checked");
					this.setAttribute("type","txlist");
				}
			}

			this.utxoViewBtn.onclick = () => {
				if (!this.utxoViewBtn.classList.contains("checked")) {
					this.txlistViewBtn.classList.remove("checked");
					this.utxoViewBtn.classList.add("checked");
					this.setAttribute("type","utxo");
				}
            }
            
            // Init call id to avoid fetch returning after another one triggered
            this.callId = 0


            // Initialize default sort, search, limit and page parameters
            this.idx = 0;
            this.limit = 50;
            this.search = "";
            this.sortby = "time";
            this.sortdir = "desc";
            this.pageCount = 1;
            
            // Next page action
            this.paginationNext.onclick = () => {
                this.idx++;
                this.fetchTxItems();
            }

            // Previous page action
            this.paginationBack.onclick = () => {
                this.idx--;
                this.fetchTxItems();
            }

            // Listen to changes in page number selection input
            this.paginationIdxInput.onchange = () => {
                let newIdx = parseInt(this.paginationIdxInput.value);
                if (isNaN(newIdx) || (newIdx < 1 || newIdx > this.pageCount)) {
                    this.paginationIdxInput.value = this.idx + 1;
                    return;
                }
                this.idx = newIdx - 1;
                this.fetchTxItems();
            }

            // Listen to changes in search bar
            this.searchInput.onchange = () => {
                this.search = this.searchInput.value;
                this.export.href = this.export.href.split('?')[0] + `?exportPrices=${this.exportPricesSwitch.checked}&search=${this.search}&sortby=${this.sortby}&sortdir=${this.sortdir}`;
                this.fetchTxItems();
            }

            // Listen to changes in page limit
            this.pageLimitSelect.onchange = () => {
                this.limit = this.pageLimitSelect.value;
                this.fetchTxItems();
            }

            // Setup sorting functionality for each column of the table header
            let sortHeaders = [
                this.categoryHeader,
                this.txidHeader,
                this.labelHeader,
                this.amountHeader,
                this.timeHeader,
                this.confirmationsHeader
            ];

            for (let header of sortHeaders) {
                header.onclick = () => {
                    if (header.classList.toString().indexOf(this.sortby) != -1) {
                        // flip direction
                        this.el.querySelector(`.${this.sortby}-arrow`).classList.remove(this.sortdir == 'asc' ? 'down-arrow' : 'up-arrow');
                        this.el.querySelector(`.${this.sortby}-arrow`).classList.add(this.sortdir == 'asc' ? 'up-arrow' : 'down-arrow');
                        this.sortdir = this.sortdir == 'asc' ? 'desc' : 'asc';
                        this.export.href = this.export.href.split('?')[0] + `?exportPrices=${this.exportPricesSwitch.checked}&search=${this.search}&sortby=${this.sortby}&sortdir=${this.sortdir}`;
                    } else {
                        sortHeaders.forEach(el => {
                            let existingArrow = el.querySelector(`.${this.sortby}-arrow`)
                            if (existingArrow) {
                                existingArrow.classList.remove('up-arrow');
                                existingArrow.classList.remove('down-arrow');
                            }
                        });
                        this.sortby = header.getAttribute('value');
                        this.el.querySelector(`.${this.sortby}-arrow`).classList.add(this.sortdir == 'asc' ? 'down-arrow' : 'up-arrow');
                        this.export.href = this.export.href.split('?')[0] + `?exportPrices=${this.exportPricesSwitch.checked}&search=${this.search}&sortby=${this.sortby}&sortdir=${this.sortdir}`;
                    }
                    this.fetchTxItems();
                }
            }

            // Export data
            this.exportBtn.onclick = () => {
                if (this.exportBtn.innerText == 'Done') {
                    this.exportContainer.classList.add('hidden');
                    this.exportBtn.innerText = 'Export';
                } else {
                    this.exportContainer.classList.remove('hidden');
                    this.exportBtn.innerText = 'Done';
                }
            }

            this.export.onclick = () => {
                this.exportContainer.classList.add('hidden');
                this.exportBtn.innerText = 'Export';
            }
            
            // Export prices switch toggle
            this.exportPricesSwitch.onchange = () => {
                this.export.href = this.export.href.split('?')[0] + `?exportPrices=${this.exportPricesSwitch.checked}&search=${this.search}&sortby=${this.sortby}&sortdir=${this.sortdir}`;
            }

            this.composeTxBtn.onclick = () => {
                for (let tx of this.selectedRows) {
                    this.composeTxForm.innerHTML += `
                        <input type="checkbox" checked class="hidden" name="coinselect" value="${tx.txid}, ${tx.vout}">
                    `
                }
                this.composeTxForm.action = `{{ url_for('wallets_endpoint.send_new', wallet_alias='WALLET_ALIAS') }}`.replace("WALLET_ALIAS", this.wallet);
                this.composeTxForm.submit();
            }

            this.freezeTxBtn.onclick = () => {
                for (let tx of this.selectedRows) {
                    this.freezeTxForm.innerHTML += `
                        <input type="checkbox" checked class="hidden" name="selected_utxo" value="${tx.txid}:${tx.vout}">
                    `
                }
                this.freezeTxForm.innerHTML += `<input type="hidden" name="action" value="freezeutxo"/>`
                this.freezeTxForm.action = `{{ url_for('wallets_endpoint.history', wallet_alias='WALLET_ALIAS') }}`.replace("WALLET_ALIAS", this.wallet);
                this.freezeTxForm.submit();
            }

            // Attach the created element to the shadow dom
            shadow.appendChild(clone);
        }

        static get observedAttributes() {
            return ['blockhash', 'btc-unit', 'price', 'symbol', 'type', 'hide-sensitive-info', 'wallet'];
        }

        /**
         * Listens to changes on the following attributes:
         * - blockhash: Should show blockhash column. Either "true" or "false"
         * - btc-unit: Bitcoin unit to display amounts with. Either "btc" or "sat"
         * - price: BTC price for price calculations
         * - symbol: Currency symbol for price calculations
         * - type: Transactions list type to load. Either "txlist" or "utxo"
         * - hide-sensitive-info: Mask user sensitive info. Either "true" or "false"
         * - wallet: The wallet alias (null to get all wallets combined)
        */
        attributeChangedCallback(attrName, oldValue, newValue) {
            if (this.getAttribute('blockhash') == 'true' && this.getAttribute('type') == "txlist" && this.getAttribute('wallet')) {
                    this.blockhashHeader.classList.remove('hidden');
                    this.blockhashEmpty.classList.remove('hidden');
                    this.blockhashSummary.classList.remove('hidden');
            } else {
                this.blockhashHeader.classList.add('hidden');
                this.blockhashEmpty.classList.add('hidden');
                this.blockhashSummary.classList.add('hidden');
            }
            if (
                this.blockhash != this.getAttribute('blockhash') ||
                this.btcUnit != this.getAttribute('btc-unit') ||
                this.price != this.getAttribute('price') ||
                this.symbol != this.getAttribute('symbol') ||
                this.listType != this.getAttribute('type') ||
                this.hideSensitiveInfo != this.getAttribute('hide-sensitive-info') ||
                this.wallet != this.getAttribute('wallet')
            ) {
                this.blockhash = this.getAttribute('blockhash');
                this.btcUnit = this.getAttribute('btc-unit');
                this.price = this.getAttribute('price');
                this.symbol = this.getAttribute('symbol');
                this.listType = this.getAttribute('type');
                this.hideSensitiveInfo = this.getAttribute('hide-sensitive-info') == 'true';
                this.wallet = this.getAttribute('wallet');
                if (!this.listType) {
                    return
                }
                this.fetchTxItems();
            }
        }

        /**
         * Fetches txlist from the Specter API and loads the result into TxRowElement
        */
        async fetchTxItems() {
            this.callId++;
            // Clean up from existing transaction list
            this.summaryRow.classList.add('hidden');
            this.emptyRow.children[1].innerText = '{{ _("Fetching transactions...") }}';
            this.emptyRow.classList.remove('hidden');
            this.tbody.querySelectorAll('tx-row').forEach((row) => {row.remove()});
            if (!this.listType) {
                this.emptyRow.children[1].innerText = '{{ _("Failed to fetch transactions...") }}';
                return
            }

            if (this.listType == "txlist") {
                this.txlistViewBtn.classList.add("checked");
            } else {
                this.utxoViewBtn.classList.add("checked");
            }

            // Select the correct URL based on the list type and selected wallet
            let url;
            switch (this.listType) {
                case "txlist":
                    if (this.wallet) {
                        this.export.href = `{{ url_for('wallets_endpoint.tx_history_csv', wallet_alias='WALLET_ALIAS') }}`.replace("WALLET_ALIAS", this.wallet);
                        url = `{{ url_for('wallets_endpoint.txlist', wallet_alias='WALLET_ALIAS') }}`.replace("WALLET_ALIAS", this.wallet);
                    } else {
                        this.export.href = `{{ url_for('wallets_endpoint.wallet_overview_txs_csv') }}`;
                        url = `{{ url_for('wallets_endpoint.wallets_overview_txlist') }}`;
                    }
                    break;
                case "utxo":
                    if (this.wallet) {
                        this.export.href = `{{ url_for('wallets_endpoint.utxo_csv', wallet_alias='WALLET_ALIAS') }}`.replace("WALLET_ALIAS", this.wallet);
                        url = `{{ url_for('wallets_endpoint.utxo_list', wallet_alias='WALLET_ALIAS') }}`.replace("WALLET_ALIAS", this.wallet);
                    } else {
                        this.export.href = `{{ url_for('wallets_endpoint.wallet_overview_utxo_csv') }}`;
                        url = `{{ url_for('wallets_endpoint.wallets_overview_utxo_list') }}`;
                    }
                    break
                default:
                    this.export.href = ``
                    this.emptyRow.children[1].innerText = '{{ _("Failed to fetch transactions...") }} ';
                    return
            }

            if (this.export.href != '') {
                this.export.href += `?exportPrices=${this.exportPricesSwitch.checked}&search=${this.search}&sortby=${this.sortby}&sortdir=${this.sortdir}`;
            }

            // Prepare form data with all relevant parameters
            var formData = new FormData();
            formData.append('idx', this.idx);
            formData.append('limit', this.limit);
            formData.append('search', this.search);
            formData.append('sortby', this.sortby);
            formData.append('sortdir', this.sortdir);
            formData.append('csrf_token', '{{ csrf_token() }}');
            try {
                let callId = this.callId;
                const response = await fetch(
                    url,
                    {
                        method: 'POST',
                        body: formData
                    }
                );
                if (callId != this.callId) {
                    return;
                }
                if(response.status != 200){
                    showError(await response.text());
                    return;
                }
                const jsonResponse = await response.json();
                let showBlockhash = !this.blockhashHeader.classList.contains('hidden');
                
                if ("txlist" in jsonResponse) {
                    // Populate the table with TXRowElement objects using the fetched txlist
                    if (jsonResponse.txlist) {
                        let txlist = JSON.parse(jsonResponse.txlist);
                        let summaryTxCount = 0;
                        let summaryAmount = 0;
                        let summaryPrice = 0;
                        for (let tx of txlist) {
                            let txRow = document.createRange().createContextualFragment(`
                            <tx-row
                                data-btc-unit="${this.btcUnit ? this.btcUnit : 'btc'}"
                                data-price="${this.price ? this.price : 0}"
                                data-symbol="${this.symbol ? this.symbol : ''}"
                                data-tx='${JSON.stringify(tx).replace(/[\(]/g, "&lpar;").replace(/[\)]/g, "&rpar;").replace(/[\/]/g, "&sol;").replace(/[\']/g, "&apos;")}'
                                data-wallet="${(this.wallet ? this.wallet : tx.wallet_alias)}"
                                data-show-blockhash="${showBlockhash}"
                                data-mode="${this.getAttribute('type') + (this.wallet ? "" : "-overview")}"
                                data-hide-sensitive-info="${this.hideSensitiveInfo}">
                                </tx-row>
                            `)
                            this.tbody.append(txRow);
                            summaryTxCount++;
                            summaryAmount += parseFloat(this.tbody.children[this.tbody.children.length - 1].shadowRoot.querySelector('.amount').innerText.replace(',', ''));
                            summaryPrice += parseFloat(this.tbody.children[this.tbody.children.length - 1].shadowRoot.querySelector('.amount-price').innerText.replace(`(${this.symbol}`, '').replace(')', '').replace(',', ''));
                        }

                        if (summaryTxCount > 0 && this.search) {
                            this.summaryTxCount.innerText = `Transactions count: ${summaryTxCount}`;
                            this.summaryAmount.innerHTML = `Total amount: ${numberWithCommas(summaryAmount.toFixed(8))}`;
                            if (summaryPrice) {
                                this.summaryAmount.innerHTML += ` <span class="note">(${this.symbol}${numberWithCommas(summaryPrice.toFixed(2))})</span>`
                            }
                            this.summaryRow.classList.remove('hidden');
                        }
                        // Pagination
                        this.pageCount = jsonResponse.pageCount;
                        // Show empty row if no transaction found
                        if (this.pageCount == 0 || txlist.length == 0) {
                            this.emptyRow.classList.remove('hidden');
                            this.emptyRow.children[1].innerText = '{{ _("No transactions found...") }}';
                            this.pageCount = 1;
                        } else {
                            this.emptyRow.classList.add('hidden');
                        }

                        // If index is greater than the pages count fetch again for the last page
                        if (this.idx >= this.pageCount) {
                            this.idx = this.pageCount - 1;
                            this.fetchTxItems()
                        }

                        this.paginationIdxInput.value = this.idx + 1;

                        // If there are multiple pages show the pagination bar
                        if (this.pageCount > 1) {
                            this.paginationContainer.classList.remove('hidden');
                            this.paginationCounter.innerText = `of ${this.pageCount}`;
                            this.paginationIdxInput.max = this.pageCount;
                        } else {
                            this.paginationContainer.classList.add('hidden');
                        }

                        // Disable pagination back button if on the first page
                        if (this.idx == 0) {
                            this.paginationBack.classList.add('pagination-disabled');
                        } else {
                            this.paginationBack.classList.remove('pagination-disabled');
                        }

                        // Disable pagination next button if on the last page
                        if (this.idx + 1 == this.pageCount) {
                            this.paginationNext.classList.add('pagination-disabled');
                        } else {
                            this.paginationNext.classList.remove('pagination-disabled');
                        }

                        this.selectedRows = [];
                        this.selectedRowsActionBox.classList.add('hidden');

                        for (let txRow of this.shadowRoot.querySelectorAll('tx-row')) {
                            txRow.addEventListener('txRowSelected', e=>{
                                let selectedRow = e.target;
                                if (e.detail.selected) {
                                    this.selectedRows.push({
                                        txid: e.detail.txid,
                                        vout: e.detail.vout,
                                        amount: e.detail.amount.toFixed(8)
                                    });
                                } else {
                                    this.selectedRows = this.selectedRows.filter(row => !(row.txid === e.detail.txid && row.vout === e.detail.vout))
                                }
                                if (this.selectedRows.length == 0) {
                                    this.selectedRowsActionBox.classList.add('hidden');
                                } else {
                                    this.selectedRowsActionBox.classList.remove('hidden');
                                }
                            });
                        }
                    }
                    return
                };
                showError(`{{ _("Failed to fetch transactions list.") }}`)
            } catch(e) {
                console.log("Caught error: ", e);
                showError(`{{ _("Failed to fetch transactions list.") }}: ${e}`);
            }
        }
    }


    /**
     * Shows a <tx-data> element popup for specified txid.
     * @param btcUnit - Bitcoin unit to display amounts with. Either "btc" or "sat"
     * @param price - BTC price for price calculations
     * @param symbol - Currency symbol for price calculations
     * @param txid - ID of the transaction to show.
     * @param wallet - The wallet alias of the wallet the transaction is associated with.
    */
    function showTxData(btcUnit, price, symbol, txid, wallet) {
        if (wallet) {
            let txDataPopup = document.getElementById('tx-popup');
            txDataPopup.innerHTML = `
            <tx-data
            data-btc-unit="${btcUnit ? btcUnit : 'btc'}"
            data-price="${price ? price : 0}"
            data-symbol="${symbol ? symbol : ''}"
            data-txid="${txid}"
            data-tx-wallet="${wallet}">
            </tx-data>`;
            showPageOverlay('tx-popup');
        } else {
            copyText(txid, `{{ _("Copied transaction") }}: ${ txid }`);
        }
    }

    customElements.define('tx-table', TxTableElement);
</script>
