{% load i18n %}{% spaceless %}
<div class="controls months-view">
	<button data-date="{{ calendar.prev_year }}" class="prev" type="button" title="{% translate 'Previous year' %}">
		{% include "formset/icons/arrow-left.svg" %}
	</button>
	<button data-date="{{ calendar.startdate|date:'c' }}" type="button" class="narrow" title="{% translate 'Narrow down to weeks view' %}">
		{% include "formset/icons/arrow-up.svg" %}
	</button>
	<button data-date="{{ calendar.startdate|date:'c' }}" class="extend" title="{% translate 'Extend period' %}">
		<time datetime="{{ calendar.startdate|date:'c' }}">{{ calendar.startdate|date:'Y' }}</time>
	</button>
	<button class="today" title="{% translate 'Today' %}">
		{% include "formset/icons/calendar-today.svg" %}
	</button>
	<button data-date="{{ calendar.next_year }}" class="next" type="button" title="{% translate 'Next year' %}">
		{% include "formset/icons/arrow-right.svg" %}
	</button>
</div>
<div class="sheet-body" aria-label="months-view">
{% block sheet-body %}
	<div class="central">
		<ul class="months">
	{% for date, month in calendar.months %}
			<li data-date="{{ date }}">{{ month }}</li>
	{% endfor %}
		</ul>
	</div>
{% endblock %}
</div>
{% endspaceless %}