{% load common_extras %}{% comment %}
Calendar mode shell for the Publish page.
Toolbar: nav arrows + period + Today + view dropdown | right: filter dropdowns.
{% endcomment %}

<div class="flex-1 flex flex-col min-h-0 -mx-3 sm:-mx-4 lg:-mx-6"
     x-data="{ ...calendarApp(), showEventForm: false, viewOpen: false }"
     @calendar-refresh.window="htmx.trigger('#calendar-content', 'refresh')"
     hx-trigger="calendarRefresh from:body"
     hx-get="{% url 'calendar:calendar' workspace_id=workspace.id %}?mode=calendar&view={{ view_type }}&date={{ target_date|date:'Y-m-d' }}{% if show_holidays %}&holidays=1{% endif %}"
     hx-target="#calendar-content"
     hx-swap="innerHTML">

    <!-- Toolbar -->
    <div class="bg-white border-b border-stone-200 px-3 sm:px-4 lg:px-6 pb-2 flex flex-wrap items-center gap-2 sm:gap-3">

        <!-- Left: Navigation arrows + period label + Today + View dropdown -->
        <div class="flex items-center gap-2">
            <a href="{% url 'calendar:calendar' workspace_id=workspace.id %}?mode=calendar&view={{ view_type }}&date={{ prev_date }}"
               class="w-7 h-7 rounded-md text-stone-400 hover:text-stone-700 hover:bg-stone-100 flex items-center justify-center transition-all duration-150">
                <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"/></svg>
            </a>
            <a href="{% url 'calendar:calendar' workspace_id=workspace.id %}?mode=calendar&view={{ view_type }}&date={{ next_date }}"
               class="w-7 h-7 rounded-md text-stone-400 hover:text-stone-700 hover:bg-stone-100 flex items-center justify-center transition-all duration-150">
                <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"/></svg>
            </a>
        </div>

        <h2 class="text-base font-bold text-stone-900 tracking-tight">
            {{ period_label }}
        </h2>

        {% if is_today_in_view %}
        <span class="px-3 py-1 text-xs font-semibold text-stone-300 border border-stone-100 rounded-md cursor-default select-none"
              aria-disabled="true" title="Already showing today">
            Today
        </span>
        {% else %}
        <a href="{% url 'calendar:calendar' workspace_id=workspace.id %}?mode=calendar&view={{ view_type }}"
           class="px-3 py-1 text-xs font-semibold text-stone-600 border border-stone-200 rounded-md hover:bg-stone-50 transition-all duration-150 no-underline">
            Today
        </a>
        {% endif %}

        <!-- View dropdown (Month/Week/Day) -->
        <div class="relative" @click.away="viewOpen = false">
            <button @click="viewOpen = !viewOpen"
                    class="flex items-center gap-1.5 px-3 py-1 text-xs font-semibold text-stone-600 border border-stone-200 rounded-md hover:bg-stone-50 transition-all duration-150">
                <span x-text="activeView.charAt(0).toUpperCase() + activeView.slice(1)">{{ view_type|title }}</span>
                <svg class="w-3 h-3 text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
            </button>
            <div x-show="viewOpen" x-cloak
                 x-transition:enter="transition ease-out duration-100"
                 x-transition:enter-start="opacity-0 -translate-y-1"
                 x-transition:enter-end="opacity-100 translate-y-0"
                 class="absolute left-0 top-full mt-1 bg-white rounded-lg shadow-lg ring-1 ring-stone-200 py-1 z-50 min-w-[100px]">
                <a href="{% url 'calendar:calendar' workspace_id=workspace.id %}?mode=calendar&view=month&date={{ target_date|date:'Y-m-d' }}"
                   class="block w-full text-left px-3 py-1.5 text-xs font-medium text-stone-600 hover:bg-stone-50 transition-colors no-underline {% if view_type == 'month' %}text-orange-600 bg-orange-50{% endif %}">
                    Month
                </a>
                <a href="{% url 'calendar:calendar' workspace_id=workspace.id %}?mode=calendar&view=week&date={{ target_date|date:'Y-m-d' }}"
                   class="block w-full text-left px-3 py-1.5 text-xs font-medium text-stone-600 hover:bg-stone-50 transition-colors no-underline {% if view_type == 'week' %}text-orange-600 bg-orange-50{% endif %}">
                    Week
                </a>
                <a href="{% url 'calendar:calendar' workspace_id=workspace.id %}?mode=calendar&view=day&date={{ target_date|date:'Y-m-d' }}"
                   class="block w-full text-left px-3 py-1.5 text-xs font-medium text-stone-600 hover:bg-stone-50 transition-colors no-underline {% if view_type == 'day' %}text-orange-600 bg-orange-50{% endif %}">
                    Day
                </a>
            </div>
        </div>

        <!-- Right side: filter dropdowns -->
        <div class="cal-filters-scroll flex items-center gap-2 ml-auto overflow-x-auto flex-nowrap" style="-webkit-overflow-scrolling: touch; scrollbar-width: none;">
            <!-- Status filter -->
            {% ui_select model="calendarFilters.status" options=status_choices onchange="reloadCalendar()" placeholder="All Posts" icon="status" %}

            <!-- Channels filter (multi-select) -->
            {% ui_select model="calendarFilters.channels" options=social_accounts multiple=True onchange="reloadCalendar()" placeholder="Channels" icon="channel" label_field="display_label" icon_field="platform" %}

            <!-- Tags filter -->
            {% ui_select model="calendarFilters.tag" options=all_tags onchange="reloadCalendar()" placeholder="Tags" icon="tag" %}

            <!-- Timezone -->
            {% ui_select model="calendarFilters.tz" options=timezone_options onchange="reloadCalendar()" placeholder="Timezone" icon="clock" %}
        </div>
    </div>

    <!-- Event creation form (overlay) -->
    <div x-show="showEventForm" x-cloak
         x-transition:enter="transition ease-out duration-150"
         x-transition:enter-start="opacity-0 -translate-y-2"
         x-transition:enter-end="opacity-100 translate-y-0"
         class="bg-white border-b border-stone-200 shadow-sm">
        {% include "calendar/partials/event_form.html" %}
    </div>

    <!-- Calendar content area (swapped by HTMX) -->
    <div id="calendar-content" class="flex-1 overflow-y-auto min-h-0">
        {% if view_type == 'month' %}
            {% include "calendar/partials/month_grid.html" %}
        {% elif view_type == 'week' %}
            {% include "calendar/partials/week_grid.html" %}
        {% elif view_type == 'day' %}
            {% include "calendar/partials/day_grid.html" %}
        {% elif view_type == 'list' %}
            {% include "calendar/partials/list_view.html" %}
        {% else %}
            {% include "calendar/partials/month_grid.html" %}
        {% endif %}
    </div>

    <!-- Status legend -->
    <div class="px-3 sm:px-4 lg:px-6 pt-4 lg:pt-6">
        <div class="flex flex-wrap items-center justify-end gap-x-1.5 gap-y-2 text-[11px]">
            <span class="inline-flex items-center gap-1.5 px-2 py-1 rounded-md"><span class="w-3 h-3 rounded-full" style="background:var(--color-stone-400)"></span><span style="color:var(--color-stone-600)">Draft</span></span>
            <span class="inline-flex items-center gap-1.5 px-2 py-1 rounded-md"><span class="w-3 h-3 rounded-full" style="background:#F97316"></span><span style="color:#C2410C">Pending Review</span></span>
            <span class="inline-flex items-center gap-1.5 px-2 py-1 rounded-md"><span class="w-3 h-3 rounded-full" style="background:#14B8A6"></span><span style="color:#0F766E">Approved</span></span>
            <span class="inline-flex items-center gap-1.5 px-2 py-1 rounded-md"><span class="w-3 h-3 rounded-full" style="background:#3B82F6"></span><span style="color:#1D4ED8">Scheduled</span></span>
            <span class="inline-flex items-center gap-1.5 px-2 py-1 rounded-md"><span class="w-3 h-3 rounded-full" style="background:#6366F1"></span><span style="color:#4338CA">Publishing</span></span>
            <span class="inline-flex items-center gap-1.5 px-2 py-1 rounded-md"><span class="w-3 h-3 rounded-full" style="background:#22C55E"></span><span style="color:#15803D">Published</span></span>
            <!-- <span class="inline-flex items-center gap-1.5 px-2 py-1 rounded-md"><span class="w-3 h-3 rounded-full" style="background:#EAB308"></span><span style="color:#A16207">Partially Published</span></span> -->
            <span class="inline-flex items-center gap-1.5 px-2 py-1 rounded-md"><span class="w-3 h-3 rounded-full" style="background:#EF4444"></span><span style="color:#B91C1C">Failed</span></span>
        </div>
    </div>
</div>