{% comment %}
Weekly posting slots grid for a single social account.
Shows 7 columns (Sun–Sat) with on/off toggle and time slots.
Context: account (with prefetched posting_slots), workspace_id.
{% endcomment %}
{% load social_accounts_tags %}

{% get_posting_slots_display account as days %}

<div id="slots-grid-{{ account.id }}"
     hx-get="{% url 'calendar:account_slots_partial' workspace_id=workspace_id %}?social_account_id={{ account.id }}"
     hx-trigger="slotsUpdated[detail.accountId=='{{ account.id }}'] from:body"
     hx-swap="outerHTML">

    <div class="overflow-x-auto">
        <table class="w-full border-collapse">
            <thead>
                <tr class="border-b border-stone-200">
                    {% for day in days %}
                    <th class="px-2 py-2.5 text-center min-w-[100px]">
                        <div class="text-xs font-semibold text-stone-500 mb-2">{{ day.short_name }}</div>
                        {% if day.has_slots %}
                        <form hx-post="{% url 'calendar:toggle_posting_slot_day' workspace_id=workspace_id %}"
                              hx-swap="none" class="inline">
                            {% csrf_token %}
                            <input type="hidden" name="social_account_id" value="{{ account.id }}">
                            <input type="hidden" name="day_of_week" value="{{ day.value }}">
                            <button type="submit"
                                    class="relative inline-flex h-5 w-9 items-center rounded-full transition-colors duration-200 cursor-pointer {% if day.is_active %}bg-green-500{% else %}bg-stone-300{% endif %}"
                                    title="{% if day.is_active %}Disable {{ day.name }}{% else %}Enable {{ day.name }}{% endif %}">
                                <span class="inline-block h-3.5 w-3.5 rounded-full bg-white shadow-sm transform transition-transform duration-200 {% if day.is_active %}translate-x-[18px]{% else %}translate-x-[3px]{% endif %}"></span>
                            </button>
                        </form>
                        {% else %}
                        <div class="h-5"></div>
                        {% endif %}
                    </th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                <tr>
                    {% for day in days %}
                    <td class="px-2 py-3 align-top text-center">
                        <div class="space-y-1.5 min-h-[40px]">
                            {% for slot in day.slots %}
                            <div class="relative flex items-center justify-center"
                                 x-data="{ editing: false, hovered: false }"
                                 @mouseenter="hovered = true" @mouseleave="hovered = false">
                                <!-- Display mode -->
                                <div x-show="!editing" class="flex items-center gap-0.5">
                                    <button type="button" @click="editing = true"
                                            class="text-xs tabular-nums cursor-pointer hover:text-orange-600 transition-colors {% if not day.is_active %}text-stone-300 line-through{% else %}text-stone-700{% endif %}"
                                            title="Click to edit">
                                        {{ slot.time|time:"g:i A" }}
                                    </button>
                                    <form hx-post="{% url 'calendar:delete_posting_slot' workspace_id=workspace_id slot_id=slot.id %}"
                                          hx-swap="none" class="inline">
                                        {% csrf_token %}
                                        <input type="hidden" name="social_account_id" value="{{ account.id }}">
                                        <button type="submit"
                                                x-show="hovered" x-transition.opacity
                                                class="w-4 h-4 flex items-center justify-center text-stone-300 hover:text-red-500 transition-all cursor-pointer"
                                                title="Remove slot">
                                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                                        </button>
                                    </form>
                                </div>
                                <!-- Edit mode -->
                                <form x-show="editing" x-cloak
                                      hx-post="{% url 'calendar:update_posting_slot' workspace_id=workspace_id slot_id=slot.id %}"
                                      hx-swap="none"
                                      @htmx:after-request="editing = false"
                                      class="flex items-center gap-1">
                                    {% csrf_token %}
                                    <input type="hidden" name="social_account_id" value="{{ account.id }}">
                                    <input type="time" name="time" value="{{ slot.time|time:'H:i' }}"
                                           class="w-[90px] text-xs px-1.5 py-1 rounded border border-stone-200 outline-none focus:border-orange-400"
                                           @keydown.escape="editing = false">
                                    <button type="submit"
                                            class="w-5 h-5 flex items-center justify-center text-green-600 hover:text-green-700 cursor-pointer"
                                            title="Save">
                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                                    </button>
                                    <button type="button" @click="editing = false"
                                            class="w-5 h-5 flex items-center justify-center text-stone-400 hover:text-stone-600 cursor-pointer"
                                            title="Cancel">
                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                                    </button>
                                </form>
                            </div>
                            {% endfor %}
                        </div>

                        <!-- Add slot -->
                        <div x-data="{ adding: false, newTime: '09:00' }" class="mt-2">
                            <button x-show="!adding" @click="adding = true; $nextTick(() => $refs.timeInput_{{ day.value }}.focus())"
                                    class="inline-flex items-center justify-center w-6 h-6 rounded-full text-stone-300 hover:text-orange-500 hover:bg-orange-50 transition-colors cursor-pointer"
                                    title="Add time slot">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
                            </button>
                            <form x-show="adding" x-cloak
                                  hx-post="{% url 'calendar:save_posting_slot' workspace_id=workspace_id %}"
                                  hx-swap="none"
                                  @htmx:after-request="adding = false; newTime = '09:00'"
                                  class="flex items-center justify-center gap-1 mt-1">
                                {% csrf_token %}
                                <input type="hidden" name="social_account_id" value="{{ account.id }}">
                                <input type="hidden" name="day_of_week" value="{{ day.value }}">
                                <input type="time" name="time" x-model="newTime"
                                       x-ref="timeInput_{{ day.value }}"
                                       @keydown.escape="adding = false"
                                       class="w-[90px] text-xs px-1.5 py-1 rounded border border-stone-200 outline-none focus:border-orange-400">
                                <button type="submit"
                                        class="w-5 h-5 flex items-center justify-center text-green-600 hover:text-green-700 cursor-pointer"
                                        title="Add">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                                </button>
                                <button type="button" @click="adding = false"
                                        class="w-5 h-5 flex items-center justify-center text-stone-400 hover:text-stone-600 cursor-pointer"
                                        title="Cancel">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                                </button>
                            </form>
                        </div>
                    </td>
                    {% endfor %}
                </tr>
            </tbody>
        </table>
    </div>
</div>