<section class="bg-orange-100">
  <header class="flex items-center justify-center mt-2">
  
    {# Month / year navigation #}
    <nav class="flex items-center gap-2 text-2xl">
      {# Outer left: -1 year #}
      <a
        class="{{styles.pill}} text-xl"
        href="{{ url_for('calendars.calendar.get',
                         slug=post.slug,
                         calendar_slug=calendar.slug,
                         year=prev_year,
                         month=month) }}"
        hx-get="{{ url_for('calendars.calendar.get',
                           slug=post.slug,
                           calendar_slug=calendar.slug,
                           year=prev_year,
                           month=month) }}"
        hx-target="#main-panel"
        hx-select="{{ hx_select_search }}"
        hx-swap="outerHTML"
        hx-push-url="true"
      >
        &laquo;
      </a>

      {# Inner left: -1 month #}
      <a
        class="{{styles.pill}} text-xl"
        href="{{ url_for('calendars.calendar.get',
                         slug=post.slug,
                         calendar_slug=calendar.slug,
                         year=prev_month_year,
                         month=prev_month) }}"
        hx-get="{{ url_for('calendars.calendar.get',
                           slug=post.slug,
                           calendar_slug=calendar.slug,
                           year=prev_month_year,
                           month=prev_month) }}"
        hx-target="#main-panel"
        hx-select="{{ hx_select_search }}"
        hx-swap="outerHTML"
        hx-push-url="true"
      >
        &lsaquo;
      </a>

      <div class="px-3 font-medium">
        {{ month_name }} {{ year }}
      </div>

      {# Inner right: +1 month #}
      <a
        class="{{styles.pill}} text-xl"
        href="{{ url_for('calendars.calendar.get',
                         slug=post.slug,
                         calendar_slug=calendar.slug,
                         year=next_month_year,
                         month=next_month) }}"
        hx-get="{{ url_for('calendars.calendar.get',
                           slug=post.slug,
                           calendar_slug=calendar.slug,
                           year=next_month_year,
                           month=next_month) }}"
        hx-target="#main-panel"
        hx-select="{{ hx_select_search }}"
        hx-swap="outerHTML"
        hx-push-url="true"
      >
        &rsaquo;
      </a>

      {# Outer right: +1 year #}
      <a
        class="{{styles.pill}} text-xl"
        href="{{ url_for('calendars.calendar.get',
                         slug=post.slug,
                         calendar_slug=calendar.slug,
                         year=next_year,
                         month=month) }}"
        hx-get="{{ url_for('calendars.calendar.get',
                           slug=post.slug,
                           calendar_slug=calendar.slug,
                           year=next_year,
                           month=month) }}"
        hx-target="#main-panel"
        hx-select="{{ hx_select_search }}"
        hx-swap="outerHTML"
        hx-push-url="true"
      >
        &raquo;
      </a>
    </nav>
  </header>

      {# Calendar grid #}
  <div class="rounded-2xl border border-stone-200 bg-white/80 p-4">
    {# Weekday header: only show on sm+ (desktop/tablet) #}
    <div class="hidden sm:grid grid-cols-7 text-center text-md font-semibold text-stone-700 mb-2">
      {% for wd in weekday_names %}
        <div class="py-1">{{ wd }}</div>
      {% endfor %}
    </div>

    {# On mobile: 1 column; on sm+: 7 columns #}
    <div class="grid grid-cols-1 sm:grid-cols-7 gap-px bg-stone-200 rounded-xl overflow-hidden">
      {% for week in weeks %}
        {% for day in week %}
          <div
            class="min-h-20 sm:min-h-24 bg-white px-3 py-2 text-xs {% if not day.in_month %} bg-stone-50 text-stone-400{% endif %} {% if day.is_today %} ring-2 ring-blue-500 z-10 relative {% endif %}"
          >
            <div class="flex justify-between items-center">
              <div class="flex flex-col">
                <span class="sm:hidden text-[16px] text-stone-500">
                  {{ day.date.strftime('%a') }}
                </span>

                {# Clickable day number: goes to day detail view #}
                <a
                  class="{{styles.pill}}"
                  href="{{ url_for('calendars.calendar.day.show_day',
                                  slug=post.slug,
                                  calendar_slug=calendar.slug,
                                  year=day.date.year,
                                  month=day.date.month,
                                  day=day.date.day) }}"
                  hx-get="{{ url_for('calendars.calendar.day.show_day',
                                    slug=post.slug,
                                    calendar_slug=calendar.slug,
                                    year=day.date.year,
                                    month=day.date.month,
                                    day=day.date.day) }}"
                  hx-target="#main-panel"
                  hx-select="{{ hx_select_search }}"
                  hx-swap="outerHTML"
                  hx-push-url="true"
                >
                  {{ day.date.day }}
                </a>
              </div>
            </div>
            {# Entries for this day: merged, chronological #}
            <div class="mt-1 space-y-0.5">
              {# Build a list of entries for this specific day.
                 month_entries is already sorted by start_at in Python. #}
              {% for e in month_entries %}
                {% if e.start_at.date() == day.date %}
                  {# Decide colour: highlight "mine" differently if you want #}
                {% set is_mine = (g.user and e.user_id == g.user.id)
                                 or (not g.user and e.session_id == qsession.get('calendar_sid')) %}
                  <div class="flex items-center justify-between gap-1 text-[11px] rounded px-1 py-0.5
                              {% if e.state == 'confirmed' %}
                                {% if is_mine %}
                                  bg-emerald-200 text-emerald-900
                                {% else %}
                                  bg-emerald-100 text-emerald-800
                                {% endif %}
                              {% else %}
                                {% if is_mine %}
                                  bg-sky-100 text-sky-800
                                {% else %}
                                  bg-stone-100 text-stone-700
                                {% endif %}
                              {% endif %}">
                    <span class="truncate">
                      {{ e.name }}
                    </span>
                    <span class="shrink-0 text-[10px] font-semibold uppercase tracking-tight">
                      {{ (e.state or 'pending')|replace('_', ' ') }}
                    </span>
                  </div>
                {% endif %}
              {% endfor %}

            </div>
          </div>
        {% endfor %}
      {% endfor %}
    </div>
  </div>
