{% comment %}
Day view - single-day timeline with hourly divisions.
Context: day_slots, target_date, workspace.
{% endcomment %}

<div class="bg-white mx-auto" style="animation: slideUp 200ms cubic-bezier(0.16,1,0.3,1) both; max-height: calc(100vh - 200px); overflow-y: auto;">
{% for cell in day_slots %}
    <div class="flex border-b border-stone-100 min-h-[64px] cal-add-cell {% if cell.posts or cell.slots %}has-posts{% endif %} {% if is_today and cell.hour == current_hour %}bg-orange-50/50{% endif %}">
        <!-- Time label -->
        <div class="w-20 flex-shrink-0 border-r border-stone-200 px-3 py-2 text-right">
            <span class="text-xs font-medium tabular-nums {% if is_today and cell.hour == current_hour %}text-orange-600 font-semibold{% else %}text-stone-400{% endif %}">
                {% if cell.hour < 10 %}0{% endif %}{{ cell.hour }}:00
            </span>
        </div>
        <!-- Slots and posts in this hour (the drop target: chips are its direct
             children so SortableJS can manage them) -->
        <div class="flex-1 p-2 flex flex-col justify-center gap-1 cal-drop"
             data-date="{{ cell.compose_date }}" data-time="{{ cell.compose_time }}">
            {% if not is_past_day and not is_today or not is_past_day and cell.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 cal-add-btn--inline" style="position:static; margin:0 auto;" 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-wrap gap-1.5">
                {% for slot in cell.slots %}
                <div class="calendar-channel-slot {% 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>
    </div>
    {% endfor %}
</div>