btc-rpc-explorer/views/includes/blocks-list.pug

div.table-responsive
	table.table.table-striped.mb-0
		thead
			tr
				//th
				th
				th.data-header.text-right Height

				if (!hideTimestampColumn)
					th.data-header.text-right
						span.border-dotted(title="UTC timestamp of the block.", data-toggle="tooltip") Date

				th.data-header.text-right Age
				th.data-header.text-right
					span.border-dotted(title="Time To Mine - The time it took to mine this block after the previous block. 'Fast' blocks (mined in < 5min) are shown in green; 'slow' blocks (mined in > 15min) are shown in red.", data-toggle="tooltip") T.T.M.
				th.data-header.text-right Miner
				th.data-header.text-right
					span.border-dotted(title="The number of transactions included in each block.", data-toggle="tooltip") N(tx)

				if (blockstatsByHeight)
					th.data-header.text-right
						span.border-dotted(title="The total output of all transactions in each block.", data-toggle="tooltip") Volume

				th.data-header.text-right
					span.border-dotted(title="The average fee (sat/vB) for all block transactions.", data-toggle="tooltip") Avg Fee
				th.data-header.text-right Σ Fees
				
				//th.data-header.text-right Size (kB)

				if (blocks && blocks.length > 0 && blocks[0].weight)
					th.data-header.text-right % Full
						//span.border-dotted(title="Block weight, in kWu.", data-toggle="tooltip") Weight

				else
					th.data-header.text-right Size
						small  (kB)
		tbody

			each block, blockIndex in blocks
				if (block && ((sort == "desc" && blockIndex < blocks.length - 1) || (sort == "asc" && (block.height == 0 || blockIndex > 0))))
					tr
						td
							if (sort == "desc")
								small.text-muted #{(blockIndex + offset + 1).toLocaleString()}
							else
								small.text-muted #{(blockIndex + offset).toLocaleString()}

						td.data-cell.text-monospace.text-right
							if (global.specialBlocks && global.specialBlocks[block.hash])
								a(data-toggle="tooltip", title=(coinConfig.name + " Fun! See block for details"))
									i.fas.fa-certificate.text-primary.mr-1

							a(href=("/block-height/" + block.height)) #{block.height.toLocaleString()}
						

						- var timeAgoTime = moment.utc(new Date()).diff(moment.utc(new Date(parseInt(block.time) * 1000)));
						- var timeAgo = moment.duration(timeAgoTime);

						- var timeDiff = null;
						
						if (sort == "asc")
							if (blockIndex > 0)
								- var timeDiff = moment.duration(moment.utc(new Date(parseInt(block.time) * 1000)).diff(moment.utc(new Date(parseInt(blocks[blockIndex - 1].time) * 1000))));
						else
							if (blockIndex < blocks.length - 1)
								- var timeDiff = moment.duration(moment.utc(new Date(parseInt(block.time) * 1000)).diff(moment.utc(new Date(parseInt(blocks[blockIndex + 1].time) * 1000))));

						if (!hideTimestampColumn)
							td.data-cell.text-monospace.text-right
								- var timestampHuman = block.time;
								include timestamp-human.pug
							

						td.data-cell.text-monospace.text-right
							if (sort != "asc" && blockIndex == 0 && offset == 0 && timeAgoTime > (15 * 60 * 1000))
								- var timeAgoTime = block.time;
								span.text-danger.border-dotted(title="It's been > 15 min since this latest block.", data-toggle="tooltip")
									include ./time-ago-text.pug
							else
								- var timeAgoTime = block.time;
								include ./time-ago-text.pug

						td.data-cell.text-monospace.text-right
							if (timeDiff)
								- var colorClass = "text-muted";
								if (timeDiff < 300000)
									- var colorClass = "text-success";
								if (timeDiff > 900000)
									- var colorClass = "text-danger";

								span.font-weight-light(class=colorClass)
									span #{timeDiff.format()}
									
									if (false)
										if (timeDiff.asMinutes() < 1)
											span #{parseInt(timeDiff.asSeconds())}s
										else
											span #{parseInt(timeDiff.asMinutes())}m #{parseInt(timeDiff.asSeconds())}s

							else
								if (block.height == 0)
									small.border-dotted.text-muted(title="Not applicable: genesis block has no previous block to compare to.", data-toggle="tooltip") N/A (genesis)
								else
									span.font-weight-light.text-muted -
						
						td.data-cell.text-monospace.text-right
							if (block.miner && block.miner.name)
								small.rounded.bg-primary.text-white.px-2.py-1(data-toggle="tooltip", title=("Identified by: " + block.miner.identifiedBy)) #{utils.ellipsize(block.miner.name, 10)}
							else
								span ?

						
						td.data-cell.text-monospace.text-right #{block.tx.length.toLocaleString()}

						if (blockstatsByHeight)
							td.data-cell.text-monospace.text-right
								if (blockstatsByHeight[block.height])
									- var currencyValue = parseInt(new Decimal(blockstatsByHeight[block.height].total_out).plus(blockstatsByHeight[block.height].subsidy).plus(blockstatsByHeight[block.height].totalfee).dividedBy(coinConfig.baseCurrencyUnit.multiplier));
									- var currencyValueDecimals = 0;
									include ./value-display.pug

								else
									span 0

						td.data-cell.text-monospace.text-right
							- var currencyValue = new Decimal(block.totalFees).dividedBy(block.strippedsize).times(coinConfig.baseCurrencyUnit.multiplier).toDecimalPlaces(1);
							span #{currencyValue}
							
							// idea: show typical tx fee, maybe also optimized fee if not segwit
							if (false)
								- var feeEstimateVal = currencyValue.times(166).dividedBy(coinConfig.baseCurrencyUnit.multiplier);
								span.border-dotted(title=`Value: ${feeEstimateVal}`, data-toggle="tooltip") #{currencyValue}

						td.data-cell.text-monospace.text-right
							- var currencyValue = new Decimal(block.totalFees);
							- var currencyValueDecimals = 3;
							include ./value-display.pug

							
						
						if (false)
							td.data-cell.text-monospace.text-right
								- var bSizeK = parseInt(block.size / 1000);
								span #{bSizeK.toLocaleString()}

						if (blocks && blocks.length > 0 && blocks[0].weight)
							td.data-cell.text-monospace.text-right
								if (true)
									- var full = new Decimal(block.weight).dividedBy(coinConfig.maxBlockWeight).times(100);
									- var full2 = full.toDP(2);

									span #{full2} 
									if (full > 90)
										img(src="/img/block-fullness-3.png", style="width: 18px; height: 18px;")
									else if (full > 50)
										img(src="/img/block-fullness-2.png", style="width: 18px; height: 18px;")
									else if (full > 25)
										img(src="/img/block-fullness-1.png", style="width: 18px; height: 18px;")
									else
										img(src="/img/block-fullness-0.png", style="width: 18px; height: 18px;")

								else
									- var bWeightK = parseInt(block.weight / 1000);
									- var fullPercent = new Decimal(100 * block.weight / coinConfig.maxBlockWeight).toDecimalPlaces(1);

									span #{bWeightK.toLocaleString()} 
									small.font-weight-light.text-muted (#{fullPercent}%)

									- var bSizeK = parseInt(block.size / 1000);
									span.ml-1(data-toggle="tooltip", title=`Size: ${bSizeK.toLocaleString()} kB`)
										i.fas.fa-ellipsis-h.text-muted

									div.progress(style="height: 4px;")
										div.progress-bar(role="progressbar", style=("width: " + fullPercent + "%;"), aria-valuenow=parseInt(100 * block.weight / coinConfig.maxBlockWeight), aria-valuemin="0" ,aria-valuemax="100")

						else
							td.data-cell.text-monospace.text-right
								- var bSizeK = parseInt(block.size / 1000);
								- var fullPercent = new Decimal(100 * block.size / coinConfig.maxBlockSize).toDecimalPlaces(1);

								span #{bSizeK.toLocaleString()} 
								small.font-weight-light.text-muted (#{fullPercent}%)

								div.progress(style="height: 4px;")
									div.progress-bar(role="progressbar", style=("width: " + fullPercent + "%;"), aria-valuenow=parseInt(100 * block.size / coinConfig.maxBlockSize), aria-valuemin="0" ,aria-valuemax="100")

					- var lastBlock = block;