<header class="calendar-header">
  <div class="header-row header-row-top">
    <button type="button" data-action="navigate" data-direction="previous" {{#if fogNavDisablePrev}}disabled{{/if}}
      data-tooltip
      aria-label="{{#if (eq displayMode 'week')}}{{localize 'CALENDARIA.Common.PreviousWeek'}}{{else if (eq displayMode 'year')}}{{localize 'CALENDARIA.CalendarApp.PreviousYears'}}{{else}}{{localize 'CALENDARIA.Common.PreviousMonth'}}{{/if}}">
      <i class="fas fa-chevron-left"></i>
    </button>
    {{#if canViewNotes}}
      <button type="button" class="search-toggle" data-action="openNoteViewer" data-tooltip
        aria-label="{{localize 'CALENDARIA.NoteViewer.OpenNoteViewer'}}">
        <i class="fas fa-book-open"></i>
      </button>
    {{/if}}
    <button type="button" data-action="toggleCompact" data-tooltip
      aria-label="{{localize 'CALENDARIA.CalendarApp.ToggleCompact'}}" class="toggle-compact-btn">
      <i class="fas fa-compress"></i>
    </button>
    <h2 class="calendar-title">
      {{#if calendarData}} {{#if (eq displayMode 'week')}} {{{calendarData.formattedHeader}}}
        {{else if (eq displayMode 'year')}}
          {{calendarData.startYearDisplay}} - {{calendarData.endYearDisplay}}
        {{else}} {{{calendarData.formattedHeader}}} {{/if}}
      {{else}} {{localize 'CALENDARIA.Common.Calendar'}} {{/if}}
    </h2>
    {{#if showChronicleButton}}
      <button type="button" data-action="openChronicle" data-tooltip
        aria-label="{{localize 'CALENDARIA.Common.OpenChronicle'}}">
        <i class="fas fa-scroll"></i>
      </button>
    {{/if}}
    <button type="button" data-action="openSettings" data-tooltip
      aria-label="{{localize 'CALENDARIA.HUD.Settings.Name'}}" class="settings-btn">
      <i class="fas fa-gear"></i>
    </button>
    <button type="button" data-action="closeBigCal" data-tooltip aria-label="{{localize 'CALENDARIA.Common.Close'}}"
      class="close-btn">
      <i class="fas fa-times"></i>
    </button>
    <button type="button" data-action="navigate" data-direction="next" {{#if fogNavDisableNext}}disabled{{/if}}
      data-tooltip
      aria-label="{{#if (eq displayMode 'week')}}{{localize 'CALENDARIA.Common.NextWeek'}}{{else if (eq displayMode 'year')}}{{localize 'CALENDARIA.CalendarApp.NextYears'}}{{else}}{{localize 'CALENDARIA.Common.NextMonth'}}{{/if}}">
      <i class="fas fa-chevron-right"></i>
    </button>
  </div>
  {{#if equivalentDates.length}}
    <div class="header-row header-row-equivalent">
      {{#each equivalentDates}}
        {{#unless @first}}<span class="equivalent-date-sep"></span>{{/unless}}
        <span class="equivalent-date-subtitle" data-action="openSecondaryCalendar"
          data-calendar-id="{{this.calendarId}}" data-tooltip aria-label="{{this.tooltip}}"><i
            class="fas fa-calendar-alt"></i> {{this.label}}</span>
      {{/each}}
    </div>
  {{/if}}
  <div class="header-row header-row-bottom">
    <select class="view-select">
      <option value="month" {{#if (eq displayMode 'month')}}selected{{/if}}>{{localize 'CALENDARIA.Common.Month'}}
      </option>
      <option value="week" {{#if (eq displayMode 'week')}}selected{{/if}}>{{localize 'CALENDARIA.Common.Week'}}</option>
      <option value="year" {{#if (eq displayMode 'year')}}selected{{/if}}>{{localize 'CALENDARIA.Common.Year'}}</option>
    </select>
    <div class="calendar-indicators">
      {{{widgets.weatherIndicator}}}
      {{{widgets.seasonIndicator}}}
      {{{widgets.eraIndicator}}}
      {{{widgets.cycleIndicator}}}
      {{{widgets.indicators}}}
    </div>
    <div class="calendar-actions">
      <button type="button" data-action="today" data-tooltip
        aria-label="{{localize 'CALENDARIA.CalendarApp.GoToToday'}}">
        <i class="fas fa-calendar-day"></i>
      </button>
      {{#if editable}}
        <button type="button" data-action="setAsCurrentDate" data-tooltip
          aria-label="{{#if disableSetCurrentDate}}{{localize 'CALENDARIA.CalendarApp.CurrentDateBtn'}}{{else}}{{localize 'CALENDARIA.CalendarApp.SetAsCurrent'}}{{/if}}"
          class="set-current-date-btn" {{#if disableSetCurrentDate}}disabled{{/if}}>
          <i class="fas fa-thumbtack"></i>
        </button>
      {{/if}}
      {{{widgets.actions}}}
    </div>
  </div>
</header>
