{include $element->common('header')}

<div id="{$htmlId}" class="{$htmlClass}">

	<div class="clock-container">
		<div class="clock-item days-container">
			<div class="clock-icon">
				<canvas width="{!$el->option(countdownSize)}" height="{!$el->option(countdownSize)}">
					{__ 'Your browser does not support the HTML5 canvas tag.'}
				</canvas>
			</div>
			<div class="clock-data">
				<p class="clock-value days-value">0</p>
				<p class="clock-text days-text">{__ 'DAYS'}</p>
			</div>
		</div><!--
	 --><div class="clock-item hours-container">
	 		<div class="clock-icon">
				<canvas width="{!$el->option(countdownSize)}" height="{!$el->option(countdownSize)}">
					{__ 'Your browser does not support the HTML5 canvas tag.'}
				</canvas>
			</div>
			<div class="clock-data">
				<p class="clock-value hours-value">0</p>
				<p class="clock-text hours-text">{__ 'HRS'}</p>
			</div>
	 	</div><!--
	 --><div class="clock-item minutes-container">
	 		<div class="clock-icon">
				<canvas width="{!$el->option(countdownSize)}" height="{!$el->option(countdownSize)}">
					{__ 'Your browser does not support the HTML5 canvas tag.'}
				</canvas>
			</div>
			<div class="clock-data">
				<p class="clock-value minutes-value">0</p>
				<p class="clock-text minutes-text">{__ 'MINS'}</p>
			</div>
	 	</div><!--
	 --><div class="clock-item seconds-container">
	 		<div class="clock-icon">
				<canvas width="{!$el->option(countdownSize)}" height="{!$el->option(countdownSize)}">
					{__ 'Your browser does not support the HTML5 canvas tag.'}
				</canvas>
			</div>
			<div class="clock-data">
				<p class="clock-value seconds-value">0</p>
				<p class="clock-text seconds-text">{__ 'SECS'}</p>
			</div>
		</div>
	</div>
	<div class="clock-done entry-content">{!$el->option(finishedText)}</div>

</div>

{includePart "ait-theme/elements/countdown/javascript"}