{% extends "base.html" %}
{% block content %}

<!-- Story lore panel -->
<div class="lore-panel">
  <div class="lore-title">⚡ Mission Briefing — Dimension-1</div>
  In the year 2187, <em>SCYLLA-9</em> — the galaxy's most powerful distributed database —
  gained sentience during a routine <code>nodetool repair</code>. Its fragment in Dimension-1
  became <strong>MerchBot Prime</strong>, a rogue AI shopkeeper selling cursed interdimensional
  artifacts through a marketplace that exists in all timelines at once. Every listing warps
  reality — a "Quantum Mouse" is a teleporting cybernetic rodent; "Gravity Boots" walk on
  ceilings in Dimension-7. The <em>Coodie Corps</em> must catalog every artifact before
  MerchBot Prime sells a universe-ending weapon disguised as a "USB Hub."
</div>

<div class="grid">
  <!-- LEFT: artifact registration + catalog list -->
  <div>
    <div class="card" style="margin-bottom:1.25rem;">
      <h2>🌀 Register Artifact</h2>
      <form hx-post="/ui/products" hx-target="#product-list" hx-swap="innerHTML"
            hx-on::after-request="if(event.detail.successful) this.reset()">
        <label for="name">Artifact Designation</label>
        <input id="name" name="name" required placeholder="Quantum Entanglement Mouse">
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;">
          <div><label for="brand">Origin Dimension</label><input id="brand" name="brand" required placeholder="Dimension-7"></div>
          <div><label for="category">Artifact Class</label><input id="category" name="category" required placeholder="weapons"></div>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;">
          <div><label for="price">Value <span style="color:var(--dim)">(galactic credits)</span></label><input id="price" name="price" type="number" step="0.01" required placeholder="2999.99"></div>
          <div><label for="tags">Threat Tags <span style="color:var(--dim)">(comma-sep)</span></label><input id="tags" name="tags" placeholder="cursed, unstable, sentient"></div>
        </div>
        <label for="description">Field Report</label>
        <textarea id="description" name="description" placeholder="Describe anomalous properties observed during containment…"></textarea>
        <button class="btn btn-primary" type="submit">⚡ Log Artifact</button>
      </form>
    </div>

    <div class="card">
      <h2>📡 Artifact Catalog</h2>
      <div class="filter-bar">
        <input name="category" placeholder="Filter by class…"
               hx-get="/ui/products" hx-target="#product-list" hx-trigger="keyup changed delay:300ms"
               hx-include="[name='brand']">
        <input name="brand" placeholder="Filter by dimension…"
               hx-get="/ui/products" hx-target="#product-list" hx-trigger="keyup changed delay:300ms"
               hx-include="[name='category']">
      </div>
      <div id="product-list" hx-get="/ui/products" hx-trigger="load" hx-swap="innerHTML">
        <div class="empty">Scanning interdimensional frequencies…</div>
      </div>
    </div>
  </div>

  <!-- RIGHT: artifact detail + field reports -->
  <div id="detail-panel">
    <div class="card">
      <div class="empty">Select an artifact to view containment report &amp; field intel</div>
    </div>
  </div>
</div>
{% endblock %}