{% extends "base.html" %}
{% block title %}AIMC — Foundation Model Catalog{% endblock %}
{% block extra_css %}
<style>
.model-card { background:#1e293b; border:1px solid #334155; border-radius:10px; padding:18px; transition:border-color .15s; }
.model-card:hover { border-color:#6366f1; }
.model-card h3 { margin:0 0 2px; font-size:.95rem; color:#e2e8f0; }
.model-card .provider { font-size:.72rem; color:#64748b; margin-bottom:10px; }
.model-stat { display:flex; justify-content:space-between; font-size:.75rem; padding:3px 0; border-bottom:1px solid #1e293b; }
.model-stat .k { color:#64748b; } .model-stat .v { color:#e2e8f0; font-weight:500; }
.il-dot { width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:2px; }
.filter-btn { padding:5px 14px; border-radius:6px; font-size:.75rem; cursor:pointer; border:1px solid #334155; background:#0f172a; color:#94a3b8; }
.filter-btn.active { background:#6366f1; border-color:#6366f1; color:#fff; }
.air-gap-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:10px; font-size:.68rem; font-weight:600; }
.ag-yes { background:#d1fae5; color:#065f46; } .ag-no { background:#fee2e2; color:#7f1d1d; }
.source-badge { display:inline-flex; align-items:center; gap:5px; padding:2px 10px; border-radius:10px; font-size:.68rem; font-weight:600; }
.src-catalog { background:#1e293b; color:#a5b4fc; border:1px solid #4338ca; }
.src-scanned { background:#052e16; color:#4ade80; border:1px solid #166534; }
.scanned-panel { background:#0f172a; border:1px solid #334155; border-left:3px solid #22c55e; border-radius:10px; padding:16px 18px; margin-bottom:22px; }
.scanned-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; }
</style>
{% endblock %}
{% block content %}
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px;">
  <div>
    <h1 style="margin:0 0 4px;font-size:1.4rem;color:#e0e7ff;display:flex;align-items:center;gap:10px;">
      Foundation Model Catalog
      <span class="source-badge src-catalog">catalog</span>
    </h1>
    <p style="margin:0;color:#64748b;font-size:.85rem;">{{ models|length }} models — IL suitability, VRAM, cost, and air-gap compatibility.</p>
  </div>
  <a href="/ai-ml/" style="color:#6366f1;font-size:.85rem;text-decoration:none;">&larr; Back to AIMC</a>
</div>

{# Real scanned inventory (aimc_models) — shown only when the scanner reported
   real rows. Empty / no-data inventory renders nothing here. #}
{% if scanned and scanned.status == 'success' %}
{% set inv = scanned.inventory %}
<div class="scanned-panel">
  <div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;">
    <span class="source-badge src-scanned">● scanned</span>
    <h2 style="margin:0;font-size:1rem;color:#e2e8f0;">Scanned Model Inventory</h2>
    <span style="color:#475569;font-size:.72rem;">project: {{ scanned_project_id }}</span>
  </div>
  <div class="scanned-grid">
    <div class="model-stat" style="border:none;"><span class="k">Model Count</span><span class="v">{{ inv.model_count }}</span></div>
    <div class="model-stat" style="border:none;"><span class="k">Governance Score</span><span class="v">{{ scanned.governance_score }}/100</span></div>
    <div class="model-stat" style="border:none;"><span class="k">Frameworks</span><span class="v">{{ scanned.frameworks | join(', ') if scanned.frameworks else '—' }}</span></div>
    <div class="model-stat" style="border:none;"><span class="k">Deploy Targets</span><span class="v">{{ scanned.deployment_targets | join(', ') if scanned.deployment_targets else '—' }}</span></div>
  </div>
  {% if scanned.missing_controls %}
  <div style="margin-top:12px;font-size:.72rem;color:#94a3b8;">
    Missing MLOps controls:
    {% for c in scanned.missing_controls %}<span style="background:#1e293b;border:1px solid #334155;padding:1px 7px;border-radius:4px;margin-right:5px;display:inline-block;margin-top:4px;">{{ c.label }}</span>{% endfor %}
  </div>
  {% endif %}
</div>
{% endif %}

{# Filters #}
<div style="display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;">
  <button class="filter-btn active" onclick="filterModels('all', this)">All</button>
  <button class="filter-btn" onclick="filterModels('llm', this)">LLM</button>
  <button class="filter-btn" onclick="filterModels('embedding', this)">Embedding</button>
  <button class="filter-btn" onclick="filterModels('code', this)">Code</button>
  <button class="filter-btn" onclick="filterModels('airgap', this)">Air-Gap Ready</button>
  <button class="filter-btn" onclick="filterModels('il6', this)">IL6 Capable</button>
  <button class="filter-btn" onclick="filterModels('free', this)">Free (Local)</button>
</div>

<div id="models-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;">
{% for m in models %}
<div class="model-card"
     data-type="{{ m.type }}" data-airgap="{{ 'true' if m.air_gap_ready else 'false' }}"
     data-il="{{ m.il_suitability | join(',') }}"
     data-cost="{{ m.cost_per_1k_tokens }}">
  <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:8px;">
    <h3>{{ m.name }}</h3>
    <span class="air-gap-badge {{ 'ag-yes' if m.air_gap_ready else 'ag-no' }}">
      {{ '🔒 Air-Gap' if m.air_gap_ready else '☁ Cloud' }}
    </span>
  </div>
  <div class="provider">{{ m.provider }} &mdash; {{ m.family }}</div>

  <div class="model-stat"><span class="k">Context Window</span><span class="v">{{ "{:,}".format(m.context_window) }} tokens</span></div>
  <div class="model-stat"><span class="k">VRAM (fp16)</span><span class="v">{{ m.vram_gb if m.vram_gb > 0 else 'Managed' }} {% if m.vram_gb > 0 %}GB{% endif %}</span></div>
  <div class="model-stat"><span class="k">Cost / 1K tokens</span><span class="v">${{ "%.5f"|format(m.cost_per_1k_tokens) if m.cost_per_1k_tokens > 0 else 'Free (local)' }}</span></div>
  <div class="model-stat" style="border:none;">
    <span class="k">IL Suitability</span>
    <span class="v">
      {% for il in m.il_suitability %}
      <span style="background:{% if il==2 %}#d1fae5;color:#065f46{% elif il==4 %}#fef3c7;color:#92400e{% elif il==5 %}#fed7aa;color:#7c2d12{% else %}#fee2e2;color:#7f1d1d{% endif %};padding:1px 6px;border-radius:4px;font-size:.68rem;margin-right:2px;">IL{{ il }}</span>
      {% endfor %}
    </span>
  </div>

  {% if m.notes %}
  <div style="margin-top:8px;font-size:.72rem;color:#64748b;font-style:italic;">{{ m.notes }}</div>
  {% endif %}

  {% if m.quantization_options %}
  <div style="margin-top:8px;font-size:.7rem;color:#475569;">Quant: {{ m.quantization_options | join(' · ') }}</div>
  {% endif %}
</div>
{% endfor %}
</div>

<script>
function filterModels(filter, btn) {
  document.querySelectorAll('.filter-btn').forEach(function(b) { b.classList.remove('active'); });
  btn.classList.add('active');
  document.querySelectorAll('.model-card').forEach(function(el) {
    var show = true;
    if (filter === 'llm')     show = el.dataset.type === 'llm';
    if (filter === 'embedding') show = el.dataset.type === 'embedding';
    if (filter === 'code')    show = el.dataset.type === 'code';
    if (filter === 'airgap')  show = el.dataset.airgap === 'true';
    if (filter === 'il6')     show = el.dataset.il.split(',').includes('6');
    if (filter === 'free')    show = parseFloat(el.dataset.cost) === 0;
    el.style.display = show ? '' : 'none';
  });
}
</script>
{% endblock %}