orion/app/modules/prospecting/templates/prospecting/admin/campaigns.html

{% extends "admin/base.html" %}
{% from 'shared/macros/headers.html' import page_header %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}

{% block title %}Campaigns{% endblock %}

{% block alpine_data %}campaignManager(){% endblock %}

{% block content %}
{{ page_header('Campaign Templates', action_label='New Template', action_onclick='showCreateModal = true', action_icon='plus') }}

<!-- Filter by Lead Type -->
<div class="mb-6 flex flex-wrap gap-2">
    <button @click="filterLeadType = ''" :class="!filterLeadType ? 'bg-purple-600 text-white' : 'bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300'"
            class="px-3 py-1.5 text-sm rounded-lg">All</button>
    <template x-for="lt in leadTypes" :key="lt.value">
        <button @click="filterLeadType = lt.value"
                :class="filterLeadType === lt.value ? 'bg-purple-600 text-white' : 'bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300'"
                class="px-3 py-1.5 text-sm rounded-lg"
                x-text="lt.label"></button>
    </template>
</div>

{{ loading_state('Loading templates...') }}
{{ error_state('Error loading templates') }}

<!-- Templates Grid -->
<div x-show="!loading && !error" class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
    <template x-for="tpl in filteredTemplates()" :key="tpl.id">
        <div class="p-4 bg-white rounded-lg shadow dark:bg-gray-800">
            <div class="flex items-start justify-between mb-3">
                <div>
                    <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-200" x-text="tpl.name"></h3>
                    <div class="flex items-center space-x-2 mt-1">
                        <span class="px-2 py-0.5 text-xs rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300"
                              x-text="tpl.lead_type.replace('_', ' ')"></span>
                        <span class="px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400"
                              x-text="tpl.channel"></span>
                        <span class="text-xs text-gray-400" x-text="tpl.language.toUpperCase()"></span>
                    </div>
                </div>
                <span class="w-2 h-2 rounded-full" :class="tpl.is_active ? 'bg-green-500' : 'bg-gray-400'"></span>
            </div>
            <p x-show="tpl.subject_template" class="text-xs text-gray-500 mb-2 truncate" x-text="'Subject: ' + tpl.subject_template"></p>
            <p class="text-xs text-gray-400 line-clamp-2" x-text="tpl.body_template"></p>
            <div class="flex justify-end mt-3 space-x-2">
                <button @click="editTemplate(tpl)" class="text-xs text-purple-600 hover:text-purple-900 dark:text-purple-400">Edit</button>
                <button @click="deleteTemplate(tpl.id)" class="text-xs text-red-600 hover:text-red-900 dark:text-red-400">Delete</button>
            </div>
        </div>
    </template>
</div>

<!-- Create/Edit Template Modal --> {# noqa: FE-004 #}
<div x-show="showCreateModal || showEditModal" x-cloak
     class="fixed inset-0 z-30 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
     @click.self="showCreateModal = false; showEditModal = false">
    <div class="w-full px-6 py-4 overflow-hidden bg-white rounded-t-lg dark:bg-gray-800 sm:rounded-lg sm:m-4 sm:max-w-2xl max-h-[90vh] overflow-y-auto"
         @keydown.escape.window="showCreateModal = false; showEditModal = false">
        <header class="flex justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200"
                x-text="showEditModal ? 'Edit Template' : 'New Template'"></h3>
            <button @click="showCreateModal = false; showEditModal = false" class="text-gray-400 hover:text-gray-600">
                <span x-html="$icon('x', 'w-5 h-5')"></span>
            </button>
        </header>
        <div class="space-y-4">
            <div>
                <label class="text-sm text-gray-600 dark:text-gray-400">Name</label>
                <input type="text" x-model="templateForm.name"
                       class="w-full mt-1 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">
            </div>
            <div class="grid grid-cols-3 gap-4">
                <div>
                    <label class="text-sm text-gray-600 dark:text-gray-400">Lead Type</label>
                    <select x-model="templateForm.lead_type"
                            class="w-full mt-1 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">
                        <template x-for="lt in leadTypes" :key="lt.value">
                            <option :value="lt.value" x-text="lt.label"></option>
                        </template>
                    </select>
                </div>
                <div>
                    <label class="text-sm text-gray-600 dark:text-gray-400">Channel</label>
                    <select x-model="templateForm.channel"
                            class="w-full mt-1 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">
                        <option value="email">Email</option>
                        <option value="letter">Letter</option>
                        <option value="phone_script">Phone Script</option>
                    </select>
                </div>
                <div>
                    <label class="text-sm text-gray-600 dark:text-gray-400">Language</label>
                    <select x-model="templateForm.language"
                            class="w-full mt-1 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">
                        <option value="fr">French</option>
                        <option value="de">German</option>
                        <option value="en">English</option>
                        <option value="lb">Luxembourgish</option>
                    </select>
                </div>
            </div>
            <div>
                <label class="text-sm text-gray-600 dark:text-gray-400">Subject</label>
                <input type="text" x-model="templateForm.subject_template"
                       class="w-full mt-1 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">
            </div>
            <div>
                <label class="text-sm text-gray-600 dark:text-gray-400">Body</label>
                <textarea x-model="templateForm.body_template" rows="10"
                          class="w-full mt-1 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 font-mono"></textarea>
                <div class="mt-1 flex flex-wrap gap-1">
                    <span class="text-xs text-gray-400">Placeholders:</span>
                    <template x-for="ph in placeholders" :key="ph">
                        <button @click="insertPlaceholder(ph)"
                                class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400"
                                x-text="ph"></button>
                    </template>
                </div>
            </div>
            <div class="flex items-center">
                <input type="checkbox" x-model="templateForm.is_active" id="tpl-active"
                       class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                <label for="tpl-active" class="ml-2 text-sm text-gray-600 dark:text-gray-400">Active</label>
            </div>
        </div>
        <footer class="flex justify-end mt-6 space-x-3">
            <button @click="showCreateModal = false; showEditModal = false"
                    class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:bg-gray-700">
                Cancel
            </button>
            <button @click="saveTemplate()"
                    class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700">
                Save
            </button>
        </footer>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script defer src="{{ url_for('prospecting_static', path='admin/js/campaigns.js') }}"></script>
{% endblock %}