---
// Code Block Copy Button Component
// Adds copy functionality to all code blocks
---

<script is:inline>
  (function() {
    const t = window.__termiTranslate;

    function initCodeCopy() {
      const codeBlocks = document.querySelectorAll('pre code');
      
      codeBlocks.forEach(code => {
        const pre = code.parentElement;
        if (!pre || pre.classList.contains('code-copy-enabled')) return;
        
        pre.classList.add('code-copy-enabled', 'relative', 'group');
        
        // Create copy button
        const button = document.createElement('button');
        button.className = 'absolute top-2 right-2 px-2 py-1 text-xs rounded bg-[var(--terminal-bg)] text-[var(--text-secondary)] opacity-0 group-hover:opacity-100 transition-opacity border border-[var(--border-color)] hover:border-[var(--primary)] hover:text-[var(--primary)]';
        button.innerHTML = `<i class="fas fa-copy mr-1"></i>${t('codeCopy.copy')}`;
        
        button.addEventListener('click', async () => {
          try {
            await navigator.clipboard.writeText(code.textContent || '');
            button.innerHTML = `<i class="fas fa-check mr-1"></i>${t('codeCopy.copied')}`;
            button.classList.add('text-[var(--success)]');
            
            setTimeout(() => {
              button.innerHTML = `<i class="fas fa-copy mr-1"></i>${t('codeCopy.copy')}`;
              button.classList.remove('text-[var(--success)]');
            }, 2000);
          } catch (err) {
            button.innerHTML = `<i class="fas fa-times mr-1"></i>${t('codeCopy.failed')}`;
            button.classList.add('text-[var(--error)]');
            
            setTimeout(() => {
              button.innerHTML = `<i class="fas fa-copy mr-1"></i>${t('codeCopy.copy')}`;
              button.classList.remove('text-[var(--error)]');
            }, 2000);
          }
        });
        
        pre.appendChild(button);
      });
    }

    // Initialize on DOM ready
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', initCodeCopy);
    } else {
      initCodeCopy();
    }
    
    // Re-initialize after dynamic content loads
    const observer = new MutationObserver(() => {
      initCodeCopy();
    });
    
    observer.observe(document.body, { childList: true, subtree: true });
  })();
</script>
