{% extends "base.html" %}

{% block title %}Saved Replies - {{ workspace.name }} - Redea Social{% endblock %}

{% block content %}
<div class="max-w-2xl">
    <!-- Header -->
    <div class="flex items-center justify-between mb-6">
        <div>
            <div class="flex items-center gap-3 mb-1">
                <a href="{% url 'inbox:feed' workspace_id=workspace.id %}"
                   class="text-stone-400 hover:text-stone-600 transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
                </a>
                <h2 class="text-xl font-semibold text-stone-900 tracking-tight">Saved Replies</h2>
            </div>
            <p class="text-sm text-stone-500 ml-8">Pre-written responses for common questions. Use variables: <code class="text-[11px] px-1 py-0.5 bg-stone-100 rounded">{sender_name}</code> <code class="text-[11px] px-1 py-0.5 bg-stone-100 rounded">{account_name}</code> <code class="text-[11px] px-1 py-0.5 bg-stone-100 rounded">{post_url}</code></p>
        </div>
        <a href="{% url 'inbox:saved_reply_create' workspace_id=workspace.id %}"
           class="inline-flex items-center gap-1.5 px-4 py-2 text-[13px] font-semibold text-white rounded-full transition-all duration-150"
           style="background: var(--primary); box-shadow: var(--shadow-primary);">
            <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>
            New Reply
        </a>
    </div>

    <!-- List -->
    {% if saved_replies %}
    <div class="bg-white border border-stone-200 rounded-xl overflow-hidden" style="box-shadow: var(--shadow-xs);">
        {% for reply in saved_replies %}
        <div class="flex items-start gap-4 px-5 py-4 {% if not forloop.last %}border-b border-stone-100{% endif %} hover:bg-stone-50 transition-colors group">
            <div class="flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center" style="background: var(--primary-soft);">
                <svg class="w-4 h-4" style="color: var(--primary);" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg>
            </div>
            <div class="flex-1 min-w-0">
                <h3 class="text-[14px] font-semibold text-stone-800">{{ reply.title }}</h3>
                <p class="text-[13px] text-stone-500 mt-0.5 leading-relaxed">{{ reply.body|truncatewords:30 }}</p>
            </div>
            <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0">
                <a href="{% url 'inbox:saved_reply_edit' workspace_id=workspace.id reply_id=reply.id %}"
                   class="w-7 h-7 flex items-center justify-center rounded-md text-stone-400 hover:text-stone-600 hover:bg-stone-100 transition-all">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                </a>
                <form x-data method="post" action="{% url 'inbox:saved_reply_delete' workspace_id=workspace.id reply_id=reply.id %}"
                      @submit="if(!confirm('Delete this saved reply?')) $event.preventDefault()">
                    {% csrf_token %}
                    <button type="submit"
                            class="w-7 h-7 flex items-center justify-center rounded-md text-stone-400 hover:text-red-500 hover:bg-red-50 transition-all cursor-pointer">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
                    </button>
                </form>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="bg-white border border-stone-200 rounded-xl p-12 text-center" style="box-shadow: var(--shadow-xs);">
        <div class="w-12 h-12 rounded-xl flex items-center justify-center mx-auto mb-3" style="background: var(--surface-2);">
            <svg class="w-6 h-6" style="color: var(--text-ghost);" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg>
        </div>
        <h3 class="text-sm font-semibold text-stone-800 mb-1">No saved replies yet</h3>
        <p class="text-[13px] text-stone-500">Create reusable response templates for common questions.</p>
    </div>
    {% endif %}
</div>
{% endblock %}