extends ./master.pug

block main
	h2
		a.float-right(href=("/countries/" + data.countrySafeName + ".html") style="font-size: 50%") ◀ #{data.country}
		=data.name + ' - ' + data.country

	div.card.mb-4
		div.card-body
			canvas.mx-auto(id="main-chart" width="800" height="450")
			script.
				makeHeroChart(
					'main-chart',
					!{JSON.stringify(data.name || '')},
					!{JSON.stringify(data.timeSeriesDaily.map(x => x.key))},
					!{JSON.stringify(data.timeSeriesDaily.map(x => x.value))},
					!{JSON.stringify(data.timeSeriesDaily.map(x => x.delta))},
				);

	div#table.table-responsive: table.table.table-sm.table-hover
		thead: tr
			th #
			th(data-col="name"): +sortableLinks("name") County/Region
			th.text-center(data-col="total"): +sortableLinks("total") Deaths
			th.text-center.sorted(data-col="yesterday"): +sortableLinks("yesterday") …since yesterday
			th.text-center(data-col="week"): +sortableLinks("week") …since last week
			th.text-center(data-col="month"): +sortableLinks("month") …month-to-date
			th Last 14 days

		-
			data.counties.sort((a, b) => {
				const yesterdayA = a.timeSeriesDaily[a.timeSeriesDaily.length - 1].delta;
				const yesterdayB = b.timeSeriesDaily[b.timeSeriesDaily.length - 1].delta;
				if (yesterdayA === yesterdayB) {
					return a.name && b.name ? a.name.localeCompare(b.name) : -1;
				}

				return yesterdayA < yesterdayB ? 1 : -1;
			});

		tbody: each item, i in data.counties
			- const yesterday = item.timeSeriesDaily[item.timeSeriesDaily.length - 1].delta || 0;
			- const lastWeek = item.timeSeriesDaily[item.timeSeriesDaily.length - 1].value - item.timeSeriesDaily[item.timeSeriesDaily.length - 7].value;
			- const lastMonth = item.timeSeriesMonthly[item.timeSeriesMonthly.length - 1].delta || 0;
			tr(id=("row-" + item.countySafeName) data-name=item.county data-total=item.total data-yesterday=yesterday data-week=lastWeek data-month=lastMonth)
				td.sort-order= i + 1
				td
					if item.county
						= item.county
					else
						em.text-muted Other #{item.state}
				td.text-right: +formatNumber(item.total)
				td.text-right.sorted: +formatNumber(yesterday)
				td.text-right: +formatNumber(lastWeek)
				td.text-right: +formatNumber(lastMonth)
				td
					canvas(id="sparkline-" + i width="200" height="50")
					script.
						makeSparkline(
							"sparkline-#{i}",
							#{JSON.stringify(item.timeSeriesDaily.slice(-14).map(x => x.value))},
						);