{% comment %}
Shared model modal. Include once per page; any element carrying
{% templatetag openblock %} model_modal_attr model {% templatetag closeblock %} (infra/templatetags/identity_tags.py)
opens it on click. Plain clicks only: Cmd/Ctrl/middle-click keep the trigger's own href.
Shows the model's identity, a model-card link, a Connections link and the benchmark
leaderboard (admin's leaderboard_url_template) in an iframe.
{% endcomment %}
<style>
  dialog.mm-dialog { width: min(76rem, calc(100vw - 2rem)); height: min(54rem, calc(100dvh - 2rem)); max-width: none; max-height: none; padding: 0; color: inherit; }
  dialog.mm-dialog::backdrop { background: rgb(5 7 12 / .7); backdrop-filter: blur(3px); }
  dialog.mm-dialog[open] { animation: mm-in .16s ease-out; }
  @keyframes mm-in { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
  @media (max-width: 639.98px) {
    dialog.mm-dialog { width: 100vw; height: 100dvh; margin: 0; border-radius: 0; border: 0; }
  }
  .mm-action { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.25rem; padding: 0 .85rem; border-radius: .6rem; font-size: .75rem; font-weight: 500; border: 1px solid rgb(55 65 81); background: rgb(36 40 54); color: rgb(209 213 219); transition: border-color .15s, color .15s, background .15s; white-space: nowrap; }
  @media (max-width: 639.98px) { .mm-action { padding: 0 .4rem; gap: .3rem; font-size: .7rem; min-height: 2.5rem; } }
  .mm-action:hover { border-color: rgb(108 140 255 / .6); color: #fff; }
  .mm-action.mm-primary { background: rgb(108 140 255 / .15); border-color: rgb(108 140 255 / .4); color: #8da4ff; }
  .mm-action.mm-primary:hover { background: rgb(108 140 255 / .25); }
  .mm-action[aria-disabled="true"] { opacity: .45; }
  .mm-skeleton { background: linear-gradient(90deg, rgb(36 40 54) 0%, rgb(48 53 70) 50%, rgb(36 40 54) 100%); background-size: 200% 100%; animation: mm-shimmer 1.2s linear infinite; }
  @keyframes mm-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
</style>
<dialog id="model-modal" class="mm-dialog rounded-2xl border border-gray-700 bg-surface-raised shadow-2xl" aria-labelledby="mm-title" aria-describedby="mm-sub">
  <div class="flex h-full flex-col">
    <header class="shrink-0 border-b border-gray-800 px-4 pt-4 pb-3 sm:px-6 sm:pt-5">
      <div class="flex items-start gap-3">
        <div class="min-w-0 flex-1">
          <div class="mb-1.5 flex flex-wrap items-center gap-1.5 text-[10px] font-medium uppercase tracking-wide">
            <span data-mm="role" class="hidden rounded-full bg-gray-800 px-2 py-0.5 text-gray-300"></span>
            <span data-mm="kind" class="hidden rounded-full border px-2 py-0.5"></span>
            <span data-mm="frozen" class="hidden rounded-full border border-gray-700 px-2 py-0.5 normal-case tracking-normal text-gray-500" title="Pages show the model as this run recorded it, even if it was edited later">as used by this run</span>
          </div>
          <h2 id="mm-title" data-mm="name" class="truncate text-lg font-semibold text-gray-100 sm:text-xl"></h2>
          <p id="mm-sub" class="mt-0.5 flex min-w-0 flex-wrap items-center gap-x-2 text-xs text-gray-500">
            <span data-mm="modelId" class="break-all font-mono text-gray-400"></span>
            <span data-mm="provider-wrap" class="hidden">· <span data-mm="provider"></span></span>
            <span data-mm="identity-wrap" class="hidden">· base model <span data-mm="identityId" class="break-all font-mono text-gray-300"></span></span>
          </p>
        </div>
        <button type="button" data-mm-close aria-label="Close" title="Close (Esc)"
                class="-mr-1 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-gray-400 hover:bg-surface-overlay hover:text-gray-100">
          {% include "partials/icon.html" with name="x" cls="w-4 h-4" %}
        </button>
      </div>
      <nav class="mt-3 grid grid-cols-3 gap-2 sm:flex sm:flex-wrap" aria-label="Model links">
        <a data-mm="card" class="mm-action mm-primary" target="_blank" rel="noopener noreferrer">
          <span aria-hidden="true">📄</span><span class="sm:hidden">Card</span><span data-mm="card-label" class="hidden sm:inline">Model card</span><span aria-hidden="true" class="opacity-70">↗</span>
        </a>
        <a data-mm="connection" class="mm-action">
          <span aria-hidden="true">⬡</span><span class="sm:hidden">Connection</span><span class="hidden sm:inline">Open in Connections</span>
        </a>
        <a data-mm="leaderboard" class="mm-action" target="_blank" rel="noopener noreferrer">
          <span aria-hidden="true">🏆</span><span class="sm:hidden">Board</span><span class="hidden sm:inline">Leaderboard</span><span aria-hidden="true" class="opacity-70">↗</span>
        </a>
      </nav>
    </header>
    <section class="flex min-h-0 flex-1 flex-col px-4 pb-4 pt-3 sm:px-6 sm:pb-5" aria-labelledby="mm-bench-title">
      <div class="mb-2 flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1">
        <h3 id="mm-bench-title" class="text-sm font-semibold text-gray-200">Benchmark</h3>
        <p data-mm="bench-note" class="text-[11px] text-gray-500"></p>
      </div>
      <div data-mm="frame-wrap" class="relative min-h-[16rem] flex-1 overflow-hidden rounded-xl border border-gray-800 bg-surface">
        <div data-mm="frame-loading" class="absolute inset-0 flex flex-col gap-2 bg-surface p-4" aria-hidden="true">
          <div class="mm-skeleton h-6 w-1/3 rounded"></div>
          <div class="mm-skeleton h-4 w-2/3 rounded"></div>
          <div class="mm-skeleton mt-2 h-full w-full rounded-lg"></div>
        </div>
        <iframe data-mm="frame" title="Benchmark leaderboard" class="absolute inset-0 h-full w-full" referrerpolicy="no-referrer"></iframe>
      </div>
      <div data-mm="empty" class="hidden flex-1 items-center justify-center rounded-xl border border-dashed border-gray-700 p-6 text-center">
        <div class="max-w-md">
          <p class="text-3xl" aria-hidden="true">🏆</p>
          <p data-mm="empty-title" class="mt-2 text-sm font-medium text-gray-200"></p>
          <p data-mm="empty-body" class="mt-1 text-xs text-gray-500"></p>
        </div>
      </div>
    </section>
  </div>
</dialog>
<script>
(function () {
  // One global click listener; the dialog is looked up at click time, so a page
  // that re-renders this partial never ends up with a stale or duplicate modal.
  if (window.__studioModelModal) return;
  window.__studioModelModal = true;
  const KIND_STYLE = {
    hf: 'border-amber-500/40 text-amber-300', vendor: 'border-sky-500/40 text-sky-300', system: 'border-emerald-500/40 text-emerald-300',
  };
  const safeUrl = (u) => (typeof u === 'string' && /^(https?:\/\/|\/(?!\/))/i.test(u)) ? u : '';
  const show = (el, on) => el.classList.toggle('hidden', !on);
  function setLink(el, url, disabledTitle) {
    const ok = safeUrl(url);
    if (ok) { el.href = ok; el.removeAttribute('aria-disabled'); el.removeAttribute('title'); el.removeAttribute('tabindex'); }
    else { el.removeAttribute('href'); el.setAttribute('aria-disabled', 'true'); el.title = disabledTitle; el.tabIndex = -1; }
  }
  function setup(dialog) {
    if (dialog.dataset.ready) return;
    dialog.dataset.ready = '1';
    const frame = dialog.querySelector('[data-mm="frame"]');
    const loading = dialog.querySelector('[data-mm="frame-loading"]');
    frame.addEventListener('load', () => { if (frame.getAttribute('src')) show(loading, false); });
    dialog.addEventListener('close', () => frame.removeAttribute('src'));
    dialog.addEventListener('click', (e) => {
      // Backdrop, the close button, and the Connections link (which may only
      // move to an anchor on this same page) all close the modal.
      if (e.target === dialog || e.target.closest('[data-mm-close], [data-mm="connection"][href]')) dialog.close();
    });
  }
  function open(dialog, m) {
    setup(dialog);
    const $ = (k) => dialog.querySelector('[data-mm="' + k + '"]');
    $('name').textContent = m.name || m.modelId || 'Model';
    $('modelId').textContent = m.modelId || '';
    $('provider').textContent = m.provider || '';
    show($('provider-wrap'), !!m.provider);
    $('identityId').textContent = m.identityId || '';
    show($('identity-wrap'), !!(m.identityId && m.identityId !== m.modelId));
    const role = $('role'); role.textContent = m.role || ''; show(role, !!m.role);
    const kind = $('kind');
    kind.className = 'rounded-full border px-2 py-0.5 ' + (KIND_STYLE[m.kind] || 'border-gray-700 text-gray-400');
    kind.textContent = m.kindLabel || 'No model card';
    show($('frozen'), !!m.frozen);

    setLink($('card'), m.cardUrl, 'No model card link. Set one in Connections.');
    $('card-label').textContent = m.kind === 'hf' ? 'Hugging Face card' : 'Model card';
    const conn = $('connection');
    setLink(conn, m.connectionUrl, 'Connection not available');
    show(conn, !!m.connectionUrl);
    dialog.querySelector('nav[aria-label="Model links"]').classList.toggle('grid-cols-3', !!m.connectionUrl);
    dialog.querySelector('nav[aria-label="Model links"]').classList.toggle('grid-cols-2', !m.connectionUrl);
    setLink($('leaderboard'), m.leaderboardUrl, 'No leaderboard link for this model');

    const frame = $('frame'), embed = safeUrl(m.leaderboardEmbedUrl);
    show($('frame-wrap'), !!embed);
    $('empty').classList.toggle('hidden', !!embed);
    $('empty').classList.toggle('flex', !embed);
    if (embed) {
      $('bench-note').textContent = 'Highlighting \u201c' + (m.benchmarkKey || m.modelId) + '\u201d. Not listed? Clear the filter to see the full board.';
      show($('frame-loading'), true);
      frame.src = embed;
    } else {
      $('bench-note').textContent = '';
      frame.removeAttribute('src');
      const [title, body] = !m.kind
        ? ['No model card for this model', 'Add its Hugging Face or vendor name under Connections \u2192 edit model \u2192 Model card to see its benchmark results here.']
        : !m.benchmarkKey
          ? ['No benchmark name', 'Set a leaderboard name for this model under Connections \u2192 edit model.']
          : ['Benchmark link is turned off', 'An administrator can set the leaderboard URL under Admin settings.'];
      $('empty-title').textContent = title;
      $('empty-body').textContent = body;
    }
    dialog.showModal();
    dialog.querySelector('[data-mm-close]').focus();
  }
  document.addEventListener('click', (e) => {
    const trigger = e.target.closest('[data-model-modal]');
    if (!trigger || e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
    const inner = e.target.closest('a[href]');
    if (inner && inner !== trigger) return;   // links inside a trigger keep working
    const dialog = document.getElementById('model-modal');
    if (!dialog) return;
    let payload;
    try { payload = JSON.parse(trigger.dataset.modelModal); } catch (err) { return; }
    e.preventDefault();
    open(dialog, payload);
  });
})();
</script>