
<div class="calendar-container">
	<div class="header-container">
		<div class="year-container">
			<div class="date-picker-header-year{{if years_active ' active'}}" {{action 'activateHeader' yearKey bubbles=false}}>{{year}}</div>
		</div>
		<div class="month-container{{if months_active ' active'}}" {{action 'activateHeader' dayKey bubbles=false}}>
			<div class="week-day">{{dayOfWeek}},</div>
			<div class="month">{{month}}</div>
			<div class="day">{{day}}</div>
		</div>
	</div>

	<div class="calendar-body">
		<div class="header">
			<div class="subtract-month arrow{{unless isPrev ' disabled'}}" {{action "subtractMonth" bubbles=false}}><span></span></div>
			<div class="month-year{{if months_active ' active'}}">{{monthYear}}</div>
			<div class="add-month arrow{{unless isNext ' disabled'}}" {{action "addMonth" bubbles=false}}><span></span></div>
		</div>

		<table class="calendar">
			<tr class="keepOpen week-header-row">
				<th class="keepOpen week-header-data">S</th>
				<th class="keepOpen week-header-data">M</th>
				<th class="keepOpen week-header-data">T</th>
				<th class="keepOpen week-header-data">W</th>
				<th class="keepOpen week-header-data">T</th>
				<th class="keepOpen week-header-data">F</th>
				<th class="keepOpen week-header-data">S</th>
			</tr>

		{{#each groupedArray as |week|}}
			<tr class="keepOpen week-row">
				{{#each week as |day|}}
					<td class="keepOpen day{{if day.isDisabled ' disabled'}}{{if day.isCurrentDay ' current'}}{{if day.isCurrentMonth '' ' outside'}}{{if day.isRange ' range'}}{{if day.isRangeStart ' range-start'}}{{if day.isRangeEnd ' range-end'}}" {{action 'dayClicked' day bubbles=false}}>
						<span>{{day.dayOfMonth}}</span>
					</td>
				{{/each}}
			</tr>
		{{/each}}
		</table>
	</div>
</div>
