{% include 'public/partials/header.html' %}
<main class="wrap page-shell calendar-page">
  <div class="breadcrumb"><a href="{{ $baseUrl }}/">HOME</a><span>›</span><span>CALENDAR</span></div>
  <section class="page-hero calendar-hero"><div><div class="eyebrow">Community</div><h1>Community Calendar</h1><p>Browse public holidays, member birthdays, and events from across the community.</p></div>{% if $currentUser && $canCreateCalendarEvent %}<a class="btn" href="{{ $baseUrl }}/calendar/event/new">＋ Add Event</a>{% endif %}</section>

  <section class="calendar-summary-grid">
    <article><i class="calendar-summary-icon custom">◆</i><div><strong>{{ $calendarCounts['events'] }}</strong><span>Community events</span></div></article>
    <article><i class="calendar-summary-icon birthday">♙</i><div><strong>{{ $calendarCounts['birthdays'] }}</strong><span>Member birthdays</span></div></article>
    <article><i class="calendar-summary-icon holiday">★</i><div><strong>{{ $calendarCounts['holidays'] }}</strong><span>Public holidays</span></div></article>
  </section>

  <div class="calendar-filters panel"><a class="{{ $filter==='all'?'active':'' }}" href="{{ $baseUrl }}/calendar?month={{ $monthKey }}&filter=all">All</a><a class="{{ $filter==='events'?'active':'' }}" href="{{ $baseUrl }}/calendar?month={{ $monthKey }}&filter=events">Events</a><a class="{{ $filter==='birthdays'?'active':'' }}" href="{{ $baseUrl }}/calendar?month={{ $monthKey }}&filter=birthdays">Birthdays</a><a class="{{ $filter==='holidays'?'active':'' }}" href="{{ $baseUrl }}/calendar?month={{ $monthKey }}&filter=holidays">Holidays</a><span class="calendar-filter-legend"><i class="custom"></i> Event <i class="birthday"></i> Birthday <i class="holiday"></i> Holiday</span></div>

  <div class="calendar-layout">
    <section class="panel calendar-panel">
      <div class="calendar-toolbar"><a aria-label="Previous month" href="{{ $baseUrl }}/calendar?month={{ $prevMonth }}&filter={{ $filter }}">‹</a><div><strong>{{ $monthName }}</strong><small>{{ count($monthEvents) }} calendar items</small></div><a aria-label="Next month" href="{{ $baseUrl }}/calendar?month={{ $nextMonth }}&filter={{ $filter }}">›</a></div>
      <div class="calendar-weekdays"><span>Sun</span><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span></div>
      <div class="calendar-grid">{% foreach $calendarDays as $day %}<div class="calendar-day {{ $day['muted']?'muted-day':'' }} {{ $day['today']?'today':'' }}" data-date="{{ $day['date'] }}"><header><b>{{ $day['number'] }}</b>{% if $day['today'] %}<small>Today</small>{% endif %}</header>{% foreach $day['visibleEvents'] as $event %}<button type="button" class="calendar-event {{ $event['event_type'] }}" data-event-payload="{{ $event['payload'] }}"><i></i><span>{{ $event['title'] }}</span></button>{% endforeach %}{% if $day['hiddenCount']>0 %}<button type="button" class="calendar-more" data-day-payload="{{ $day['allPayload'] }}">+{{ $day['hiddenCount'] }} show all</button>{% endif %}</div>{% endforeach %}</div>
    </section>

    <aside class="panel upcoming-panel"><div class="panel-head"><div><span class="eyebrow">Next up</span><h3>Upcoming</h3></div><span class="calendar-glyph">◫</span></div><div class="sidebar-card">{% foreach $upcoming as $event %}<button type="button" class="event-card event-card-button" data-event-payload="{{ $event['payload'] }}"><time><b>{{ date('d',strtotime($event['event_date'])) }}</b><span>{{ strtoupper(date('M',strtotime($event['event_date']))) }}</span></time><div><strong>{{ $event['title'] }}</strong><small>{{ $event['meta'] }}</small><p>{{ $event['description'] }}</p></div><i class="event-type-dot {{ $event['event_type'] }}"></i></button>{% endforeach %}</div></aside>
  </div>
</main>

<dialog class="calendar-dialog" id="calendarDayDialog">
  <div class="calendar-dialog-head"><div><small id="calendarDialogKicker">Calendar</small><h2 id="calendarDialogTitle">Day details</h2></div><button type="button" data-close-calendar>×</button></div>
  <div id="calendarDialogBody" class="calendar-dialog-body"></div>
</dialog>
{% include 'public/partials/footer.html' %}