<div style="font-family: Arial, sans-serif; padding: 20px;">
    <h3>Image Comparison Failed: Different</h3>
    <p><strong>Pixels different:</strong> 143</p>
    
    <div style="margin: 10px 0;">
        <button onclick="toggleRecordedReference()" id="btn-toggle" style="margin-right: 10px; padding: 8px 16px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer;">Show Recorded</button>
        <button onclick="showDiff()" id="btn-diff" style="padding: 8px 16px; background: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer;">Diff</button>
    </div>
    
    <div style="border: 2px solid #ddd; border-radius: 8px; padding: 10px; background: #f8f9fa; max-width: 100%; overflow: auto;">
        <img id="img-recorded" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAEACAYAAADFkM5nAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYA" style="max-width: 100%; height: auto; display: none;" />
        <img id="img-reference" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAEACAYAAADFkM5nAABoHklEQVR4AezBCYDVc+IA8M/vzZtpjuZqmg6VZJIOKdUWq0RWSM60" style="max-width: 100%; height: auto; display: none;" />
        <img id="img-diff" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAEACAYAAADFkM5nAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYA" style="max-width: 100%; height: auto; display: block;" />
    </div>
    
    <script>
        let showingRecorded = true;
        let showingDiff = true;
        
        function updateToggleButton() {
            if (showingDiff) {
                document.getElementById('btn-toggle').textContent = showingRecorded ? 'Show Recorded' : 'Show Reference';
            } else {
                document.getElementById('btn-toggle').textContent = showingRecorded ? 'Showing Recorded' : 'Showing Reference';
            }
        }
        
        function toggleRecordedReference() {
            if (showingDiff) {
                // If showing diff, switch back to current recorded/reference view without toggling
                document.getElementById('img-diff').style.display = 'none';
                document.getElementById('btn-diff').style.background = '#6c757d';
                showingDiff = false;
                
                // Show current state (don't toggle)
                if (showingRecorded) {
                    document.getElementById('img-recorded').style.display = 'block';
                    document.getElementById('img-reference').style.display = 'none';
                } else {
                    document.getElementById('img-recorded').style.display = 'none';
                    document.getElementById('img-reference').style.display = 'block';
                }
            } else {
                // Normal toggle between recorded and reference
                if (showingRecorded) {
                    // Switch to reference
                    document.getElementById('img-recorded').style.display = 'none';
                    document.getElementById('img-reference').style.display = 'block';
                    showingRecorded = false;
                } else {
                    // Switch to recorded
                    document.getElementById('img-reference').style.display = 'none';
                    document.getElementById('img-recorded').style.display = 'block';
                    showingRecorded = true;
                }
            }
            
            updateToggleButton();
            document.getElementById('btn-toggle').style.background = '#007acc';
        }
        
        function showDiff() {
            // Hide recorded/reference images
            document.getElementById('img-recorded').style.display = 'none';
            document.getElementById('img-reference').style.display = 'none';
            document.getElementById('img-diff').style.display = 'block';
            
            // Update button styles
            document.getElementById('btn-toggle').style.background = '#6c757d';
            document.getElementById('btn-diff').style.background = '#dc3545';
            showingDiff = true;
        }
        
        // Initialize button text
        updateToggleButton();
    </script>
</div>
