{% extends "base.html" %}
{% block title %}Models — {{ agent_name }}{% endblock %}
{% block content %}
<div class="page" id="models-container">
  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:24px">
    <h1>Models</h1>
    <div id="models-count" style="color:var(--text-dim);font-size:13px"></div>
  </div>

  <!-- Access tier warning -->
  <div id="models-access-note" style="display:none;margin-bottom:20px;padding:13px 16px;background:rgba(224,166,50,0.08);border:1px solid rgba(224,166,50,0.35);border-left:4px solid var(--yellow);border-radius:var(--radius);font-size:13px;color:var(--text);line-height:1.6"></div>

  <!-- Search + filter bar -->
  <div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:20px">
    <input id="models-search" type="search" class="form-input" placeholder="Search models…"
           style="max-width:320px" oninput="filterModels()">
    <div id="models-filters" style="display:flex;gap:8px;flex-wrap:wrap"></div>
  </div>

  <!-- Table -->
  <div class="table-wrap">
    <table id="models-table">
      <thead>
        <tr>
          <th>Model</th>
          <th>Context</th>
          <th id="th-input" style="cursor:pointer;user-select:none" onclick="sortModels('input')">Input / 1M</th>
          <th id="th-output" style="cursor:pointer;user-select:none" onclick="sortModels('output')">Output / 1M</th>
          <th>Capabilities</th>
        </tr>
      </thead>
      <tbody>
        <tr><td colspan="5" style="text-align:center;color:var(--text-dim)">Loading…</td></tr>
      </tbody>
    </table>
  </div>
</div>

<!-- Model detail modal -->
<div class="modal-overlay hidden" id="model-modal" onclick="if(event.target===this)closeModelModal()">
  <div class="modal" style="max-width:640px;width:90%">
    <div id="model-modal-content"></div>
    <div class="modal-buttons" style="margin-top:20px">
      <button class="btn btn-primary" onclick="closeModelModal()">Close</button>
    </div>
  </div>
</div>
{% endblock %}