<div class="minical-container">
  <div class="minical-sidebar{{#if sidebarVisible}} visible{{/if}}{{#if sidebarLocked}} locked{{/if}}">
    <button type="button" class="minical-sidebar-btn" data-action="close" data-tooltip data-tooltip-direction="RIGHT"
      aria-label="{{localize 'CALENDARIA.Common.Close'}}">
      <i class="fas fa-times"></i>
    </button>
    {{#if canViewBigCal}}
    <button type="button" class="minical-sidebar-btn" data-action="openFull" data-tooltip data-tooltip-direction="RIGHT"
      aria-label="{{localize 'CALENDARIA.Common.OpenBigCal'}}">
      <i class="fas fa-expand"></i>
    </button>
    {{/if}}
    <button type="button" class="minical-sidebar-btn" data-action="today" data-tooltip data-tooltip-direction="RIGHT"
      aria-label="{{localize 'CALENDARIA.Common.Today'}}">
      <i class="fas fa-calendar-day"></i>
    </button>
    <div class="minical-sidebar-separator"></div>
    <button type="button" class="minical-sidebar-btn" data-action="setCurrentDate"
      {{#if disableSetCurrentDate}}disabled{{/if}} data-tooltip data-tooltip-direction="RIGHT"
      aria-label="{{localize 'CALENDARIA.MiniCal.SetCurrentDate'}}">
      <i class="fas fa-thumbtack"></i>
    </button>
    <div class="minical-sidebar-separator"></div>
    <button type="button" class="minical-sidebar-btn" data-action="addNote" data-tooltip data-tooltip-direction="RIGHT"
      aria-label="{{localize 'CALENDARIA.Common.AddNote'}}">
      <i class="fas fa-plus"></i>
    </button>
    {{#if canViewNotes}}
      <button type="button" class="minical-sidebar-btn" data-action="openNoteViewer" data-tooltip
        data-tooltip-direction="RIGHT" aria-label="{{localize 'CALENDARIA.NoteViewer.OpenNoteViewer'}}">
        <i class="fas fa-book-open"></i>
      </button>
    {{/if}}
    <button type="button" class="minical-sidebar-btn" data-action="viewNotes" {{#if disableViewNotes}}disabled{{/if}}
      data-tooltip data-tooltip-direction="RIGHT" aria-label="{{localize 'CALENDARIA.MiniCal.ViewNotes'}}">
      <i class="fas fa-list"></i>
    </button>
    {{#if showChronicleButton}}
      <button type="button" class="minical-sidebar-btn" data-action="openChronicle" data-tooltip
        data-tooltip-direction="RIGHT" aria-label="{{localize 'CALENDARIA.Common.OpenChronicle'}}">
        <i class="fas fa-scroll"></i>
      </button>
    {{/if}}
    <div class="minical-sidebar-separator"></div>
    <button type="button" class="minical-sidebar-btn" data-action="openSettings" data-tooltip
      data-tooltip-direction="RIGHT" aria-label="{{localize 'CALENDARIA.Common.Settings'}}">
      <i class="fas fa-cog"></i>
    </button>
    {{{widgets.sidebar}}}
  </div>
  <div class="notes-panel{{#if notesPanelVisible}} visible{{/if}}">
    <div class="notes-panel-header">
      <span class="notes-panel-title">{{selectedDateLabel}}</span>
      <button type="button" class="notes-panel-close" data-action="closeNotesPanel" data-tooltip
        aria-label="{{localize 'CALENDARIA.MiniCal.CloseNotesPanel'}}">
        <i class="fas fa-times"></i>
      </button>
    </div>
    {{#if notesPanelVisible}}
      <div class="notes-panel-filter-bar">
        <select class="notes-filter-select" data-filter-type="preset">
          <option value="">{{localize "CALENDARIA.Notes.AllPresets"}}</option>
          {{#each noteFilterPresets}}
            <option value="{{id}}" {{#if selected}}selected{{/if}} {{#unless hasNotes}}disabled{{/unless}}>{{label}}
            </option>
          {{/each}}
        </select>
        {{#if hasActiveFilters}}
          <button type="button" class="notes-filter-clear" data-action="clearNoteFilters" data-tooltip
            aria-label="{{localize 'CALENDARIA.NoteViewer.ClearFilters'}}">
            <i class="fas fa-times"></i>
          </button>
        {{/if}}
      </div>
    {{/if}}
    <div class="notes-panel-list">
      {{#each selectedDateNotes}}
        {{> "modules/calendaria/templates/partials/note-panel-item.hbs"}}
      {{/each}}
      {{#if hasActiveFilters}}
        {{#unless selectedDateNotes.length}}
          <div class="notes-panel-empty">{{localize "CALENDARIA.Notes.NoMatchingNotes"}}</div>
        {{/unless}}
      {{/if}}
    </div>
  </div>
  <div class="minical-top-row{{#if stickyPosition}} position-locked{{/if}}">
    <button type="button" class="nav-btn" data-action="navigate" data-direction="prev"
      {{#if fogNavDisablePrev}}disabled{{/if}} data-tooltip
      aria-label="{{#if calendarData.isMonthless}}{{localize 'CALENDARIA.Common.PreviousWeek'}}{{else}}{{localize 'CALENDARIA.Common.PreviousMonth'}}{{/if}}">
      <i class="fas fa-chevron-left"></i>
    </button>
    <div class="title-group">
      <span class="title">{{{calendarData.formattedHeader}}}</span>
      {{#if calendarData.equivalentDates.length}}
        <div class="equivalent-dates-row">
          {{#each calendarData.equivalentDates}}
            <span class="equivalent-date-link" data-action="openSecondaryCalendar" data-calendar-id="{{calendarId}}"
              data-tooltip aria-label="{{calendarName}}">{{label}}</span>
          {{/each}}
        </div>
      {{/if}}
      {{#if compact}}
        {{#if canChangeDateTime}}
          <div class="time-toggle {{#if running}}active{{/if}}{{#if clockLocked}} clock-locked{{/if}}"
            data-action="toggle" data-tooltip
            aria-label="{{#if clockDisabled}}{{localize 'CALENDARIA.TimeClock.Disabled'}}{{else if clockLocked}}{{localize 'CALENDARIA.TimeClock.Locked'}}{{else if running}}{{localize 'CALENDARIA.TimeKeeper.Stop'}}{{else}}{{localize 'CALENDARIA.TimeKeeper.Start'}}{{/if}}">
            <i class="fas {{#if clockLocked}}fa-lock{{else}}{{#if running}}fa-pause{{else}}fa-play{{/if}}{{/if}}"></i>
          </div>
        {{/if}}
      {{/if}}
    </div>
    <button type="button" class="nav-btn" data-action="navigate" data-direction="next"
      {{#if fogNavDisableNext}}disabled{{/if}} data-tooltip
      aria-label="{{#if calendarData.isMonthless}}{{localize 'CALENDARIA.Common.NextWeek'}}{{else}}{{localize 'CALENDARIA.Common.NextMonth'}}{{/if}}">
      <i class="fas fa-chevron-right"></i>
    </button>
  </div>
  {{#if (or calendarData.currentSeason calendarData.currentEra cycleText weather canChangeWeather widgets.hasIndicators)}}
    <div class="calendar-indicators">
      {{{widgets.weatherIndicator}}}
      {{{widgets.seasonIndicator}}}
      {{{widgets.eraIndicator}}}
      {{{widgets.cycleIndicator}}}
      {{{widgets.indicators}}}
    </div>
  {{/if}}
  <div class="minical-grid" style="--mini-weekday-count: {{calendarData.daysInWeek}}">
    <div class="minical-weekdays">
      {{#each calendarData.weekdays}}
        <div class="weekday{{#if isRestDay}} rest-day{{/if}}">{{name}}</div>
      {{/each}}
    </div>
    <div class="minical-days">
      {{#each calendarData.weeks}}
        {{#if this.isIntercalaryRow}}
          <div class="intercalary-row">
            {{#each this.days}}
              <div
                class="minical-day intercalary{{#if isFogged}} fogged{{/if}}{{#if isToday}} today{{/if}}{{#if isSelected}} selected{{/if}}{{#if hasNotes}} has-notes{{/if}} festival"
                data-action="selectDay" data-year="{{year}}" data-month="{{month}}" data-day="{{dayOfMonth}}"
                data-tooltip-html="{{{dayTooltip}}}" {{#if festivalColor}}style="--festival-color: {{festivalColor}}"
                {{/if}}>
                <span class="festival-name">{{festivalName}}</span>
                {{#if hasNotes}}
                  <span class="note-badge" {{#if noteColor}}style="background: {{noteColor}}; color: {{noteTextColor}}"
                    {{/if}}>{{noteCount}}</span>
                {{/if}}
                {{#if moonIcon}}{{#if moonColor}}<span class="moon-tint clickable" style="--moon-color: {{moonColor}}"
                      data-action="showMoons" data-tooltip aria-label="{{moonPhase}}">
                      <img class="moon-tiny tinted" src="{{moonIcon}}" alt="{{moonPhase}}">
                    </span>
                  {{else}}
                    <img class="moon-tiny clickable" src="{{moonIcon}}" alt="{{moonPhase}}" data-action="showMoons"
                      data-tooltip aria-label="{{moonPhase}}">
                  {{/if}}{{/if}}
                {{#if weatherIcon}}
                  <i class="fas {{weatherIcon}} mini-weather-icon{{#if isForecast}} forecast{{/if}}"
                    style="color: {{weatherColor}}" data-tooltip-html="{{{weatherTooltipHtml}}}"></i>
                {{/if}}
              </div>
            {{/each}}
          </div>
        {{else}}
          {{#each this}}
            {{#if empty}}
              <div class="minical-day empty"></div>
            {{else if isFromOtherMonth}}
              <div
                class="minical-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}}>
                <span class="minical-day-num">{{#if isIntercalaryMonth}}{{monthInitial}}{{else}}{{day}}{{/if}}</span>
              </div>
            {{else if isFromOtherWeek}}
              <div
                class="minical-day other-week{{#if isFogged}} fogged{{/if}}{{#if isToday}} today{{/if}}{{#if hasNotes}} has-notes{{/if}}{{#if isFestival}} festival{{/if}}"
                data-action="selectDay" data-year="{{year}}" data-month="{{month}}" data-day="{{dayOfMonth}}"
                {{#if dayTooltip}}data-tooltip-html="{{{dayTooltip}}}" {{/if}}
                {{#if festivalColor}}style="--festival-color: {{festivalColor}}" {{/if}}>
                <span class="minical-day-num">{{day}}</span>
                {{#if hasNotes}}
                  <span class="note-badge" {{#if noteColor}}style="background: {{noteColor}}; color: {{noteTextColor}}"
                    {{/if}}>{{noteCount}}</span>
                {{/if}}
              </div>
            {{else}}
              <div
                class="minical-day{{#if isFogged}} fogged{{/if}}{{#if isToday}} today{{/if}}{{#if isSelected}} selected{{/if}}{{#if hasNotes}} has-notes{{/if}}{{#if isFestival}} festival{{/if}}"
                data-action="selectDay" data-year="{{year}}" data-month="{{month}}" data-day="{{dayOfMonth}}"
                data-tooltip-html="{{{dayTooltip}}}" {{#if festivalColor}}style="--festival-color: {{festivalColor}}"
                {{/if}}>
                <span class="minical-day-num">{{day}}</span>
                {{#if hasNotes}}
                  <span class="note-badge" {{#if noteColor}}style="background: {{noteColor}}; color: {{noteTextColor}}"
                    {{/if}}>{{noteCount}}</span>
                {{/if}}
                {{#if moonIcon}}{{#if moonColor}}<span class="moon-tint clickable" style="--moon-color: {{moonColor}}"
                      data-action="showMoons" data-tooltip aria-label="{{moonPhase}}">
                      <img class="moon-tiny tinted" src="{{moonIcon}}" alt="{{moonPhase}}">
                    </span>
                  {{else}}
                    <img class="moon-tiny clickable" src="{{moonIcon}}" alt="{{moonPhase}}" data-action="showMoons"
                      data-tooltip aria-label="{{moonPhase}}">
                  {{/if}}{{/if}}
                {{#if weatherIcon}}
                  <i class="fas {{weatherIcon}} mini-weather-icon{{#if isForecast}} forecast{{/if}}"
                    style="color: {{weatherColor}}" data-tooltip-html="{{{weatherTooltipHtml}}}"></i>
                {{/if}}
              </div>
            {{/if}}
          {{/each}}
        {{/if}}
      {{/each}}
    </div>
  </div>
  {{#if showTime}}
    <div class="minical-time-display" {{#if canChangeDateTime}}data-action="toggle" {{/if}}>
      <span class="time-value">{{{currentTime}}}</span>
      <span class="date-value hidden">{{currentDate}}</span>
      {{#if canChangeDateTime}}
        <div class="time-toggle {{#if running}}active{{/if}}{{#if clockLocked}} clock-locked{{/if}}" data-tooltip
          aria-label="{{#if clockDisabled}}{{localize 'CALENDARIA.TimeClock.Disabled'}}{{else if clockLocked}}{{localize 'CALENDARIA.TimeClock.Locked'}}{{else if running}}{{localize 'CALENDARIA.TimeKeeper.Stop'}}{{else}}{{localize 'CALENDARIA.TimeKeeper.Start'}}{{/if}}">
          <i class="fas {{#if clockLocked}}fa-lock{{else}}{{#if running}}fa-pause{{else}}fa-play{{/if}}{{/if}}"></i>
        </div>
      {{/if}}
    </div>
    {{#if canChangeDateTime}}
      <div class="minical-time-controls{{#if controlsVisible}} visible{{/if}}">
        <div class="controls-group">
          <button type="button" class="time-btn time-shortcut" data-action="toSunrise" data-tooltip
            aria-label="{{localize 'CALENDARIA.Common.Sunrise'}}">
            <i class="fas fa-sun"></i>
          </button>
          <button type="button" class="time-btn time-shortcut" data-action="toMidday" data-tooltip
            aria-label="{{localize 'CALENDARIA.Common.Midday'}}">
            <i class="fas fa-cloud-sun"></i>
          </button>
          {{#if customJumps.dec2}}
            <button type="button" class="time-btn custom-jump" data-action="customDec2" data-tooltip
              aria-label="{{customJumps.dec2}}">
              {{customJumps.dec2}}
            </button>
          {{/if}}
          {{#if customJumps.dec1}}
            <button type="button" class="time-btn custom-jump" data-action="customDec1" data-tooltip
              aria-label="{{customJumps.dec1}}">
              {{customJumps.dec1}}
            </button>
          {{/if}}
          <button type="button" class="time-btn" data-action="reverse" data-tooltip
            aria-label="{{localize 'CALENDARIA.HUD.Reverse'}}">
            <i class="fas fa-backward"></i>
          </button>
          <select class="increment-select" data-action="increment">
            {{#each increments}}
              <option value="{{key}}" {{#if selected}}selected{{/if}}>{{label}}</option>
            {{/each}}
          </select>
          <button type="button" class="time-btn" data-action="forward" data-tooltip
            aria-label="{{localize 'CALENDARIA.HUD.Forward'}}">
            <i class="fas fa-forward"></i>
          </button>
          {{#if customJumps.inc1}}
            <button type="button" class="time-btn custom-jump" data-action="customInc1" data-tooltip
              aria-label="+{{customJumps.inc1}}">
              +{{customJumps.inc1}}
            </button>
          {{/if}}
          {{#if customJumps.inc2}}
            <button type="button" class="time-btn custom-jump" data-action="customInc2" data-tooltip
              aria-label="+{{customJumps.inc2}}">
              +{{customJumps.inc2}}
            </button>
          {{/if}}
          <button type="button" class="time-btn time-shortcut" data-action="toSunset" data-tooltip
            aria-label="{{localize 'CALENDARIA.Common.Sunset'}}">
            <i class="fas fa-cloud-moon"></i>
          </button>
          <button type="button" class="time-btn time-shortcut" data-action="toMidnight" data-tooltip
            aria-label="{{localize 'CALENDARIA.Common.Midnight'}}">
            <i class="fas fa-moon"></i>
          </button>
        </div>
      </div>
    {{/if}}
  {{/if}}
</div>
