{# Collapsible SQL panel with a rich Copy button (Copied! feedback +
   icon). Used by /opportunities/{id} and /failures/{id} for the
   "BigQuery query" pane. Heavier than ``_copy_pre`` because:

     - it's wrapped in a <details> so the panel is collapsible;
     - the copy button lives on top of the <pre> as an absolute,
       per-panel button with state feedback;
     - it scrolls inside a max-height container.

   Parameters:
     - id           (str) DOM id of the <pre> the Copy button reads
     - title        (str) summary heading text
     - sql          (str) SQL body
     - caption      (str, optional) line of copy under the summary
     - open         (bool) default-open the <details>; defaults to True
#}
{%- macro sql_panel(id, title, sql, caption=None, open=True) -%}
  <details class="ui-surface p-6 group min-w-0"{% if open %} open{% endif %}>
    <summary class="flex items-center justify-between cursor-pointer select-none list-none [&::-webkit-details-marker]:hidden">
      <h2 class="ui-section-title">{{ title }}</h2>
      <svg class="w-4 h-4 text-slate-400 dark:text-slate-500 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
      </svg>
    </summary>
    {%- if caption %}
    <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">{{ caption }}</p>
    {%- endif %}
    <div class="relative mt-3 border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 overflow-auto" style="max-height: 22rem;">
      <button type="button"
              onclick="window.auditCopyById(this, '{{ id }}')"
              class="absolute top-2 right-2 z-10 inline-flex items-center gap-1 border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-200 px-2 py-1 text-sm hover:border-brand-500 hover:text-brand-500"
              title="Copy SQL"
              aria-label="Copy SQL">
        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M8 7.5A2.5 2.5 0 0110.5 5h6A2.5 2.5 0 0119 7.5v9A2.5 2.5 0 0116.5 19h-6A2.5 2.5 0 018 16.5v-9z" />
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 15.5H5.5A2.5 2.5 0 013 13V4.5A2.5 2.5 0 015.5 2h6A2.5 2.5 0 0114 4.5V5" />
        </svg>
        <span class="copy-label">Copy</span>
      </button>
      <pre id="{{ id }}" class="text-sm font-mono leading-relaxed p-3 m-0 whitespace-pre"><code class="text-slate-800 dark:text-slate-200">{{ sql }}</code></pre>
    </div>
  </details>
  <script>
    (function () {
      if (window.auditCopyById) return;
      window.auditCopyById = function (btn, id) {
        var pre = document.getElementById(id);
        if (!pre) return;
        var text = pre.textContent || '';
        var label = btn.querySelector('.copy-label');
        var done = function () {
          if (!label) return;
          var original = label.textContent;
          label.textContent = 'Copied!';
          setTimeout(function () { label.textContent = original; }, 1500);
        };
        if (navigator.clipboard && navigator.clipboard.writeText) {
          navigator.clipboard.writeText(text).then(done).catch(function () {});
        }
      };
    })();
  </script>
{%- endmacro %}