{% extends "base.html" %}

{% block title %}Post Templates - {{ 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;">Post Templates</h1>
        <p class="text-sm text-stone-500 mt-1">Reusable templates to speed up content creation.</p>
    </div>
    <a href="{% url 'composer:compose' 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 Composer
    </a>
</div>
{% endblock %}

{% block content %}
<div class="max-w-3xl"
     id="templates-container"
     hx-get="{% url 'composer:template_list' workspace_id=workspace.id %}"
     hx-trigger="templateChanged from:body"
     hx-select="#templates-grid"
     hx-target="#templates-grid"
     hx-swap="outerHTML">

    <div id="templates-grid" class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        {% for tpl in templates %}
        <div class="bg-white rounded-xl border border-stone-200 p-4 hover:border-stone-300 transition-colors group">
            <div class="flex items-start justify-between mb-2">
                <h3 class="text-sm font-semibold text-stone-800 line-clamp-1">{{ tpl.name }}</h3>
                <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-all flex-shrink-0 ml-2">
                    <form x-data hx-post="{% url 'composer:template_delete' workspace_id=workspace.id template_id=tpl.id %}" hx-swap="none"
                          @submit="if(!confirm('Delete this template?')) $event.preventDefault()">
                        {% csrf_token %}
                        <button type="submit" class="text-stone-400 hover:text-red-500 p-1">
                            <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="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>
            </div>
            {% if tpl.description %}
            <p class="text-xs text-stone-500 mb-3 line-clamp-2">{{ tpl.description }}</p>
            {% endif %}
            {% if tpl.template_data.caption %}
            <p class="text-xs text-stone-600 bg-stone-50 rounded-lg p-2 mb-3 line-clamp-3 font-mono">{{ tpl.template_data.caption|truncatechars:120 }}</p>
            {% endif %}
            <div class="flex items-center justify-between">
                <span class="text-[11px] text-stone-400">
                    {% if tpl.created_by %}by {{ tpl.created_by.name|default:tpl.created_by.email }}{% endif %}
                </span>
                <a href="{% url 'composer:use_template' workspace_id=workspace.id template_id=tpl.id %}"
                   class="text-xs font-semibold py-1.5 px-3 rounded-full border border-stone-200 hover:border-stone-300 text-stone-700 hover:text-stone-900 transition-colors">
                    Use Template
                </a>
            </div>
        </div>
        {% empty %}
        <div class="col-span-2 text-center py-16">
            <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="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg>
            </div>
            <p class="text-sm font-medium text-stone-700">No templates yet</p>
            <p class="text-xs text-stone-500 mt-1">Save a post as a template from the composer to get started.</p>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}