{% comment %}
Week view - 7 columns, hourly rows.
Context: week_days, week_slots, 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 - 200px);">
    <!-- 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_cells 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">{{ hour }}:00</span>
        </div>
        {% for cell in day_cells %}
        <div class="border-r border-stone-100 last:border-r-0 p-1 cal-add-cell cal-drop {% if cell.posts or cell.slots %}has-posts{% endif %} {% if cell.day == today %}bg-orange-50/30{% endif %}"
             data-date="{{ cell.compose_date }}" data-time="{{ cell.compose_time }}">
            {% if cell.day > today or cell.day == today and hour >= current_hour %}
            <a href="{% url 'composer:compose' workspace_id=workspace.id %}?scheduled_date={{ cell.compose_date }}&scheduled_time={{ cell.compose_time }}" 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 %}
            {% if cell.slots %}
            <div class="flex flex-col gap-1 mb-1">
                {% for slot in cell.slots %}
                <div class="calendar-channel-slot calendar-channel-slot--week {% if slot.is_past %}is-past-open{% endif %}">
                    <span class="calendar-slot-platform-icon">
                        {% include "social_accounts/partials/_platform_icon.html" with platform=slot.account.platform size="3" %}
                    </span>
                    <span class="truncate">{{ slot.account.account_name|default:slot.account.account_handle }}</span>
                    <span class="tabular-nums text-stone-500">{{ slot.time_label }}</span>
                    {% if not slot.is_past %}
                    <a href="{% url 'composer:compose' workspace_id=workspace.id %}?account={{ slot.account.id }}&scheduled_date={{ slot.compose_date }}&scheduled_time={{ slot.compose_time }}"
                       class="calendar-slot-add"
                       title="Schedule post for {{ slot.account.account_name|default:slot.account.account_handle }} at {{ slot.time_label }}">
                        <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>
                    {% else %}
                    <span class="calendar-slot-state">Open</span>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
            {% endif %}
            {% for pp in cell.posts %}
            <a href="{% url 'composer:compose_edit' workspace_id=workspace.id post_id=pp.post_id %}?account={{ pp.social_account_id }}"
               class="post-chip status-{{ pp.status }}{% if pp.is_reschedulable %} is-draggable{% endif %}"
               title="{% if pp.is_reschedulable %}Move or open{% else %}Open{% endif %}"
               {% if pp.is_reschedulable %}draggable="true" data-platform-post-id="{{ pp.id }}"{% else %}draggable="false"{% endif %}>
                {% if pp.is_bulk_selectable %}{% include "calendar/partials/_select_checkbox.html" with pp_id=pp.id %}{% endif %}
                <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">
                {% elif first_media and first_media.media_asset.is_video %}
                <video src="{{ first_media.media_asset.file.url }}#t=0.5" class="w-5 h-5 rounded object-cover flex-shrink-0" muted preload="metadata"></video>
                {% endif %}
                {% endwith %}
                <span class="truncate">{{ pp.post.title|default:pp.post.caption_snippet|truncatechars:28 }}</span>
                {% if pp.takes_calendar_slot %}
                <span class="calendar-post-slot-check" title="Scheduled in a channel slot">
                    <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="M5 13l4 4L19 7"/></svg>
                </span>
                {% endif %}
            </a>
            {% endfor %}
        </div>
        {% endfor %}
    </div>
    {% endfor %}
</div>