<div class="calendar-note-view" style="--note-color: {{system.color}}">
  <div class="note-accent-bar" style="background: {{system.color}}"></div>

  <div class="note-body">
    <header class="note-header">
      <div class="note-icon">
        {{#if (eq iconType "fontawesome")}}
          <i class="{{system.icon}}"></i>
        {{else if isSvgIcon}}
          <img src="{{system.icon}}" alt="Note Icon" class="tinted">
        {{else}}
          <img src="{{system.icon}}" alt="Note Icon">
        {{/if}}
      </div>
      <div class="note-header-text">
        <h1 class="note-title">{{name}}</h1>
        {{#if visibilityBadge}}
          <span class="visibility-label">
            <i class="fas {{visibilityIcon}}"></i>
            {{visibilityBadge}}
          </span>
        {{/if}}
      </div>
    </header>

    <div class="note-metadata">
      <div class="metadata-row">
        <i class="fas fa-calendar-alt"></i>
        <span>{{startDateDisplay}}</span>
        {{#if hasEndDate}}
          <i class="fas fa-arrow-right meta-arrow"></i>
          <span>{{endDateDisplay}}</span>
        {{/if}}
      </div>
      {{#unless system.allDay}}
        <div class="metadata-row">
          <i class="fas fa-clock"></i>
          <span>{{startTimeDisplay}}</span>
          {{#if hasEndTime}}
            <span class="time-separator">&ndash;</span>
            <span>{{endTimeDisplay}}</span>
          {{/if}}
        </div>
      {{/unless}}
      {{#if repeatLabel}}
        <div class="metadata-row">
          <i class="fas fa-arrows-rotate"></i>
          <span>{{repeatLabel}}</span>
        </div>
      {{/if}}
      {{#if moonConditionsDisplay}}
        <div class="metadata-row">
          <i class="fas fa-moon"></i>
          <span>{{moonConditionsDisplay}}</span>
        </div>
      {{/if}}
      {{#if equivalentDates.length}}
        <div class="equivalent-dates">
          {{#each equivalentDates}}
            <div class="metadata-row equivalent">
              <i class="fas fa-calendar-alt"></i>
              <span class="calendar-name">{{calendarName}}:</span>
              <span>{{formatted}}</span>
            </div>
          {{/each}}
        </div>
      {{/if}}
    </div>

    {{#if displayPresets.length}}
      <div class="note-presets">
        {{#each displayPresets}}
          <span class="preset-tag" style="--preset-color: {{this.color}}">
            <span class="preset-dot"></span>
            {{this.label}}
          </span>
        {{/each}}
      </div>
    {{/if}}

    <div class="note-content">{{{enrichedContent}}}</div>
  </div>
</div>
