{# Copyable code panel.

   Replaces the open-coded
       <div class="ui-pane mt-6">
         <div class="flex items-center justify-between">
           <p class="text-sm uppercase tracking-wider ...">Apply</p>
           <button ... onclick="navigator.clipboard.writeText(
             document.getElementById('apply-sql').textContent)">Copy</button>
         </div>
         <pre id="apply-sql" class="mt-3 text-sm font-mono ...">{{ sql }}</pre>
       </div>
   pattern (used 5+ times for Apply SQL / Rollback SQL / job-lookup
   SQL / source SQL / per-column ALTER).

   Usage:

       {% from "components/_copy_pre.html" import copy_pre %}
       {{ copy_pre("apply-sql", "Apply", recommendation.apply_sql) }}
       {{ copy_pre("rollback-sql", "Rollback", recommendation.rollback_sql) }}

   Parameters:
     - id       (str) unique DOM id - the Copy button reads
                      ``document.getElementById(id).textContent``
     - label    (str) panel header text (uppercase, tracked)
     - content  (str) text to render inside the ``<pre>``
     - wrapper  (str) outer wrapper class. Defaults to "ui-pane mt-6";
                      pass "" to disable for inline-on-page placement.
#}
{%- macro copy_pre(id, label, content, wrapper="ui-pane mt-6") -%}
  <div{% if wrapper %} class="{{ wrapper }}"{% endif %}>
    <div class="flex items-center justify-between">
      <p class="text-sm uppercase tracking-wider text-slate-500 dark:text-slate-400">{{ label }}</p>
      <button type="button"
              class="text-sm text-brand-600 dark:text-brand-300 hover:underline"
              onclick="navigator.clipboard.writeText(document.getElementById('{{ id }}').textContent)">
        Copy
      </button>
    </div>
    <pre id="{{ id }}" class="mt-3 text-sm font-mono text-slate-800 dark:text-slate-200 bg-slate-50 dark:bg-slate-900 p-4 overflow-x-auto border border-slate-200 dark:border-slate-800 whitespace-pre">{{ content }}</pre>
  </div>
{%- endmacro %}