{% extends "base.html" %}

{% block title %}Posting Slots - {{ workspace.name }} - Redea Social{% endblock %}
{% block page_title %}Posting Schedule{% endblock %}

{% block content %}
<div class="max-w-3xl">
    <div class="mb-6">
        <h2 class="text-lg font-semibold text-stone-900">Posting Schedule</h2>
        <p class="text-sm text-stone-500 mt-0.5">Define recurring time slots for automatic queue scheduling</p>
    </div>

    {% for account in accounts %}
    <div class="bg-white border border-stone-200 rounded-xl mb-4 overflow-hidden">
        <div class="px-5 py-3 border-b border-stone-100 flex items-center gap-3">
            <span class="platform-icon pi-{{ account.platform }} w-7 h-7 text-[10px] rounded-lg">
                {{ account.platform_icon|upper }}
            </span>
            <div>
                <div class="text-sm font-semibold text-stone-800">{{ account.account_name|default:account.account_handle }}</div>
                <div class="text-xs text-stone-400">{{ account.get_platform_display }}</div>
            </div>
        </div>
        <div class="p-5">
            <!-- Existing slots -->
            {% with account_slots=slots_by_account|default_if_none:"" %}
            {% endwith %}

            <!-- Add slot form -->
            <form hx-post="{% url 'calendar:save_posting_slot' workspace_id=workspace.id %}"
                  hx-target="this" hx-swap="beforebegin"
                  class="flex items-center gap-3">
                <input type="hidden" name="social_account_id" value="{{ account.id }}">
                <select name="day_of_week" class="text-sm px-3 py-2 rounded-lg border border-stone-200 outline-none focus:border-orange-500">
                    {% for value, label in day_choices %}
                    <option value="{{ value }}">{{ label }}</option>
                    {% endfor %}
                </select>
                <input type="time" name="time" value="09:00"
                       class="form-datetime">
                <button type="submit"
                        class="inline-flex items-center gap-1 px-3 py-2 text-xs font-semibold text-orange-600 border border-orange-200 rounded-full hover:bg-orange-50 transition-all duration-150">
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                    Add Slot
                </button>
            </form>
        </div>
    </div>
    {% empty %}
    <div class="text-center py-12">
        <p class="text-sm text-stone-500">No connected accounts to configure posting slots for.</p>
    </div>
    {% endfor %}
</div>
{% endblock %}