{% load cal_tags %}

<div id="{{ calendar.slug }}-weekly-grid"
     hx-get="{% url 'htmx_calendar:weekly' calendar_slug=calendar.slug year=year week=week %}"
     hx-trigger="calendar:{{ calendar.slug }}:changed from:body"
     hx-swap="outerHTML"
     class="flex h-full flex-col">
  <c-header-section mode=view_mode />
  <div class="isolate flex flex-auto flex-col overflow-auto bg-white">
    <div style="width: 165%"
         class="flex max-w-full flex-none flex-col sm:max-w-none md:max-w-full">
      <c-weekly-table-header />
      <div class="flex flex-auto">
        <div class="hidden sm:block sticky left-0 z-10 w-14 flex-none bg-white ring-1 ring-gray-100"></div>
        <div class="grid flex-auto grid-cols-1 grid-rows-1">
          {# Stacked time-grid: background lines/labels + foreground events #}
          <div class="relative col-start-1 col-end-2 row-start-1">
            {# --- Horizontal lines + hour labels (background layer) --- #}
            <div class="absolute inset-0 grid pointer-events-none"
                 style="grid-template-rows: {{ timegrid_template_rows }}">
              {# Header spacer row (matches the 1.75rem header in grid-template-rows) #}
              <div class="row-end-1 h-7"></div>
              {# One row per slot (e.g. 96 for 15-min resolution) #}
              {% for label in timegrid_slot_labels %}
                <div class="relative border-t {% if forloop.counter0|divisibleby:slots_per_hour %}border-gray-200{% else %}border-gray-100{% endif %}">
                  {% if label %}
                    <div class="hidden sm:block sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs/5 text-gray-400">
                      {{ label }}
                    </div>
                  {% endif %}
                </div>
              {% endfor %}
            </div>
            {# --- Events overlay (foreground layer) --- #}
            <ol class="relative grid grid-cols-7 pr-0 sm:pr-8"
                style="grid-template-rows: {{ timegrid_template_rows }}">
              {# Weekly local-overlap rendering: split only inside overlap windows (clusters) #}
              {% for d in days %}
                {% if d.timegrid_clusters %}
                  {% for cluster in d.timegrid_clusters %}
                    <li class="relative"
                        style="grid-column-start: {{ forloop.parentloop.counter }};
                               grid-row: {{ cluster.row_start }} / span {{ cluster.row_span }}">
                      <div class="absolute inset-0">
                        {% for ev in cluster.events %}
                          <a href="#"
                             hx-get="{% url 'htmx_calendar:event_detail' calendar_slug=calendar.slug event_pk=ev.occ.event.pk %}?start={{ ev.occ.start|date:'c'|urlencode }}"
                             hx-target="#dialog"
                             hx-swap="innerHTML"
                             onclick="window.dispatchEvent(new CustomEvent('open-modal'))"
                             class="absolute m-px flex min-w-0 flex-col overflow-y-auto rounded-lg p-2 text-xs/5 {% if ev.occ.event.unavailability %}bg-red-50 hover:bg-red-100{% else %}bg-blue-50 hover:bg-blue-100{% endif %}"
                             style="top: {{ ev.top_pct }}%;
                                    height: {{ ev.height_pct }}%;
                                    left: {{ ev.left_pct }}%;
                                    width: {{ ev.width_pct }}%">
                            <p class="order-1 font-semibold {% if ev.occ.event.unavailability %}text-red-700{% else %}text-blue-700{% endif %}">
                              {{ ev.occ.title }}
                            </p>
                            <p class="{% if ev.occ.event.unavailability %}text-red-500{% else %}text-blue-500{% endif %}">
                              <time datetime="{{ ev.start|date:'c' }}">{{ ev.start|date:'H:i' }}</time>
                            </p>
                          </a>
                        {% endfor %}
                      </div>
                    </li>
                  {% endfor %}
                {% else %}
                  {# Fallback: if clusters are missing, render segments directly #}
                  {% for seg in d.timegrid_events %}
                    <li class="relative mt-px flex"
                        style="grid-column-start: {{ forloop.parentloop.counter }};
                               grid-row: {{ seg.row_start }} / span {{ seg.row_span }};
                               left: calc({{ seg.lane }} * (100% / {{ seg.lane_count }}));
                               width: calc(100% / {{ seg.lane_count }})">
                      <a href="#"
                         hx-get="{% url 'htmx_calendar:event_detail' calendar_slug=calendar.slug event_pk=seg.occ.event.pk %}?start={{ seg.occ.start|date:'c'|urlencode }}"
                         hx-target="#dialog"
                         hx-swap="innerHTML"
                         onclick="window.dispatchEvent(new CustomEvent('open-modal'))"
                         class="group absolute inset-px flex flex-col overflow-y-auto rounded-lg p-2 text-xs/5 {% if seg.occ.event.unavailability %}bg-red-50 hover:bg-red-100{% else %}bg-blue-50 hover:bg-blue-100{% endif %}">
                        <p class="order-1 font-semibold {% if seg.occ.event.unavailability %}text-red-700{% else %}text-blue-700{% endif %}">
                          {{ seg.occ.title }}
                        </p>
                        <p class="{% if seg.occ.event.unavailability %}text-red-500{% else %}text-blue-500{% endif %}">
                          <time datetime="{{ seg.start|date:'c' }}">{{ seg.start|date:'H:i' }}</time>
                        </p>
                      </a>
                    </li>
                  {% endfor %}
                {% endif %}
              {% endfor %}
            </ol>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>