{% extends "base.html" %}

{% block title %}Templates - SMS Campaign Manager{% endblock %}

{% block content %}
<div x-data="templatesApp" x-init="init()" class="p-6">
    <div class="max-w-6xl mx-auto">
        <h2 class="text-2xl font-bold text-gray-800 mb-6">📝 Message Templates</h2>

        <!-- Create/Edit Template Form -->
        <div class="mb-8 p-6 border rounded-lg bg-blue-50">
            <h3 class="font-semibold text-gray-700 mb-4">
                <span x-show="!editingTemplate">Create New Template</span>
                <span x-show="editingTemplate">Edit Template</span>
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Template Name</label>
                    <input type="text" x-model="templateForm.name"
                           placeholder="e.g., Volunteer Check-In"
                           class="w-full px-3 py-2 border rounded-lg">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Category</label>
                    <select x-model="templateForm.category" class="w-full px-3 py-2 border rounded-lg">
                        <option value="general">General</option>
                        <option value="volunteer">Volunteer</option>
                        <option value="reminder">Reminder</option>
                        <option value="gratitude">Gratitude</option>
                        <option value="followup">Follow-up</option>
                    </select>
                </div>
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                <input type="text" x-model="templateForm.description"
                       placeholder="Brief description of when to use this template"
                       class="w-full px-3 py-2 border rounded-lg">
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Message Template <span class="text-gray-500">(Use {name} for personalization)</span>
                </label>
                <textarea x-model="templateForm.content"
                          placeholder="Hi {name}! Your message here..."
                          class="w-full px-3 py-2 border rounded-lg h-24"></textarea>
            </div>
            <div class="flex gap-2">
                <button @click="saveNewTemplate()"
                        :disabled="!templateForm.name || !templateForm.content"
                        class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 disabled:opacity-50">
                    <span x-show="!editingTemplate">Save Template</span>
                    <span x-show="editingTemplate">Update Template</span>
                </button>
                <button x-show="editingTemplate" @click="cancelEditTemplate()"
                        class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600">
                    Cancel
                </button>
            </div>
        </div>

        <!-- Templates List -->
        <div>
            <h3 class="font-semibold text-gray-700 mb-4">Saved Templates</h3>
            <div x-show="savedTemplates.length === 0" class="text-gray-500 text-center py-8 border rounded-lg">
                No templates saved yet. Create one above to get started!
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <template x-for="template in savedTemplates" :key="template.id">
                    <div class="border rounded-lg p-4 hover:bg-gray-50 transition-colors">
                        <div class="flex justify-between items-start mb-3">
                            <div class="flex-1">
                                <div class="flex items-center gap-2 mb-2">
                                    <h4 class="font-medium text-gray-800" x-text="template.name"></h4>
                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800"
                                          x-text="template.category"></span>
                                    <span x-show="template.is_favorite" class="text-yellow-500">⭐</span>
                                </div>
                                <p x-show="template.description" class="text-sm text-gray-600 mb-2" x-text="template.description"></p>
                            </div>
                        </div>
                        <div class="text-sm text-gray-700 bg-white p-3 rounded border mb-3 italic">
                            "<span x-text="template.template || template.content"></span>"
                        </div>
                        <div class="flex justify-between items-center text-xs text-gray-500 mb-3">
                            <span>Used <span x-text="template.usage_count || 0"></span> times</span>
                            <span>Created <span x-text="formatDate(template.created_at)"></span></span>
                        </div>
                        <div class="flex gap-2">
                            <button @click="loadTemplateForEditing(template)"
                                    class="text-blue-600 hover:text-blue-800 text-sm px-2 py-1 border border-blue-200 rounded hover:bg-blue-50">
                                Edit
                            </button>
                            <button @click="toggleTemplateFavorite(template)"
                                    class="text-yellow-600 hover:text-yellow-800 text-sm px-2 py-1 border border-yellow-200 rounded hover:bg-yellow-50">
                                <span x-show="template.is_favorite">Unfav</span>
                                <span x-show="!template.is_favorite">Fav</span>
                            </button>
                            <button @click="deleteTemplate(template.id, template.name)"
                                    class="text-red-600 hover:text-red-800 text-sm px-2 py-1 border border-red-200 rounded hover:bg-red-50">
                                Delete
                            </button>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/templates.js?v={{ cache_version }}"></script>
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('templatesApp', () => templatesApp());
    });
</script>
{% endblock %}