{% comment %}
Org calendar week view - 7 columns, hourly rows. Posts link to their workspace's compose page.
Context: week_days, week_slots, today, default_workspace.
{% endcomment %}

<div class="bg-white overflow-auto" style="animation: slideUp 200ms cubic-bezier(0.16,1,0.3,1) both; max-height: calc(100vh - 260px);">
    <!-- Day headers -->
    <div class="grid grid-cols-[72px_repeat(7,minmax(0,1fr))] border-b border-stone-200 sticky top-0 bg-white z-10">
        <div class="border-r border-stone-200"></div>
        {% for day in week_days %}
        <div class="px-2 py-2 text-center border-r border-stone-200 last:border-r-0 {% if day == today %}bg-orange-50{% endif %}">
            <div class="text-[10px] font-semibold text-stone-400 uppercase">{{ day|date:"D" }}</div>
            <div class="text-sm font-semibold {% if day == today %}text-orange-600{% else %}text-stone-700{% endif %}">{{ day.day }}</div>
        </div>
        {% endfor %}
    </div>

    <!-- Hour rows -->
    {% for hour, day_slots in week_slots %}
    <div class="grid grid-cols-[72px_repeat(7,minmax(0,1fr))] border-b border-stone-100 min-h-[56px]">
        <div class="border-r border-stone-200 px-2 py-1 text-right">
            <span class="text-[11px] font-medium text-stone-400 tabular-nums">{% if hour < 10 %}0{% endif %}{{ hour }}:00</span>
        </div>
        {% for day, slot_posts in day_slots %}
        <div class="border-r border-stone-100 last:border-r-0 p-1 cal-add-cell {% if day == today %}bg-orange-50/30{% endif %}" style="position: relative;">
            {% if default_workspace and day > today or default_workspace and day == today and hour >= current_hour %}
            <a href="{% url 'composer:compose' workspace_id=default_workspace.id %}?scheduled_date={{ day|date:'Y-m-d' }}&scheduled_time={{ hour }}:00" class="cal-add-btn" title="Create post">
                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
            </a>
            {% endif %}
            {% for pp in slot_posts %}
            <a href="{% url 'composer:compose_edit' workspace_id=pp.post.workspace_id post_id=pp.post_id %}"
               class="cross-post-chip status-{{ pp.status }}"
               title="{{ pp.post.workspace.name }}: {{ pp.post.caption_snippet }}">
                <span class="ws-dot" style="background: {{ pp.post.workspace.primary_color|default:'#F97316' }};"></span>
                <span class="w-4 h-4 rounded flex items-center justify-center pi-{{ pp.social_account.platform }} flex-shrink-0 text-white">
                    {% include "social_accounts/partials/_platform_icon.html" with platform=pp.social_account.platform size="3" %}
                </span>
                {% with first_media=pp.post.media_attachments.all.0 %}
                {% if first_media and first_media.media_asset.thumbnail %}
                <img src="{{ first_media.media_asset.thumbnail.url }}" alt="" class="w-5 h-5 rounded object-cover flex-shrink-0">
                {% elif first_media and not first_media.media_asset.is_video %}
                <img src="{{ first_media.media_asset.file.url }}" alt="" class="w-5 h-5 rounded object-cover flex-shrink-0">
                {% endif %}
                {% endwith %}
                <span class="truncate">{{ pp.post.caption_snippet|truncatechars:28 }}</span>
            </a>
            {% endfor %}
        </div>
        {% endfor %}
    </div>
    {% endfor %}
</div>