<div class="calendar-card card-surface {% if calendar_variant %}calendar-{{ calendar_variant }}{% endif %}">
  <div class="calendar-toolbar d-flex flex-column flex-md-row justify-content-between gap-3 align-items-md-center">
    <div>
      <p class="toolbar-label mb-1">Click any date to view event details</p>
      <h3 class="calendar-title mb-0">{{ month_label }}</h3>
    </div>
    <div class="calendar-nav d-flex gap-2">
      <a class="btn btn-ghost btn-sm" href="?month={{ prev_month }}{% if calendar_variant == 'embed' %}&header={{ embed_header_value|default:'0' }}{% endif %}">Previous</a>
      <a class="btn btn-ghost btn-sm" href="?month={{ today_value }}{% if calendar_variant == 'embed' %}&header={{ embed_header_value|default:'0' }}{% endif %}">Today</a>
      <a class="btn btn-ghost btn-sm" href="?month={{ next_month }}{% if calendar_variant == 'embed' %}&header={{ embed_header_value|default:'0' }}{% endif %}">Next</a>
    </div>
  </div>
  <div class="calendar-grid-wrap">
    <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">
      {% for week in calendar_weeks %}
        {% for day in week %}
        <button type="button" class="calendar-day {% if not day.in_month %}is-muted{% endif %} {% if day.is_today %}is-today{% endif %} {% if day.has_events %}has-events{% endif %}" data-calendar-date="{{ day.iso }}" aria-label="View schedule for {{ day.date|date:'F j, Y' }}">
          <span class="calendar-day-number">{{ day.day }}</span>
          {% if day.has_events %}
          <span class="calendar-badge">{{ day.event_count }} event{{ day.event_count|pluralize }}</span>
          {% else %}
          <span class="calendar-badge calendar-badge-empty">Open day</span>
          {% endif %}
        </button>
        {% endfor %}
      {% endfor %}
    </div>
  </div>
</div>
{{ calendar_events|json_script:"calendar-events-data" }}
<div class="modal fade" id="dayEventsModal" tabindex="-1" aria-labelledby="dayEventsModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content event-modal">
      <div class="modal-header border-0 pb-0">
        <div>
          <p class="modal-label mb-1">Daily event details</p>
          <h3 class="modal-title" id="dayEventsModalLabel" data-calendar-title>Selected day</h3>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body pt-3" data-calendar-body></div>
    </div>
  </div>
</div>
