<div class="calendar-grid">
  {{#if calendarData}}
    <div class="calendar-weekdays"
      style="grid-template-columns: repeat({{calendarData.daysInWeek}}, var(--calendaria-day-size));">
      {{#each calendarData.weekdays}}
        <div class="weekday-header{{#if isRestDay}} rest-day{{/if}}">{{name}}</div>
      {{/each}}
    </div>
    <div class="calendar-days">
      {{#each calendarData.weeks}}
        {{#if this.isIntercalaryRow}}
          <div class="calendar-week intercalary-row">
            {{#each this.days}}
              <div
                class="calendar-day intercalary festival-day{{#if isFogged}} fogged{{/if}}{{#if isToday}} today{{/if}}{{#if isSelected}} selected{{/if}}{{#if notes.length}} has-notes{{/if}}"
                data-year="{{year}}" data-month="{{month}}" data-day="{{dayOfMonth}}" data-action="selectDay"
                data-tooltip-html="{{{dayTooltip}}}" {{#if festivalColor}}style="--festival-color: {{festivalColor}}"
                {{/if}}>
                <div class="day-number">
                  <span class="festival-name">{{festivalName}}</span>
                  {{#if moonPhases}}
                    <span class="day-moons">
                      {{#each moonPhases.visible}}
                        <span class="moon-phase{{#if color}} tinted{{/if}}" data-tooltip
                          aria-label="{{moonName}}: {{phaseName}}" {{#if color}}style="--moon-color: {{color}}" {{/if}}
                          data-action="moonClick" data-moon-slot="{{@index}}" data-moon-name="{{moonName}}">
                          <img src="{{icon}}" alt="{{phaseName}}">
                        </span>
                      {{/each}}
                      {{#if moonPhases.overflow.length}}
                        <span class="moon-overflow" data-tooltip="{{{moonPhases.overflowTooltip}}}"
                          aria-label="{{moonPhases.overflowTooltipText}}">+{{moonPhases.overflow.length}}</span>
                      {{/if}}
                    </span>
                  {{/if}}
                </div>
                <div class="day-bottom">
                  {{#if weatherIcon}}
                    <div class="day-weather-pill{{#if isForecast}} forecast{{/if}}"
                      data-tooltip-html="{{{weatherTooltipHtml}}}">
                      <i class="fas {{weatherIcon}}" style="color: {{weatherColor}}"></i>
                      {{#if weatherTemp}}<span class="pill-temp">{{weatherTemp}}</span>{{/if}}
                      {{#if weatherWindDir}}<span class="pill-wind">{{weatherWindDir}}</span>{{/if}}
                    </div>
                  {{/if}}
                  <div class="day-notes">
                    {{#each notes}}
                      {{#if (eq displayStyle "pip")}}
                        <div class="note-pip" data-tooltip aria-label="{{name}}" data-action="editNote"
                          data-note-id="{{id}}" style="background-color: {{color}};"></div>
                      {{else if (eq displayStyle "banner")}}
                        <div class="note-banner" data-tooltip aria-label="{{name}}" data-action="editNote"
                          data-note-id="{{id}}" style="background-color: {{color}};">
                          <span class="note-banner-text">{{name}}</span>
                        </div>
                      {{else}}
                        <div class="note-indicator" data-tooltip aria-label="{{name}}" data-action="editNote"
                          data-note-id="{{id}}">
                          {{#if (eq iconType "fontawesome")}}
                            <i class="{{icon}}" style="color: {{color}}"></i>
                          {{else}}
                            <img src="{{icon}}" alt="{{name}}" style="width: 1rem; height: 1rem;">
                          {{/if}}
                        </div>
                      {{/if}}
                    {{/each}}
                    {{#if ../../canAddNotes}}
                      <button type="button" class="add-note-btn" data-action="addNote" data-year="{{year}}"
                        data-month="{{month}}" data-day="{{dayOfMonth}}" data-tooltip
                        aria-label="{{localize 'CALENDARIA.Common.AddNote'}}">
                        <i class="fas fa-plus"></i>
                      </button>
                    {{/if}}
                  </div>
                </div>
              </div>
            {{/each}}
          </div>
        {{else}}
          <div class="calendar-week"
            style="grid-template-columns: repeat({{../calendarData.daysInWeek}}, var(--calendaria-day-size));">
            {{#each this}}
              {{#if empty}}
                <div class="calendar-day empty"></div>
              {{else if isFromOtherMonth}}
                <div
                  class="calendar-day other-month{{#if isIntercalaryMonth}} intercalary-month{{/if}}{{#if isToday}} today{{/if}}"
                  data-action="navigateToMonth" data-year="{{year}}" data-month="{{month}}" data-day="{{dayOfMonth}}"
                  {{#if isIntercalaryMonth}}data-tooltip="{{monthName}}" {{/if}}>
                  <div class="day-number">{{#if isIntercalaryMonth}}{{monthName}}{{else}}{{day}}{{/if}}</div>
                </div>
              {{else}}
                <div
                  class="calendar-day{{#if isFogged}} fogged{{/if}}{{#if isToday}} today{{/if}}{{#if isSelected}} selected{{/if}}{{#if notes.length}} has-notes{{/if}}{{#if isOddDay}} odd-day{{/if}}{{#if isFestival}} festival-day{{/if}}"
                  data-year="{{year}}" data-month="{{month}}" data-day="{{dayOfMonth}}" data-action="selectDay"
                  data-tooltip-html="{{{dayTooltip}}}" {{#if festivalColor}}style="--festival-color: {{festivalColor}}"
                  {{/if}}>
                  <div class="day-number">
                    {{day}}
                    {{#if isFestival}}
                      <span class="festival-icon-wrapper" {{#if festivalNoteId}}data-action="editNote"
                        data-note-id="{{festivalNoteId}}" {{/if}} data-tooltip
                        aria-label="{{festivalName}}{{#if festivalDescription}}: {{festivalDescription}}{{/if}}">
                        {{#if festivalIconIsImage}}<img src="{{festivalIcon}}" class="festival-icon"
                          alt="{{festivalName}}">{{else}}<i
                          class="{{#if festivalIcon}}{{festivalIcon}}{{else}}fas fa-star{{/if}} festival-icon"></i>{{/if}}
                      </span>
                    {{/if}}
                    {{#if moonPhases}}
                      <span class="day-moons">
                        {{#each moonPhases.visible}}
                          <span class="moon-phase{{#if color}} tinted{{/if}}" data-tooltip
                            aria-label="{{moonName}}: {{phaseName}}" {{#if color}}style="--moon-color: {{color}}"
                            {{/if}} data-action="moonClick" data-moon-slot="{{@index}}" data-moon-name="{{moonName}}">
                            <img src="{{icon}}" alt="{{phaseName}}">
                          </span>
                        {{/each}}
                        {{#if moonPhases.overflow.length}}
                          <span class="moon-overflow" data-tooltip="{{{moonPhases.overflowTooltip}}}"
                            aria-label="{{moonPhases.overflowTooltipText}}">+{{moonPhases.overflow.length}}</span>
                        {{/if}}
                      </span>
                    {{/if}}
                  </div>
                  <div class="day-bottom">
                    {{#if weatherIcon}}
                      <div class="day-weather-pill{{#if isForecast}} forecast{{/if}}"
                        data-tooltip-html="{{{weatherTooltipHtml}}}">
                        <i class="fas {{weatherIcon}}" style="color: {{weatherColor}}"></i>
                        {{#if weatherTemp}}<span class="pill-temp">{{weatherTemp}}</span>{{/if}}
                        {{#if weatherWindDir}}<span class="pill-wind">{{weatherWindDir}}</span>{{/if}}
                      </div>
                    {{/if}}
                    <div class="day-notes">
                      <div class="day-notes-items">
                        {{#each notes}}
                          {{#if (eq displayStyle "pip")}}
                            <div class="note-pip" data-tooltip aria-label="{{name}}" data-action="editNote"
                              data-note-id="{{id}}" style="background-color: {{color}};"></div>
                          {{else if (eq displayStyle "banner")}}
                            <div class="note-banner" data-tooltip aria-label="{{name}}" data-action="editNote"
                              data-note-id="{{id}}" style="background-color: {{color}};">
                              <span class="note-banner-text">{{name}}</span>
                            </div>
                          {{else}}
                            <div class="note-indicator" data-tooltip aria-label="{{name}}" data-action="editNote"
                              data-note-id="{{id}}">
                              {{#if (eq iconType "fontawesome")}}
                                <i class="{{icon}}" style="color: {{color}}"></i>
                              {{else}}
                                <img src="{{icon}}" alt="{{name}}" style="width: 1rem; height: 1rem;">
                              {{/if}}
                            </div>
                          {{/if}}
                        {{/each}}
                      </div>
                      {{#if ../../canAddNotes}}
                        <button type="button" class="add-note-btn" data-action="addNote" data-year="{{year}}"
                          data-month="{{month}}" data-day="{{dayOfMonth}}" data-tooltip
                          aria-label="{{localize 'CALENDARIA.Common.AddNote'}}">
                          <i class="fas fa-plus"></i>
                        </button>
                      {{/if}}
                    </div>
                  </div>
                </div>
              {{/if}}
            {{/each}}
            {{#each multiDayEvents}}
              <div
                class="event-bar{{#if isCondensed}} event-bar-condensed{{/if}}{{#if isContinuation}} continuation{{/if}}{{#if showBookends}}{{#if isStart}} bookend-start{{/if}}{{#if isEnd}} bookend-end{{/if}}{{/if}}"
                style="left: {{left}}%; width: {{width}}%; top: {{top}}rem; background-color: {{color}};" data-tooltip
                aria-label="{{name}}" data-action="editNote" data-note-id="{{id}}">
                {{#if isContinuation}}
                  <i class="fas fa-angles-right event-bar-continuation"></i>
                {{else}}
                  {{#if (eq iconType "fontawesome")}}
                    <i class="{{icon}} event-bar-icon"></i>
                  {{else if icon}}
                    <img src="{{icon}}" alt="{{name}}" class="event-bar-icon">
                  {{/if}}
                {{/if}}
                <span class="event-bar-text">{{name}}</span>
              </div>
            {{/each}}
          </div>
        {{/if}}
      {{/each}}
    </div>
  {{else}}
    <div class="no-calendar">
      <p>{{localize 'CALENDARIA.CalendarApp.NoCalendarConfigured'}}</p>
    </div>
  {{/if}}
</div>
