{% macro debugging_tab() %}
<div class="debugging-tab">
    <div class="card shadow-sm mb-4">
        <div class="card-body">
            <div class="d-flex align-items-center gap-3 mb-3">
                <button type="button" id="syncFilesBtn" class="btn btn-primary d-flex align-items-center gap-2" style="background-color:var(--primary-color); border:1px solid var(--primary-color);" onmouseover="this.style.backgroundColor='var(--primary-light)'" onmouseout="this.style.backgroundColor='var(--primary-color)'">
                    <i class="fas fa-sync-alt"></i> Sync File System
                </button>
                <div id="syncStatus" class="text-muted small"></div>
            </div>
            
            <div class="alert alert-warning">
                <i class="fas fa-exclamation-triangle me-2"></i>
                <strong>Warning:</strong> The sync operation will scan the entire file system and update the database records. This may take some time depending on the number of files.
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('syncFilesBtn').addEventListener('click', async function() {
    const btn = this;
    const status = document.getElementById('syncStatus');
    
    // Disable button and show loading state
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Syncing...';
    status.textContent = 'Syncing file system...';
    
    try {
        const response = await fetch('/api/admin/sync-files', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        });
        
        const data = await response.json();
        
        if (response.ok) {
            status.textContent = 'Sync completed successfully!';
            status.className = 'text-success small';
        } else {
            throw new Error(data.error || 'Sync failed');
        }
    } catch (error) {
        status.textContent = error.message;
        status.className = 'text-danger small';
    } finally {
        // Reset button state
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-sync-alt"></i> Sync File System';
        
        // Clear status after 5 seconds
        setTimeout(() => {
            status.textContent = '';
            status.className = 'text-muted small';
        }, 5000);
    }
});
</script>
{% endmacro %}