{# Code Highlighting Feature - Include this partial where code highlighting is needed #}
{# Usage: {% include "../../includes/features/code-highlighting.html" %} #}

{% if enable_code_highlighting %}
  {# Highlight.js CSS - Multiple theme options #}
  {% set highlight_theme = highlight_theme|default("github-dark") %}
  
  <link rel="preload" 
        href="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/{{ highlight_theme }}.min.css" 
        as="style" 
        onload="this.onload=null;this.rel='stylesheet'">
  <noscript>
    <link rel="stylesheet" 
          href="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/{{ highlight_theme }}.min.css">
  </noscript>
  
  {# Highlight.js Core + Common languages - Loaded only when needed #}
  <script>
    // Lazy load highlight.js when code blocks are present
    (function() {
      const codeBlocks = document.querySelectorAll('pre code, .highlight-code');
      
      if (codeBlocks.length > 0) {
        // Create script element for highlight.js
        const highlightScript = document.createElement('script');
        highlightScript.src = 'https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js';
        highlightScript.async = true;
        
        highlightScript.onload = function() {
          // Auto-detect and load additional languages as needed
          const languages = new Set();
          
          codeBlocks.forEach(block => {
            const lang = block.className.match(/language-(\w+)/);
            if (lang && lang[1]) {
              languages.add(lang[1]);
            }
          });
          
          // Load additional language support
          const languagePromises = [];
          languages.forEach(lang => {
            // Check if language needs to be loaded
            if (!hljs.getLanguage(lang)) {
              const langScript = document.createElement('script');
              langScript.src = `https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/languages/${lang}.min.js`;
              document.head.appendChild(langScript);
              
              languagePromises.push(new Promise(resolve => {
                langScript.onload = resolve;
              }));
            }
          });
          
          // Initialize highlighting after all languages are loaded
          Promise.all(languagePromises).then(() => {
            hljs.highlightAll();
            
            // Add copy button to code blocks
            document.querySelectorAll('pre code').forEach(block => {
              const button = document.createElement('button');
              button.className = 'copy-code-button';
              button.textContent = 'Copy';
              button.type = 'button';
              
              button.addEventListener('click', async () => {
                const code = block.textContent;
                try {
                  await navigator.clipboard.writeText(code);
                  button.textContent = 'Copied!';
                  setTimeout(() => {
                    button.textContent = 'Copy';
                  }, 2000);
                } catch (err) {
                  console.error('Failed to copy:', err);
                }
              });
              
              const pre = block.parentElement;
              pre.style.position = 'relative';
              pre.appendChild(button);
            });
          });
        };
        
        document.head.appendChild(highlightScript);
      }
    })();
  </script>
  
  {# Styles for copy button #}
  <style>
    .copy-code-button {
      position: absolute;
      top: 8px;
      right: 8px;
      padding: 4px 8px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 4px;
      color: #fff;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s;
      backdrop-filter: blur(4px);
    }
    
    .copy-code-button:hover {
      background: rgba(255, 255, 255, 0.2);
      border-color: rgba(255, 255, 255, 0.3);
    }
    
    pre {
      position: relative;
    }
    
    pre code {
      border-radius: 8px;
      padding: 1rem !important;
    }
  </style>
{% endif %}