{% extends "settings_base.html" %}
{% block settings_content %}
<section class="settings-grid v05-grid">
  <article class="card registry-card catalog-sync-card" data-pricing-catalog data-preview-url="/admin/api/pricing/catalog/preview" data-apply-url="/admin/api/pricing/catalog/apply">
    <div class="card-header"><div><h2>Catalog Sync</h2><p>Preview router catalog rows before updating local pricing.</p></div></div>
    <form class="catalog-sync-form" data-pricing-catalog-form>
      <label class="form-field"><span>Source</span><select name="source"><option value="huggingface-router">Hugging Face Router</option><option value="openrouter">OpenRouter</option></select></label>
      <label class="form-field"><span>Search</span><input name="search" placeholder="qwen, deepseek, gpt-oss"></label>
      <label class="form-field"><span>Model limit</span><input name="limit" type="number" min="1" max="100" value="25"></label>
      <label class="check switch-line"><input type="checkbox" name="include_base_rows" value="yes" checked><span>Base rows</span></label>
      <label class="check switch-line"><input type="checkbox" name="include_provider_rows" value="yes" checked><span>Provider rows</span></label>
      <label class="check switch-line"><input type="checkbox" name="reprice_missing" value="yes" checked><span>Reprice missing</span></label>
      <div class="button-row"><button class="button ghost" type="submit">Preview</button><button class="button primary" type="button" data-pricing-catalog-apply disabled>Apply selected</button></div>
    </form>
    <p class="muted" data-pricing-catalog-message hidden></p>
    <div class="table-shell"><table class="data-table catalog-preview-table"><thead><tr><th scope="col">Apply</th><th scope="col">Status</th><th scope="col">Model</th><th scope="col">Endpoint</th><th scope="col">Input</th><th scope="col">Cached</th><th scope="col">Output</th><th scope="col">Context</th><th scope="col">Tools</th><th scope="col">Checked</th></tr></thead><tbody data-pricing-catalog-rows><tr><td colspan="10" class="empty">Preview catalog rows before applying.</td></tr></tbody></table></div>
  </article>

  <article class="card registry-card">
    <div class="card-header"><div><h2>Model Pricing</h2><p>Scalar rates plus optional token-count tiers.</p></div><a class="button primary" href="#price-editor">Add price</a></div>
    <form class="filter-row" data-settings-filters>
      <label class="search-bar"><span>Search pricing</span><input name="search" placeholder="Search models, providers, aliases…"></label>
      <label><span>Provider</span><select name="provider" data-provider-filter-options><option value="">All providers</option></select></label>
      <label><span>Status</span><select name="status"><option value="all">All status</option><option value="active">Active</option><option value="inactive">Inactive</option></select></label>
      <button class="button ghost" type="submit">Apply filters</button>
    </form>
    <div class="table-shell">
      <table class="data-table model-routes-table">
        <thead><tr><th scope="col">Provider</th><th scope="col">Model</th><th scope="col">Display name</th><th scope="col">Input / 1M</th><th scope="col">Cached / 1M</th><th scope="col">Output / 1M</th><th scope="col">Aliases</th><th scope="col">Tiers</th><th scope="col">Active</th><th scope="col">Actions</th></tr></thead>
        <tbody data-settings-prices><tr><td colspan="10" class="empty">Loading pricing…</td></tr></tbody>
      </table>
    </div>
    <div data-settings-pagination></div>
  </article>

  <form class="card form-card" id="price-editor" method="post" action="/admin/settings/model-prices" data-settings-action="price-save">
    <div class="card-header"><div><h2>Add Or Update Price</h2><p>Used for request cost estimates and run comparisons.</p></div></div>
    <input type="hidden" name="price_id">
    <div class="form-grid three-col">
      <label class="form-field"><span>Provider</span><select name="provider_slug" data-provider-options required><option value="">Choose provider</option></select></label>
      <label class="form-field"><span>Model</span><input name="model" required></label>
      <label class="form-field"><span>Display name</span><input name="display_name"></label>
      <label class="form-field"><span>Input USD / 1M</span><input name="input_usd_per_million" type="number" min="0" step="0.000001" required></label>
      <label class="form-field"><span>Cached input USD / 1M</span><input name="cached_input_usd_per_million" type="number" min="0" step="0.000001"></label>
      <label class="form-field"><span>Output USD / 1M</span><input name="output_usd_per_million" type="number" min="0" step="0.000001" required></label>
      <label class="form-field"><span>Aliases</span><input name="aliases"></label>
      <label class="form-field wide"><span>Notes</span><input name="notes"></label>
      <label class="check switch-line"><input type="hidden" name="active" value="no"><input type="checkbox" name="active" value="yes" checked><span>Active</span></label>
    </div>
    <div class="button-row"><button class="button primary" type="submit">Save price</button><button class="button ghost" type="reset">Clear</button></div>
    <p class="form-message" data-form-message aria-live="polite"></p>
  </form>
</section>
{% endblock %}