<!-- Monthly Sessions Calendar — Gantt Style -->
<div class="sessions-cal-wrap bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">

    <!-- Month navigation -->
    <div class="px-5 py-3 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
        <button hx-get="/api/projects/{{ project_id }}/sessions-calendar?month={{ prev_month }}&year={{ prev_year }}"
                hx-target="#sessions-calendar"
                hx-swap="innerHTML"
                class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors text-gray-500 dark:text-gray-400"
                title="Previous month">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
            </svg>
        </button>
        <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">{{ month_name }} {{ year }}</h3>
        <button hx-get="/api/projects/{{ project_id }}/sessions-calendar?month={{ next_month }}&year={{ next_year }}"
                hx-target="#sessions-calendar"
                hx-swap="innerHTML"
                class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors text-gray-500 dark:text-gray-400"
                title="Next month">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
        </button>
    </div>

    <!-- Legend + key -->
    <div class="px-5 py-2 border-b border-gray-100 dark:border-gray-700 flex flex-wrap items-center gap-x-5 gap-y-1.5">
        {% if legend %}
        <div class="flex flex-wrap gap-x-4 gap-y-1">
            {% for loc in legend %}
            <div class="flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-400">
                <span class="w-2.5 h-2.5 rounded-full shrink-0" style="background-color: {{ loc.color }}"></span>
                <span>{{ loc.name }}</span>
            </div>
            {% endfor %}
        </div>
        {% endif %}
        <!-- Bar key -->
        <div class="flex items-center gap-3 text-xs text-gray-400 dark:text-gray-500 ml-auto shrink-0">
            <div class="flex items-center gap-1.5">
                <div class="w-8 h-2 rounded-sm" style="background:rgba(100,100,100,0.25)"></div>
                <span>Device on</span>
            </div>
            <div class="flex items-center gap-1.5">
                <div class="w-8 h-2 rounded-sm bg-blue-500"></div>
                <span>Effective window</span>
            </div>
        </div>
    </div>

    <!-- Day-of-week headers -->
    <div class="grid grid-cols-7 border-b border-gray-100 dark:border-gray-700">
        {% for day_name in ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] %}
        <div class="py-2 text-center text-xs font-medium uppercase tracking-wide
                    {% if loop.index == 1 or loop.index == 7 %}text-amber-500 dark:text-amber-400{% else %}text-gray-400 dark:text-gray-500{% endif %}">
            {{ day_name }}
        </div>
        {% endfor %}
    </div>

    <!-- Calendar grid -->
    {% for week in weeks %}
    <div class="grid grid-cols-7 {% if not loop.last %}border-b border-gray-100 dark:border-gray-700{% endif %}">
        {% for day in week %}
        <div class="min-h-[80px] p-1.5
                    {% if not loop.last %}border-r border-gray-100 dark:border-gray-700{% endif %}
                    {% if not day.in_month %}bg-gray-50 dark:bg-slate-800/50{% else %}bg-white dark:bg-slate-800{% endif %}
                    {% if day.is_today %}ring-1 ring-inset ring-seismo-orange{% endif %}">

            <!-- Date number -->
            <div class="text-right mb-1.5">
                <span class="text-xs {% if day.is_today %}font-bold text-seismo-orange{% elif day.in_month %}text-gray-700 dark:text-gray-300{% else %}text-gray-300 dark:text-gray-600{% endif %}">
                    {{ day.date.day }}
                </span>
            </div>

            <!-- Gantt bars -->
            {% if day.sessions %}
            <div class="space-y-2">
                {% for s in day.sessions %}

                <a href="/api/projects/{{ project_id }}/sessions/{{ s.session_id }}/detail" class="block">

                    <!-- 24-hour timeline bar -->
                    <div class="relative overflow-hidden -mx-1.5" style="height:11px; background:rgba(128,128,128,0.08);">
                        <div class="absolute top-0 bottom-0 w-px" style="left:25%; background:rgba(128,128,128,0.18)"></div>
                        <div class="absolute top-0 bottom-0 w-px" style="left:50%; background:rgba(128,128,128,0.28)"></div>
                        <div class="absolute top-0 bottom-0 w-px" style="left:75%; background:rgba(128,128,128,0.18)"></div>
                        <div class="absolute top-0 bottom-0"
                             style="left:{{ s.dev_start_pct }}%; width:{{ s.dev_width_pct }}%; background-color:{{ s.color }}; opacity:0.28;"></div>
                        {% if s.eff_start_pct is not none %}
                        <div class="absolute"
                             style="left:{{ s.eff_start_pct }}%; width:{{ s.eff_width_pct }}%; top:1.5px; bottom:1.5px; background-color:{{ s.color }};"></div>
                        {% endif %}
                    </div>

                    <!-- Label -->
                    <div class="truncate mt-0.5" style="color:{{ s.color }}; font-size:0.58rem; line-height:1.3;">
                        {{ s.location_name }} · {{ day.date.strftime('%-m/%-d') }} · {% if s.period_type %}{{ 'Night' if 'night' in s.period_type else 'Day' }}{% else %}—{% endif %}
                    </div>

                </a>

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

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

    <!-- Time scale footer hint -->
    <div class="px-4 py-1.5 border-t border-gray-100 dark:border-gray-700 flex justify-between text-gray-300 dark:text-gray-600" style="font-size:0.6rem;">
        <span>12 AM</span>
        <span>6 AM</span>
        <span>12 PM</span>
        <span>6 PM</span>
        <span>12 AM</span>
    </div>

</div>

