{% extends "base.html" %}

{% block title %}Content Categories - {{ workspace.name }} - Redea Social{% endblock %}

{% block page_header %}
<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-base font-semibold text-stone-900" style="letter-spacing: -0.01em;">Content Categories</h1>
        <p class="text-sm text-stone-500 mt-1">Organize posts by category for calendar filtering and queue scheduling.</p>
    </div>
    <a href="{% url 'calendar:calendar' workspace_id=workspace.id %}" class="text-sm text-stone-500 hover:text-stone-700 flex items-center gap-1">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
        Back to Calendar
    </a>
</div>
{% endblock %}

{% block content %}
<div class="max-w-2xl" x-data="{ showForm: false, editId: null }">

    <!-- Add Category Form -->
    <div class="mb-6">
        <button @click="showForm = !showForm" class="btn-brand text-sm py-2 px-4 flex items-center gap-1.5">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
            Add Category
        </button>

        <form x-show="showForm" x-cloak
              hx-post="{% url 'composer:category_create' workspace_id=workspace.id %}"
              hx-target="body"
              hx-swap="none"
              @htmx:after-request="if(event.detail.successful) { showForm = false; this.reset(); }"
              class="mt-3 p-4 bg-stone-50 rounded-xl border border-stone-200 flex items-end gap-3">
            {% csrf_token %}
            <div class="flex-1">
                <label class="block text-xs font-semibold text-stone-700 mb-1">Name</label>
                <input type="text" name="name" placeholder="e.g., Educational" required class="form-input w-full text-sm">
            </div>
            <div>
                <label class="block text-xs font-semibold text-stone-700 mb-1">Color</label>
                <input type="color" name="color" value="#3B82F6" class="w-10 h-[38px] rounded-lg border border-stone-200 cursor-pointer p-0.5">
            </div>
            <button type="submit" class="btn-brand text-sm py-2 px-4">Save</button>
            <button type="button" @click="showForm = false" class="text-sm text-stone-500 hover:text-stone-700 py-2 px-3">Cancel</button>
        </form>
    </div>

    <!-- Category List -->
    <div id="category-list"
         hx-get="{% url 'composer:category_list' workspace_id=workspace.id %}"
         hx-trigger="categoryChanged from:body"
         hx-select="#category-items"
         hx-target="#category-items"
         hx-swap="outerHTML">
        <div id="category-items" class="space-y-2">
            {% for cat in categories %}
            <div class="flex items-center gap-3 p-3 bg-white rounded-lg border border-stone-200 group hover:border-stone-300 transition-colors"
                 x-data="{ editing: false }">
                <!-- View mode -->
                <template x-if="!editing">
                    <div class="flex items-center gap-3 w-full">
                        <span class="w-4 h-4 rounded-full flex-shrink-0" style="background: {{ cat.color }};"></span>
                        <span class="flex-1 text-sm font-medium text-stone-800">{{ cat.name }}</span>
                        <span class="text-xs text-stone-400">{{ cat.posts.count }} post{{ cat.posts.count|pluralize }}</span>
                        <button @click="editing = true" class="opacity-0 group-hover:opacity-100 text-stone-400 hover:text-stone-600 transition-all p-1">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                        </button>
                        <form x-data hx-post="{% url 'composer:category_delete' workspace_id=workspace.id category_id=cat.id %}"
                              hx-swap="none"
                              class="opacity-0 group-hover:opacity-100 transition-all"
                              @submit="if(!confirm('Delete this category?')) $event.preventDefault()">
                            {% csrf_token %}
                            <button type="submit" class="text-stone-400 hover:text-red-500 transition-colors p-1">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            </button>
                        </form>
                    </div>
                </template>

                <!-- Edit mode -->
                <template x-if="editing">
                    <form hx-post="{% url 'composer:category_edit' workspace_id=workspace.id category_id=cat.id %}"
                          hx-swap="none"
                          @htmx:after-request="editing = false"
                          class="flex items-center gap-3 w-full">
                        {% csrf_token %}
                        <input type="color" name="color" value="{{ cat.color }}" class="w-8 h-8 rounded border border-stone-200 cursor-pointer p-0.5">
                        <input type="text" name="name" value="{{ cat.name }}" class="form-input flex-1 text-sm" required>
                        <button type="submit" class="text-sm font-semibold" style="color: var(--primary);">Save</button>
                        <button type="button" @click="editing = false" class="text-sm text-stone-500">Cancel</button>
                    </form>
                </template>
            </div>
            {% empty %}
            <div class="text-center py-12">
                <div class="w-12 h-12 rounded-full bg-stone-100 flex items-center justify-center mx-auto mb-3">
                    <svg class="w-6 h-6 text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A2 2 0 013 12V7a4 4 0 014-4z"/></svg>
                </div>
                <p class="text-sm font-medium text-stone-700">No categories yet</p>
                <p class="text-xs text-stone-500 mt-1">Create categories to organize your posts.</p>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}