btc-rpc-explorer/views/includes/block-content.pug

ul.nav.nav-tabs.mb-3
	li.nav-item
		a.nav-link.active(data-toggle="tab", href="#tab-details", role="tab") Details
	li.nav-item
		a.nav-link(data-toggle="tab", href="#tab-json", role="tab") JSON

- var txCount = result.getblock.tx.length;

div.tab-content
	div(id="tab-details", class="tab-pane active", role="tabpanel")
		if (global.specialBlocks && global.specialBlocks[result.getblock.hash])
			div(class="alert alert-primary shadow-sm", style="padding-bottom: 0;")
				div(class="float-left", style="width: 55px; height: 55px; font-size: 18px;")
					i(class="fas fa-certificate fa-2x", style="margin-top: 10px;")
				h4(class="alert-heading h6 font-weight-bold") #{coinConfig.name} Fun

				// special transaction info
				- var sbInfo = global.specialBlocks[result.getblock.hash];
				if (sbInfo.alertBodyHtml)
					p
						span !{sbInfo.alertBodyHtml}

						if (sbInfo.referenceUrl && sbInfo.referenceUrl.trim().length > 0 && sbInfo.alertBodyHtml.indexOf(sbInfo.referenceUrl) == -1)
							span  
								a(href=sbInfo.referenceUrl) Read more

				else
					p
						span #{sbInfo.summary}

						if (sbInfo.referenceUrl && sbInfo.referenceUrl.trim().length > 0)
							span  
								a(href=sbInfo.referenceUrl) Read more

		div.card.shadow-sm.mb-3
			div.card-body.px-2.px-md-3
				h3.h6 Summary
				hr

				div.row
					div(class="col-md-6")
						div.row
							div.summary-split-table-label Previous Block
							div.summary-split-table-content.text-monospace
								if (result.getblock.previousblockhash)
									a(class="word-wrap", href=("/block/" + result.getblock.previousblockhash)) #{result.getblock.previousblockhash}
									br
									span (##{(result.getblock.height - 1).toLocaleString()})

								else if (result.getblock.hash == genesisBlockHash)
									span None (genesis block)

						div.row
							div.summary-split-table-label Date
							div.summary-split-table-content.text-monospace
								- var timestampHuman = result.getblock.time;
								include ./timestamp-human.pug
								small.ml-1 utc

								br

								- var timeAgoTime = result.getblock.time;
								span.text-muted (
									include ./time-ago-text.pug
									span )

						div.row
							div.summary-split-table-label Transactions
							div.summary-split-table-content.text-monospace #{result.getblock.tx.length.toLocaleString()}

						div.row
							div.summary-split-table-label Total Fees
							div.summary-split-table-content.text-monospace
								- var currencyValue = new Decimal(result.getblock.totalFees);
								include ./value-display.pug

						if (result.getblock.totalFees > 0)
							div.row
								div.summary-split-table-label Average Fee
								div.summary-split-table-content.text-monospace
									- var currencyValue = new Decimal(result.getblock.totalFees).dividedBy(result.getblock.strippedsize).times(coinConfig.baseCurrencyUnit.multiplier).toDecimalPlaces(1);
									span #{currencyValue} sat/vB
									br
									span.text-muted (
										- var currencyValue = new Decimal(result.getblock.totalFees).dividedBy(result.getblock.tx.length);
										include ./value-display.pug
										span )

						- var blockRewardMax = coinConfig.blockRewardFunction(result.getblock.height, global.activeBlockchain);
						- var coinbaseTxTotalOutputValue = new Decimal(0);
						each vout in result.getblock.coinbaseTx.vout
							- coinbaseTxTotalOutputValue = coinbaseTxTotalOutputValue.plus(new Decimal(vout.value));

						if (parseFloat(coinbaseTxTotalOutputValue) < blockRewardMax)
							div.row
								div.summary-split-table-label
									span.border-dotted(data-toggle="tooltip" title="The miner of this block failed to collect this value. As a result, it is lost.") Fees Destroyed
								div(class="summary-split-table-content text-monospace text-danger")
									- var currencyValue = new Decimal(blockRewardMax).minus(coinbaseTxTotalOutputValue);
									include ./value-display.pug

						if (result.getblock.weight)
							div.row
								div.summary-split-table-label Weight
								div.summary-split-table-content.text-monospace
									span(style="") #{result.getblock.weight.toLocaleString()} wu 

									span.text-muted  (#{new Decimal(100 * result.getblock.weight / coinConfig.maxBlockWeight).toDecimalPlaces(2)}% full)

									- var fullPercent = new Decimal(100 * result.getblock.weight / coinConfig.maxBlockWeight).toDecimalPlaces(0);

									div.row
										div(class="col-md-10 col-lg-8 col-12")
											div(class="progress my-1 mr-2", style="height: 4px;")
												div(class="progress-bar", role="progressbar", style=("width: " + fullPercent + "%;"), aria-valuenow=parseInt(100 * result.getblock.weight / coinConfig.maxBlockWeight), aria-valuemin="0" ,aria-valuemax="100")
									

						div.row
							div.summary-split-table-label Size
							div.summary-split-table-content.text-monospace #{result.getblock.size.toLocaleString()} bytes

						div.row
							div.summary-split-table-label Confirmations
							div.summary-split-table-content.text-monospace
								if (result.getblock.confirmations < 6)
									span(class="font-weight-bold text-warning") #{result.getblock.confirmations.toLocaleString()} 
										a(data-toggle="tooltip", title="Fewer than 6 confirmations is generally considered 'unsettled' for high-value transactions. The applicability of this guidance may vary.")
											i(class="fas fa-unlock-alt")
								else
									span(class="font-weight-bold text-success font-weight-bold") #{result.getblock.confirmations.toLocaleString()} 
										a(data-toggle="tooltip", title="6 confirmations is generally considered 'settled'. High-value transactions may require more; low-value transactions may require less.")
											i(class="fas fa-lock")


					div(class="col-md-6")
						div.row
							div.summary-split-table-label Next Block
							div.summary-split-table-content.text-monospace
								if (result.getblock.nextblockhash)
									a(href=("/block/" + result.getblock.nextblockhash)) #{result.getblock.nextblockhash}
									br
									span (##{(result.getblock.height + 1).toLocaleString()})
								else
									span None (latest block)

						div.row
							div.summary-split-table-label Difficulty
							div.summary-split-table-content.text-monospace
								- var difficultyData = utils.formatLargeNumber(result.getblock.difficulty, 3);
								
								span(title=parseFloat(result.getblock.difficulty).toLocaleString(), data-toggle="tooltip")
									span #{difficultyData[0]}
									span  x 10
									sup #{difficultyData[1].exponent}

						div.row
							div.summary-split-table-label Version
							div.summary-split-table-content.text-monospace 0x#{result.getblock.versionHex}
								span.text-muted  (decimal: #{result.getblock.version})

						div.row
							div.summary-split-table-label Nonce
							div.summary-split-table-content.text-monospace #{result.getblock.nonce}

						div.row
							div.summary-split-table-label Bits
							div.summary-split-table-content.text-monospace #{result.getblock.bits}

						div.row
							div.summary-split-table-label Merkle Root
							div.summary-split-table-content.text-monospace #{result.getblock.merkleroot}

						div.row
							div.summary-split-table-label Chainwork
							div.summary-split-table-content.text-monospace
								- var chainworkData = utils.formatLargeNumber(parseInt("0x" + result.getblock.chainwork), 2);

								span #{chainworkData[0]}
								span  x 10
								sup #{chainworkData[1].exponent}
								span  hashes
								
								span.text-muted  (#{result.getblock.chainwork.replace(/^0+/, '')})

						if (result.getblock.miner)
							div.row
								div.summary-split-table-label Miner
								div.summary-split-table-content.text-monospace.mb-0
									if (result.getblock.miner)
										if (result.getblock.miner.identifiedBy)
											small.data-tag.bg-primary(data-toggle="tooltip", title=("Identified by: " + result.getblock.miner.identifiedBy)) #{result.getblock.miner.name}

										else
											small.data-tag.bg-primary #{result.getblock.miner.name}
									else
										span ? 
										span(data-toggle="tooltip", title="Unable to identify miner")
											i(class="fas fa-info-circle")
									

		div.card.shadow-sm.mb-3
			div.card-body.px-2.px-md-3
				div.row
					div.col-md-4
						h2.h6.mb-0 #{txCount.toLocaleString()} 
							if (txCount == 1)
								span Transaction
							else
								span Transactions

					if (false || (!config.demoSite && !crawlerBot && txCount > 20))
						div(class="col-md-8 text-right")
							small.mr-1.text-muted Show
							div.btn-group(role="group")
								a.btn.btn-sm.btn-primary.px-2.py-0(href=(paginationBaseUrl + "?limit=20"), class=((limit == 20 && txCount > limit) ? "active" : false)) 20
								
								if (txCount > 50)
									a.btn.btn-sm.btn-primary.px-2.py-0(href=(paginationBaseUrl + "?limit=50") class=(limit == 50 ? "active" : false)) 50
								
								if (txCount > 100)
									a.btn.btn-sm.btn-primary.px-2.py-0(href=(paginationBaseUrl + "?limit=100"), class=(limit == 100 ? "active" : false)) 100
								
								a.btn.btn-sm.btn-primary.px-2.py-0(href=(paginationBaseUrl + "?limit=3000"), class=(limit >= txCount ? "active" : false)) all

				hr

				- var fontawesomeInputName = "sign-in-alt";
				- var fontawesomeOutputName = "sign-out-alt";

				div
					each tx, txIndex in result.transactions
						//pre
						//	code(class="json bg-light") #{JSON.stringify(tx, null, 4)}
						div.card.shadow-sm(class=(" " + ((txIndex < (result.transactions.length - 1) || txCount > limit) ? "mb-3" : "")))
							div.card-header.text-monospace
								if (tx && tx.txid)
									span ##{(txIndex + offset + 1).toLocaleString()}
									span  &ndash; 
									a(href=("/tx/" + tx.txid)) #{tx.txid}

									if (global.specialTransactions && global.specialTransactions[tx.txid])
										span  
										a(data-toggle="tooltip", title=(coinConfig.name + " Fun! See transaction for details"))
											i.fas.fa-certificate.text-primary
										
							div.card-body.px-2.px-md-3
								//pre
								//	code(class="json bg-light") #{JSON.stringify(result.txInputsByTransaction[tx.txid], null, 4)}
								if (true)
									- var txInputs = result.txInputsByTransaction[tx.txid];
									- var blockHeight = result.getblock.height;

									include ./transaction-io-details.pug
									
						//pre
						//	code(class="json bg-light") #{JSON.stringify(tx, null, 4)}

					if (!crawlerBot && txCount > limit)
						- var pageNumber = offset / limit + 1;
						- var pageCount = Math.floor(txCount / limit);
						- if (pageCount * limit < txCount) {
							- pageCount++;
						- }
						- var paginationUrlFunction = function(x) {
							- return paginationBaseUrl + "?limit=" + limit + "&offset=" + ((x - 1) * limit);
						- }
						
						hr

						include ./pagination.pug
					
	div(id="tab-json", class="tab-pane", role="tabpanel")
		- var blockDetails = JSON.parse(JSON.stringify(result.getblock));
		- blockDetails.tx = "See 'Transaction IDs'";

		ul(class='nav nav-pills mb-3')
			li.nav-item
				a(data-toggle="tab", href="#tab-json-block-summary", class="nav-link active", role="tab") Block Summary
			li.nav-item
				a(data-toggle="tab", href="#tab-json-tx-ids", class="nav-link", role="tab") Transaction IDs

		div.tab-content
			div(id="tab-json-block-summary", class="tab-pane active", role="tabpanel")
				pre
					code(class="json bg-light") #{JSON.stringify(blockDetails, null, 4)}

			div(id="tab-json-tx-ids", class="tab-pane", role="tabpanel")
				pre
					code(class="json bg-light") #{JSON.stringify(result.getblock.tx, null, 4)}