busy-web/ember-date-time

<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>