{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <h1>Template Management</h1>
            <p>Manage video overlay templates and create custom designs.</p>
            
            <!-- Template List -->
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5>Available Templates</h5>
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createTemplateModal">
                        <i class="fas fa-plus"></i> Create Template
                    </button>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Category</th>
                                    <th>Author</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="templates-table-body">
                                <!-- Template rows will be populated by JavaScript -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <!-- Template Preview -->
            <div class="card">
                <div class="card-header">
                    <h5>Template Preview</h5>
                </div>
                <div class="card-body">
                    <div id="template-preview" class="template-preview-container">
                        <p>Select a template to preview</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Create Template Modal -->
<div class="modal fade" id="createTemplateModal" tabindex="-1" aria-labelledby="createTemplateModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createTemplateModalLabel">Create New Template</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="create-template-form">
                    <div class="mb-3">
                        <label for="template-name" class="form-label">Template Name</label>
                        <input type="text" class="form-control" id="template-name" required>
                    </div>
                    <div class="mb-3">
                        <label for="template-category" class="form-label">Category</label>
                        <select class="form-select" id="template-category">
                            <option value="news">News</option>
                            <option value="sports">Sports</option>
                            <option value="entertainment">Entertainment</option>
                            <option value="custom">Custom</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="template-description" class="form-label">Description</label>
                        <textarea class="form-control" id="template-description" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="create-template-btn">Create Template</button>
            </div>
        </div>
    </div>
</div>

<script>
    // Load templates on page load
    function loadTemplates() {
        fetch('/api/templates')
            .then(response => response.json())
            .then(data => {
                const tbody = document.getElementById('templates-table-body');
                tbody.innerHTML = '';
                
                data.forEach(template => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${template.name}</td>
                        <td>${template.category}</td>
                        <td>${template.author || 'System'}</td>
                        <td>
                            <button class="btn btn-sm btn-primary edit-template" data-id="${template.id}">Edit</button>
                            <button class="btn btn-sm btn-info preview-template" data-id="${template.id}">Preview</button>
                            <button class="btn btn-sm btn-danger delete-template" data-id="${template.id}">Delete</button>
                        </td>
                    `;
                    tbody.appendChild(row);
                });
                
                // Add event listeners to action buttons
                document.querySelectorAll('.edit-template').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const templateId = this.getAttribute('data-id');
                        editTemplate(templateId);
                    });
                });
                
                document.querySelectorAll('.preview-template').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const templateId = this.getAttribute('data-id');
                        previewTemplate(templateId);
                    });
                });
                
                document.querySelectorAll('.delete-template').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const templateId = this.getAttribute('data-id');
                        deleteTemplate(templateId);
                    });
                });
            })
            .catch(error => {
                console.error('Error loading templates:', error);
            });
    }
    
    // Preview template
    function previewTemplate(templateId) {
        const previewContainer = document.getElementById('template-preview');
        previewContainer.innerHTML = `<p>Loading preview for template ${templateId}...</p>`;
        // In a real implementation, this would show a visual preview of the template
    }
    
    // Edit template
    function editTemplate(templateId) {
        alert(`Edit template ${templateId} - This would open the template editor`);
    }
    
    // Delete template
    function deleteTemplate(templateId) {
        if (confirm('Are you sure you want to delete this template?')) {
            // In a real implementation, this would delete the template
            alert(`Delete template ${templateId} - This would delete the template from the database`);
        }
    }
    
    // Create template
    document.getElementById('create-template-btn').addEventListener('click', function() {
        const name = document.getElementById('template-name').value;
        const category = document.getElementById('template-category').value;
        const description = document.getElementById('template-description').value;
        
        if (!name) {
            alert('Template name is required');
            return;
        }
        
        // In a real implementation, this would create the template
        alert(`Create template: ${name} (${category}) - This would save the template to the database`);
        
        // Close modal and refresh template list
        const modal = bootstrap.Modal.getInstance(document.getElementById('createTemplateModal'));
        modal.hide();
        loadTemplates();
    });
    
    // Load templates when page loads
    document.addEventListener('DOMContentLoaded', function() {
        loadTemplates();
    });
</script>
{% endblock %}