extends ./master.pug

block main
	h2.d-flex.justify-content-between
		span= data.name
		a.align-self-center(href="/" style="font-size: 50%") ◀ All Countries

	+heroChart

	mixin renderItemName(item)
		if item.name
			if item.counties && item.counties.length
				a(href=("/countries/" + item.countrySafeName + "-" + item.safeName + ".html"))= item.name
			else
				= item.name
		else if item.state
			= item.state
		else if item.country === 'United States'
			em.text-muted All #{item.country}
		else
			em.text-muted Other #{item.country}

	+dataTable(data.states, 'State/Province', 'state')