{% comment %}
Month view grid - 7 columns, N rows of weeks.
Context: calendar_weeks, month_name, prev_month, next_month, day_names, unscheduled_drafts, workspace.
Enhanced with: holidays, custom events, category colors, recurring badges.
{% endcomment %}

<div class="bg-white overflow-x-auto" style="animation: slideUp 200ms cubic-bezier(0.16,1,0.3,1) both">
  <div class="min-w-[640px]">
    <!-- Day headers -->
    <div class="grid grid-cols-7 border-b border-stone-200 bg-stone-50">
        {% for day_name in day_names %}
        <div class="px-3 py-2.5 text-xs font-semibold text-stone-500 text-center border-r border-stone-200 last:border-r-0 tracking-wide">
            {{ day_name }}
        </div>
        {% endfor %}
    </div>

    <!-- Week rows -->
    {% for week in calendar_weeks %}
    <div class="grid grid-cols-7">
        {% for day in week %}
        <div class="cal-day cal-add-cell cal-drop {% if day.posts %}has-posts{% endif %} {% if day.is_today %}today{% elif day.is_past %}past{% endif %} {% if not day.is_current_month %}other-month{% endif %}"
             data-date="{{ day.date|date:'Y-m-d' }}" data-time="09:00">
            {% if not day.is_past %}
            <a href="{% url 'composer:compose' workspace_id=workspace.id %}?scheduled_date={{ day.date|date:'Y-m-d' }}&scheduled_time=09: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 %}
            <div class="flex items-center justify-between mb-1">
                <div class="day-num">{{ day.date.day }}</div>
                {% if day.holidays %}
                <div class="flex items-center gap-0.5">
                    {% for h in day.holidays %}
                    <span class="text-[10px]" title="{{ h.name }}">{{ h.emoji }}</span>
                    {% endfor %}
                </div>
                {% endif %}
            </div>

            {% if day.holidays %}
            <div class="mb-1">
                {% for h in day.holidays %}
                <div class="text-[9px] text-amber-600 font-medium leading-tight truncate" title="{{ h.name }}">{{ h.name }}</div>
                {% endfor %}
            </div>
            {% endif %}

            <!-- Custom events as colored bars -->
            {% for event in day.events %}
            <div class="text-[9px] font-semibold text-white px-1.5 py-0.5 rounded mb-0.5 truncate"
                 style="background: {{ event.color }};"
                 title="{{ event.title }}{% if event.description %} - {{ event.description }}{% endif %}">
                {{ event.title }}
            </div>
            {% endfor %}

            {% for pp in day.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.post.recurrence_rule %}
                <svg class="w-3 h-3 text-current opacity-50 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                {% endif %}
            </a>
            {% endfor %}

            {% if day.overflow > 0 %}
            <div class="text-[10px] font-semibold text-stone-400 pl-1 mt-0.5">
                +{{ day.overflow }} more
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
    {% endfor %}
  </div>
</div>