@if (data(); as heatmapData) {
  <div class="heatmap-container">
    <div class="heatmap-grid">
      <div class="day-labels">
        <div class="month-spacer"></div>
        @for (label of dayLabels(); track $index) {
          <div class="day-label">{{ label }}</div>
        }
      </div>

      <div
        class="scrollable-content"
        #scrollableContent
      >
        <div class="heatmap-months">
          @for (month of heatmapData.monthLabels; track $index) {
            <div class="month-label">{{ month }}</div>
          }
        </div>

        <div class="weeks">
          @for (week of heatmapData.weeks; track $index) {
            <div class="week">
              @for (day of week.days; track $index) {
                <div
                  [class]="getDayClass(day)"
                  [title]="getDayTitle(day)"
                ></div>
              }
            </div>
          }
        </div>
      </div>
    </div>

    @if (label()) {
      <div class="heatmap-label">{{ label() }}</div>
    }

    @if (showLegend()) {
      <div class="heatmap-legend">
        <span>Less</span>
        <div class="legend-item level-0"></div>
        <div class="legend-item level-1"></div>
        <div class="legend-item level-2"></div>
        <div class="legend-item level-3"></div>
        <div class="legend-item level-4"></div>
        <span>More</span>
      </div>
    }
  </div>
}