
<div class="clock-container{{if isHourPicker ' hours' ' minutes'}}{{if invalidTime ' invalid'}}">
	<div class="header">
		<span class="am-pm-container">
			<span class="button am{{if isAM ' active'}}" {{action 'meridianChange' 'AM'}}>AM</span>
			<span class="button pm{{if isPM ' active'}}" {{action 'meridianChange' 'PM'}}>PM</span>
		</span>

		<span class="numbers-container">
			<span class="number hours" {{action "hourHeaderClicked"}}>{{hours}}</span>
			<span class="colon">:</span>
			<span class="number minutes" {{action "minuteHeaderClicked"}}>{{minutes}}</span>
		</span>
	</div>

	<div class="body">
		<div class="outside-container --svg-clock__hours{{if isHourPicker ' active'}}">
			<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg">
				<defs></defs>
				<title>{{__hours__meta.type}}</title>
				<circle class="--svg-face cls-dark-fill" />
				<circle class="--svg-pivot cls-bright-fill" />

				{{#each __hours__meta.points as |point|}}
					<path class="--svg-path --svg-path-{{point.value}} cls-transparent cls-cursor" {{!action 'clickMinutes' point.num}} />
					<line class="--svg-arm --svg-arm-{{point.value}} cls-bright-stroke cls-line" />
					<circle class="--svg-plot --svg-plot-{{point.value}} cls-bright-fill cls-cursor" />
					<text class="--svg-text --svg-text-{{point.value}} cls-text cls-cursor" {{!action 'clickMinutes' point.num}}>{{point.value}}</text>
				{{/each}}
			</svg>
		</div>

		<div class="outside-container --svg-clock__minutes{{if isHourPicker '' ' active'}}">
			<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg">
				<defs></defs>
				<title>{{__minutes__meta.type}}</title>
				{{#each __minutes__meta.points as |point|}}
					{{#if point.isRender}}
						<line class="--svg-arm --svg-arm-{{point.value}} cls-bright-stroke cls-line" />
						<circle class="--svg-arm --svg-plot-{{point.value}} cls-bright-fill cls-cursor" />
					{{/if}}
				{{/each}}

				<circle class="--svg-face cls-dark-fill" />
				<circle class="--svg-pivot cls-bright-fill" />

				{{#each __minutes__meta.points as |point|}}
					{{#if point.isRender}}
						<path class="--svg-path --svg-path-{{point.value}} cls-transparent cls-cursor" {{!action 'clickMinutes' point.num}} />
						{{#if point.isVisible}}
							<text class="--svg-text --svg-text-{{point.value}} cls-text cls-text-small cls-cursor" {{!action 'clickMinutes' point.num}}>{{point.value}}</text>
						{{/if}}
					{{/if}}
				{{/each}}
			</svg>
		</div>
	</div>
</div>

