{% macro debugging_tab() %}
<div class="debugging-tab">
    <div class="card shadow-sm mb-4">
        <div class="card-body">
            <h5 class="card-title mb-3">File system</h5>
            <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 class="card shadow-sm mb-4">
        <div class="card-body">
            <h5 class="card-title mb-3">Database Verification</h5>
            <div class="d-flex align-items-center gap-3 mb-3">
                <button type="button" id="verifyDbBtn" 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-database"></i> Verify Database State
                </button>
                <button type="button" id="cleanupOrphanedBtn" class="btn btn-outline-warning d-flex align-items-center gap-2" style="border-color:var(--warning-color); color:var(--warning-color);" onmouseover="this.style.backgroundColor='var(--warning-color)'; this.style.color='white'" onmouseout="this.style.backgroundColor='transparent'; this.style.color='var(--warning-color)'">
                    <i class="fas fa-broom"></i> Cleanup Orphaned Records
                </button>
                <div id="verifyStatus" class="text-muted small"></div>
            </div>

            <div id="verificationResults" style="display: none;">
                <div class="alert alert-info mb-3">
                    <div class="d-flex align-items-center gap-2">
                        <i class="fas fa-info-circle"></i>
                        <div>
                            <strong>Summary:</strong>
                            <span id="verificationSummary"></span>
                        </div>
                    </div>
                </div>

                <div class="accordion" id="verificationAccordion">
                    <!-- Files in DB but not in FS -->
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#dbNotFsCollapse">
                                <i class="fas fa-exclamation-triangle text-warning me-2"></i>
                                Files in Database but not in Filesystem
                                <span id="dbNotFsCount" class="badge bg-warning ms-2">0</span>
                            </button>
                        </h2>
                        <div id="dbNotFsCollapse" class="accordion-collapse collapse" data-bs-parent="#verificationAccordion">
                            <div class="accordion-body">
                                <div id="dbNotFsList" class="list-group"></div>
                            </div>
                        </div>
                    </div>

                    <!-- Files in FS but not in DB -->
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#fsNotDbCollapse">
                                <i class="fas fa-exclamation-triangle text-warning me-2"></i>
                                Files in Filesystem but not in Database
                                <span id="fsNotDbCount" class="badge bg-warning ms-2">0</span>
                            </button>
                        </h2>
                        <div id="fsNotDbCollapse" class="accordion-collapse collapse" data-bs-parent="#verificationAccordion">
                            <div class="accordion-body">
                                <div id="fsNotDbList" class="list-group"></div>
                            </div>
                        </div>
                    </div>

                    <!-- Size Mismatches -->
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sizeMismatchCollapse">
                                <i class="fas fa-exclamation-triangle text-warning me-2"></i>
                                Size Mismatches
                                <span id="sizeMismatchCount" class="badge bg-warning ms-2">0</span>
                            </button>
                        </h2>
                        <div id="sizeMismatchCollapse" class="accordion-collapse collapse" data-bs-parent="#verificationAccordion">
                            <div class="accordion-body">
                                <div id="sizeMismatchList" class="list-group"></div>
                            </div>
                        </div>
                    </div>

                    <!-- Modified Time Mismatches -->
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#timeMismatchCollapse">
                                <i class="fas fa-exclamation-triangle text-warning me-2"></i>
                                Modified Time Mismatches
                                <span id="timeMismatchCount" class="badge bg-warning ms-2">0</span>
                            </button>
                        </h2>
                        <div id="timeMismatchCollapse" class="accordion-collapse collapse" data-bs-parent="#verificationAccordion">
                            <div class="accordion-body">
                                <div id="timeMismatchList" class="list-group"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{ url_for('static', filename='js/debugging.js') }}"></script>
{% endmacro %}