{* Template Builder Main Interface *}

<div id="template-builder-app" class="template-builder" data-theme="{$theme_name}">
    <!-- Builder Header -->
    <div class="tb-header">
        <div class="tb-header-left">
            <button id="tb-back-btn" class="tb-btn tb-btn-secondary">
                <i class="icon-arrow-left"></i> Back
            </button>
            <input type="text" id="tb-template-name" class="tb-template-name-input"
                   value="{$template.template_name|default:'Untitled Template'}"
                   placeholder="Template Name" />
        </div>

        <div class="tb-header-center">
            <div class="tb-device-preview">
                <button class="tb-device-btn active" data-device="desktop" title="Desktop Preview">
                    <i class="icon-desktop"></i>
                </button>
                <button class="tb-device-btn" data-device="tablet" title="Tablet Preview">
                    <i class="icon-tablet"></i>
                </button>
                <button class="tb-device-btn" data-device="mobile" title="Mobile Preview">
                    <i class="icon-mobile"></i>
                </button>
            </div>
        </div>

        <div class="tb-header-right">
            <button id="tb-undo-btn" class="tb-btn tb-btn-icon" title="Undo" disabled>
                <i class="icon-undo"></i>
            </button>
            <button id="tb-redo-btn" class="tb-btn tb-btn-icon" title="Redo" disabled>
                <i class="icon-redo"></i>
            </button>
            <button id="tb-preview-btn" class="tb-btn tb-btn-secondary">
                <i class="icon-eye"></i> Preview
            </button>
            <button id="tb-save-btn" class="tb-btn tb-btn-primary">
                <i class="icon-save"></i> Save
            </button>
            <button id="tb-publish-btn" class="tb-btn tb-btn-success">
                <i class="icon-check"></i> Publish
            </button>
        </div>
    </div>

    <!-- Builder Main Content -->
    <div class="tb-main">
        <!-- Left Sidebar - Components Panel -->
        <div class="tb-sidebar tb-sidebar-left" id="components-panel">
            <div class="tb-sidebar-header">
                <h3>Components</h3>
                <button class="tb-sidebar-toggle" data-target="components-panel">
                    <i class="icon-chevron-left"></i>
                </button>
            </div>

            <div class="tb-sidebar-content">
                <!-- Search Components -->
                <div class="tb-search-box">
                    <input type="text" id="component-search" placeholder="Search components..." />
                    <i class="icon-search"></i>
                </div>

                <!-- Component Categories -->
                <div class="tb-component-categories">
                    <button class="tb-category-btn active" data-category="all">All</button>
                    <button class="tb-category-btn" data-category="header">Headers</button>
                    <button class="tb-category-btn" data-category="hero">Heroes</button>
                    <button class="tb-category-btn" data-category="video_grid">Video Grids</button>
                    <button class="tb-category-btn" data-category="video_list">Video Lists</button>
                    <button class="tb-category-btn" data-category="sidebar">Sidebars</button>
                    <button class="tb-category-btn" data-category="text">Text</button>
                    <button class="tb-category-btn" data-category="image">Images</button>
                    <button class="tb-category-btn" data-category="custom">Custom</button>
                </div>

                <!-- Components List -->
                <div class="tb-components-list" id="components-list">
                    {* Components will be loaded via JavaScript *}
                    <div class="tb-loading">Loading components...</div>
                </div>
            </div>
        </div>

        <!-- Center Canvas - Preview Area -->
        <div class="tb-canvas-container">
            <div class="tb-canvas-toolbar">
                <div class="tb-zoom-controls">
                    <button class="tb-btn tb-btn-sm" id="zoom-out">
                        <i class="icon-minus"></i>
                    </button>
                    <span class="tb-zoom-level">100%</span>
                    <button class="tb-btn tb-btn-sm" id="zoom-in">
                        <i class="icon-plus"></i>
                    </button>
                    <button class="tb-btn tb-btn-sm" id="zoom-fit">Fit</button>
                </div>

                <div class="tb-canvas-options">
                    <label class="tb-checkbox">
                        <input type="checkbox" id="show-grid" checked />
                        <span>Show Grid</span>
                    </label>
                    <label class="tb-checkbox">
                        <input type="checkbox" id="show-guides" checked />
                        <span>Show Guides</span>
                    </label>
                </div>
            </div>

            <div class="tb-canvas-wrapper" id="canvas-wrapper">
                <div class="tb-canvas" id="builder-canvas" data-device="desktop">
                    <!-- Drop Zone Hint -->
                    <div class="tb-drop-hint" id="drop-hint">
                        <div class="tb-drop-hint-content">
                            <i class="icon-plus-circle"></i>
                            <p>Drag components here to start building</p>
                        </div>
                    </div>

                    <!-- Sections Container -->
                    <div class="tb-sections-container" id="sections-container">
                        {* Sections will be added here *}
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Sidebar - Properties Panel -->
        <div class="tb-sidebar tb-sidebar-right" id="properties-panel">
            <div class="tb-sidebar-header">
                <h3>Properties</h3>
                <button class="tb-sidebar-toggle" data-target="properties-panel">
                    <i class="icon-chevron-right"></i>
                </button>
            </div>

            <div class="tb-sidebar-content" id="properties-content">
                <!-- No Selection State -->
                <div class="tb-no-selection" id="no-selection">
                    <i class="icon-cursor"></i>
                    <p>Select an element to edit its properties</p>
                </div>

                <!-- Page Settings (when nothing selected) -->
                <div class="tb-properties-section" id="page-settings" style="display: none;">
                    <h4>Page Settings</h4>

                    <div class="tb-form-group">
                        <label>Template Type</label>
                        <select id="template-type" class="tb-select">
                            <option value="custom_page">Custom Page</option>
                            <option value="homepage">Homepage</option>
                            <option value="channel">Channel Page</option>
                            <option value="browse">Browse Page</option>
                            <option value="landing">Landing Page</option>
                        </select>
                    </div>

                    <div class="tb-form-group">
                        <label>Max Width (px)</label>
                        <input type="number" id="page-max-width" class="tb-input" value="1200" min="800" max="2000" step="50" />
                    </div>

                    <div class="tb-form-group">
                        <label>Layout Type</label>
                        <select id="page-layout-type" class="tb-select">
                            <option value="flex">Flexible</option>
                            <option value="grid">Grid</option>
                            <option value="boxed">Boxed</option>
                        </select>
                    </div>
                </div>

                <!-- Component Properties (when component selected) -->
                <div class="tb-properties-section" id="component-settings" style="display: none;">
                    <div class="tb-properties-header">
                        <h4 id="selected-component-name">Component Settings</h4>
                        <button class="tb-btn tb-btn-danger tb-btn-sm" id="delete-component">
                            <i class="icon-trash"></i>
                        </button>
                    </div>

                    <div id="component-settings-fields">
                        {* Dynamic fields will be inserted here *}
                    </div>

                    <!-- Advanced Settings -->
                    <div class="tb-collapsible">
                        <button class="tb-collapsible-header">
                            <i class="icon-chevron-down"></i> Advanced
                        </button>
                        <div class="tb-collapsible-content">
                            <div class="tb-form-group">
                                <label>Custom CSS Class</label>
                                <input type="text" id="component-custom-class" class="tb-input" placeholder="custom-class" />
                            </div>

                            <div class="tb-form-group">
                                <label>Custom ID</label>
                                <input type="text" id="component-custom-id" class="tb-input" placeholder="custom-id" />
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Section Properties (when section selected) -->
                <div class="tb-properties-section" id="section-settings" style="display: none;">
                    <div class="tb-properties-header">
                        <h4>Section Settings</h4>
                        <button class="tb-btn tb-btn-danger tb-btn-sm" id="delete-section">
                            <i class="icon-trash"></i>
                        </button>
                    </div>

                    <div class="tb-form-group">
                        <label>Columns</label>
                        <select id="section-columns" class="tb-select">
                            <option value="1">1 Column</option>
                            <option value="2">2 Columns</option>
                            <option value="3">3 Columns</option>
                            <option value="4">4 Columns</option>
                        </select>
                    </div>

                    <div class="tb-form-group">
                        <label>Column Gap (px)</label>
                        <input type="number" id="section-gap" class="tb-input" value="20" min="0" max="100" step="5" />
                    </div>

                    <div class="tb-form-group">
                        <label>Background Color</label>
                        <input type="color" id="section-bg-color" class="tb-input" />
                    </div>

                    <div class="tb-form-group">
                        <label>Padding (px)</label>
                        <div class="tb-spacing-grid">
                            <input type="number" placeholder="Top" id="section-padding-top" class="tb-input tb-input-sm" min="0" />
                            <input type="number" placeholder="Right" id="section-padding-right" class="tb-input tb-input-sm" min="0" />
                            <input type="number" placeholder="Bottom" id="section-padding-bottom" class="tb-input tb-input-sm" min="0" />
                            <input type="number" placeholder="Left" id="section-padding-left" class="tb-input tb-input-sm" min="0" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Preview Modal -->
<div class="tb-modal" id="preview-modal" style="display: none;">
    <div class="tb-modal-overlay"></div>
    <div class="tb-modal-content tb-modal-large">
        <div class="tb-modal-header">
            <h3>Preview</h3>
            <button class="tb-modal-close" data-modal="preview-modal">
                <i class="icon-close"></i>
            </button>
        </div>
        <div class="tb-modal-body">
            <iframe id="preview-iframe" style="width: 100%; height: 600px; border: none;"></iframe>
        </div>
    </div>
</div>

<!-- Save Template Modal -->
<div class="tb-modal" id="save-modal" style="display: none;">
    <div class="tb-modal-overlay"></div>
    <div class="tb-modal-content">
        <div class="tb-modal-header">
            <h3>Save Template</h3>
            <button class="tb-modal-close" data-modal="save-modal">
                <i class="icon-close"></i>
            </button>
        </div>
        <div class="tb-modal-body">
            <div class="tb-form-group">
                <label>Template Name</label>
                <input type="text" id="save-template-name" class="tb-input" value="{$template.template_name|default:''}" />
            </div>
            <div class="tb-form-group">
                <label>Change Note (Optional)</label>
                <textarea id="save-change-note" class="tb-textarea" rows="3" placeholder="What did you change?"></textarea>
            </div>
        </div>
        <div class="tb-modal-footer">
            <button class="tb-btn tb-btn-secondary" data-modal-close="save-modal">Cancel</button>
            <button class="tb-btn tb-btn-primary" id="confirm-save">Save</button>
        </div>
    </div>
</div>

<!-- Hidden input for template data -->
<input type="hidden" id="template-id" value="{$template.template_id|default:0}" />
<input type="hidden" id="template-data" value='{$template_json|default:"{}"}' />

{* Include Builder CSS *}
<link rel="stylesheet" href="{$styles_url}/builder/builder.css" />

{* Include Builder JavaScript *}
<script src="{$javascript_url}/builder/builder-core.js"></script>

<script>
// Initialize Template Builder
document.addEventListener('DOMContentLoaded', function() {
    const templateData = JSON.parse(document.getElementById('template-data').value || '{}');
    const templateId = document.getElementById('template-id').value;

    window.TemplateBuilder = new TemplateBuilderApp({
        templateId: templateId,
        templateData: templateData,
        apiUrl: '{$main_url}/f_modules/m_frontend/templatebuilder_ajax.php',
        themeMode: '{$theme_name}'.indexOf('dark') !== -1 ? 'dark' : 'light'
    });
});
</script>