{% extends "base.html" %}
{% from "components/ui.html" import page_header %}

{% block content %}
{% set breadcrumbs = [
    {'text': 'Admin', 'url': url_for('admin.admin_dashboard')},
    {'text': 'Email Templates'}
] %}

{{ page_header(
    icon_class='fas fa-envelope',
    title_text='Email Templates',
    subtitle_text='Manage email templates for invoice emails',
    breadcrumbs=breadcrumbs,
    actions_html='<a href="' + url_for("admin.create_email_template") + '" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors"><i class="fas fa-plus mr-2"></i>Create Template</a>'
) }}

{% if templates %}
<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-border-light dark:divide-border-dark">
            <thead>
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-text-muted-light dark:text-text-muted-dark uppercase tracking-wider">Name</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-text-muted-light dark:text-text-muted-dark uppercase tracking-wider">Description</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-text-muted-light dark:text-text-muted-dark uppercase tracking-wider">Status</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-text-muted-light dark:text-text-muted-dark uppercase tracking-wider">Created</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-text-muted-light dark:text-text-muted-dark uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-card-light dark:bg-card-dark divide-y divide-border-light dark:divide-border-dark">
                {% for template in templates %}
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-text-light dark:text-text-dark">
                        <a href="{{ url_for('admin.view_email_template', template_id=template.id) }}" class="text-primary hover:underline">{{ template.name }}</a>
                    </td>
                    <td class="px-6 py-4 text-sm text-text-muted-light dark:text-text-muted-dark">
                        {{ template.description or '-' }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        {% if template.is_default %}
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">Default</span>
                        {% else %}
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">Active</span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-text-muted-light dark:text-text-muted-dark">
                        {{ template.created_at.strftime('%Y-%m-%d') if template.created_at else '-' }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <a href="{{ url_for('admin.view_email_template', template_id=template.id) }}" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 mr-3">View</a>
                        <a href="{{ url_for('admin.edit_email_template', template_id=template.id) }}" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 mr-3">Edit</a>
                        <button type="button" onclick="showDeleteModal('{{ template.id }}', '{{ template.name }}')" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">Delete</button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% else %}
<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow text-center text-text-muted-light dark:text-text-muted-dark">
    <p class="text-lg">{{ _('No email templates found.') }}</p>
    <p class="mt-2">{{ _('Create your first email template to customize invoice emails.') }}</p>
    <a href="{{ url_for('admin.create_email_template') }}" class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary/90">
        <i class="fas fa-plus mr-2"></i>{{ _('Create Email Template') }}
    </a>
</div>
{% endif %}

<!-- Delete Modal -->
<div id="deleteTemplateModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
        <div class="mt-3 text-center">
            <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">{{ _('Delete Email Template') }}</h3>
            <div class="mt-2 px-7 py-3">
                <p class="text-sm text-gray-500 dark:text-gray-400">{{ _('Are you sure you want to delete') }} "<strong id="deleteTemplateName"></strong>"? {{ _('This action cannot be undone.') }}</p>
            </div>
            <div class="items-center px-4 py-3">
                <button id="cancelDelete" onclick="hideDeleteModal()" class="px-4 py-2 bg-gray-300 dark:bg-gray-600 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-500 mr-2">{{ _('Cancel') }}</button>
                <form id="deleteTemplateForm" method="POST" class="inline-block">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button type="submit" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">{{ _('Delete') }}</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function showDeleteModal(templateId, name) {
    document.getElementById('deleteTemplateName').textContent = name;
    document.getElementById('deleteTemplateForm').action = "{{ url_for('admin.delete_email_template', template_id=0) }}".replace('0', templateId);
    document.getElementById('deleteTemplateModal').classList.remove('hidden');
}

function hideDeleteModal() {
    document.getElementById('deleteTemplateModal').classList.add('hidden');
}
</script>
{% endblock %}