{{#section 'head'}}
	<link rel="stylesheet" href="/assets/css/progress.css">
{{/section}}

{{> header}}

<div class="wrapper">

	<div class="progress-hero">
		<div class="hero-meta reduced-margin">
			<svg xmlns="http://www.w3.org/2000/svg" width="48.87" height="71.093" viewBox="0 0 48.87 71.093"><g id="XMLID_6_" transform="translate(0)"><path id="XMLID_15_" d="M69.581,29.593c-2.029,1.068-.249,4.129,1.78,3.061,5.162-2.67,11.463-2.6,16.981-1.1,4.735,1.282,9.5,3.845,12.246,8.045,1.246,1.922,4.307.142,3.061-1.78C96.921,27.386,80.3,24.04,69.581,29.593Z" transform="translate(-60.112 -20.086)" fill="#9d6ff3"/><path id="XMLID_14_" d="M103.359,21.045c-3.951-6.159-10.751-10-17.657-11.89C77.763,6.948,68.721,7.019,61.281,10.9c-2.029,1.068-.249,4.129,1.78,3.061,6.586-3.453,14.667-3.311,21.644-1.388,5.981,1.638,12.1,4.913,15.521,10.252C101.507,24.783,104.569,23,103.359,21.045Z" transform="translate(-54.766 -7.693)" fill="#9d6ff3"/><path id="XMLID_9_" d="M65.995,47.8a20.7,20.7,0,0,0-12.958,4.45H47.27a2.579,2.579,0,0,0-2.67,2.456v47.239a2.763,2.763,0,0,0,2.67,2.67h5.838a2.639,2.639,0,0,0,2.528-2.67V87.564A21.228,21.228,0,1,0,65.995,47.8Zm0,33.178a12,12,0,1,1,12-12A12,12,0,0,1,65.995,80.978Z" transform="translate(-44.6 -33.522)" fill="#9d6ff3"/></g></svg>
			<h1 class="title dot">{{ locale.progressPage.title }}</h1>
			<p class="text">{{ locale.progressPage.description }}</p>
		</div>
	</div>

	<div class="all-progress-lists">
		<div class="donation-progress">
			<h1 class="title dot">Donation goal {{#if (greaterThan donationCache.completed_real 99) }}<img src="/assets/images/ganon.apng" alt="An animated image of Cucuí Ganon dancing" class="cucui-dance" />{{/if}}</h1>
			<div class="progress-bar" style="--progress-bar-width: {{ donationCache.completed_real }}%;">
				{{#if (greaterThan donationCache.completed_real 100) }}<div class="progress-bar-real"></div>{{/if}}
				<div class="progress-bar-capped"></div>
			</div>
			<p class="localeReplace">{{{ locale.donation.progress }}} {{{ locale.donation.upgradePush }}}</p>
		</div>

		<div id="quick-nav">
			<h1 class="title dot">Quick Nav</h1>
			<ul>
				{{#each progressLists.sections}}
				<li>
					<a href="#{{slug this.title}}">{{this.title}}</a>
				</li>
				{{/each}}
			</ul>
		</div>
		<br>
		{{#each progressLists.sections}}
		<div class="purple-card" id="{{slug this.title}}">
			{{> progress-list data=this }}
		</div>
		{{/each}}
	</div>

	{{> footer }}

</div>

{{#section 'foot'}}
	<script>
		/* this jank is needed to have data mixed in with a localized string */
		document.querySelector('.localeReplace').innerHTML = document.querySelector('.localeReplace').innerHTML
			.replace('${totd}', '{{donationCache.total_dollars}}');
		document.querySelector('.localeReplace').innerHTML = document.querySelector('.localeReplace').innerHTML
			.replace('${goald}', '{{donationCache.goal_dollars}}');
		document.querySelector('.localeReplace').innerHTML = document.querySelector('.localeReplace').innerHTML
			.replace('${perc}', '{{donationCache.completed_real}}');
	</script>
{{/section}}