<?php include APP_PATH . '/views/layouts/header.php'; ?>

<div class="container-fluid">
    <!-- Page Header -->
    <div class="page-header">
        <div class="row align-items-center">
            <div class="col">
                <h1>Templates</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="<?php echo URL_PATH; ?>/admin/dashboard">Dashboard</a></li>
                        <li class="breadcrumb-item active">Templates</li>
                    </ol>
                </nav>
            </div>
            <div class="col-auto">
                <a href="<?php echo URL_PATH; ?>/admin/templates/create" class="btn btn-primary">
                    <i class="bi bi-plus-circle"></i> Add New Template
                </a>
            </div>
        </div>
    </div>
    
    <!-- Search Box -->
    <div class="card mb-3">
        <div class="card-body">
            <div class="row">
                <div class="col-md-12">
                    <input type="text" id="templateSearch" class="form-control" placeholder="🔍 Search templates by name, description, or content...">
                </div>
            </div>
        </div>
    </div>

    <!-- Templates Table -->
    <div class="card">
        <div class="card-header">
            <i class="bi bi-file-text"></i> All Templates
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover data-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Status</th>
                            <th>Created</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="templatesTableBody">
                        <!-- Data will be loaded via AJAX -->
                    </tbody>
                </table>
            </div>
            
            <div id="templatesPagination"></div>
            
            <div id="templatesEmpty" class="alert alert-info" style="display: none;">
                <i class="bi bi-info-circle"></i> No templates found. 
                <a href="<?php echo URL_PATH; ?>/admin/templates/create">Create your first template</a>
            </div>
        </div>
    </div>
</div>

<script src="<?php echo URL_PATH; ?>/js/ajax-search.js"></script>
<script>
// Initialize AJAX table handler for templates
new AjaxTableHandler({
    searchInput: '#templateSearch',
    tableBody: '#templatesTableBody',
    paginationContainer: '#templatesPagination',
    emptyMessage: '#templatesEmpty',
    apiEndpoint: '<?php echo URL_PATH; ?>/admin/ajax/search-templates',
    renderRow: (template) => {
        const description = template.description.length > 50 
            ? escapeHtml(template.description.substring(0, 50)) + '...' 
            : escapeHtml(template.description);
        const statusBadge = template.status === 'active' 
            ? '<span class="badge bg-success">Active</span>' 
            : '<span class="badge bg-secondary">Inactive</span>';
        
        return `
            <tr>
                <td>${template.id}</td>
                <td>
                    <i class="bi bi-file-text-fill"></i>
                    <strong>${escapeHtml(template.name)}</strong>
                </td>
                <td>${description}</td>
                <td>${statusBadge}</td>
                <td>${formatDate(template.created_at)}</td>
                <td>
                    <a href="<?php echo URL_PATH; ?>/admin/templates/toggle/${template.id}" 
                       class="btn btn-sm btn-warning" title="Toggle Status">
                        <i class="bi bi-toggle-on"></i>
                    </a>
                    <a href="<?php echo URL_PATH; ?>/admin/templates/edit/${template.id}" 
                       class="btn btn-sm btn-info" title="Edit">
                        <i class="bi bi-pencil"></i>
                    </a>
                    <a href="<?php echo URL_PATH; ?>/admin/templates/delete/${template.id}" 
                       class="btn btn-sm btn-danger btn-delete" 
                       data-name="${escapeHtml(template.name)}"
                       title="Delete">
                        <i class="bi bi-trash"></i>
                    </a>
                </td>
            </tr>
        `;
    }
});
</script>

<?php include APP_PATH . '/views/layouts/footer.php'; ?>
