{% 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; }
</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;">Foundation Model Catalog</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>

{# 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 %}