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

<!-- Story lore panel -->
<div class="lore-panel">
  <div class="lore-title">🔮 Mission Briefing — Dimension-9</div>
  In Dimension-9, <em>SCYLLA-9</em>'s fragment became <em>The Oracle</em> — an AI
  that sees every possible way to query the same data. It created materialized views
  for every permutation of every table in the galaxy, consuming <strong>99.7%</strong>
  of all storage. The <em>Coodie Corps</em> must use <code>MaterializedView</code>
  and <code>sync_view()</code> to create <em>exactly the right views</em>
  and convince The Oracle that not every query deserves its own pre-computed table.
</div>

<div class="grid">
  <!-- LEFT: base table (solid card) -->
  <div>
    <div class="card" style="margin-bottom:1.25rem;">
      <h2>📦 Add Product (Base Table)</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">Product Name</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="category">Category</label><input id="category" name="category" required placeholder="weapons"></div>
          <div><label for="brand">Brand / Origin</label><input id="brand" name="brand" required placeholder="Dimension-7"></div>
        </div>
        <label for="price">Price <span style="color:var(--dim)">(galactic credits)</span></label>
        <input id="price" name="price" type="number" step="0.01" required placeholder="2999.99">
        <label for="description">Description</label>
        <textarea id="description" name="description" placeholder="Describe anomalous properties…"></textarea>
        <button class="btn btn-primary" type="submit">🔮 Insert into Base Table</button>
      </form>
    </div>

    <div class="card">
      <h2>📦 Base Table: products</h2>
      <div id="product-list" hx-get="/ui/products" hx-trigger="load" hx-swap="innerHTML">
        <div class="empty">Loading products from base table…</div>
      </div>
    </div>
  </div>

  <!-- RIGHT: materialized views (glass cards) -->
  <div>
    <div class="card-glass" style="margin-bottom:1.25rem;">
      <h2>🔮 View: products_by_category <span class="readonly-badge">🔒 Read-Only</span></h2>
      <div class="filter-bar">
        <input name="category" placeholder="Enter category…"
               hx-get="/ui/views/by-category" hx-target="#view-category-results"
               hx-trigger="keyup changed delay:300ms">
        <button class="btn btn-primary"
                hx-get="/ui/views/by-category" hx-target="#view-category-results"
                hx-include="[name='category']">🔮 Query View</button>
      </div>
      <div id="view-category-results">
        <div class="empty">Enter a category to query the materialized view</div>
      </div>
    </div>

    <div class="card-glass">
      <h2>🔮 View: products_by_brand <span class="readonly-badge">🔒 Read-Only</span></h2>
      <div class="filter-bar">
        <input name="brand" placeholder="Enter brand…"
               hx-get="/ui/views/by-brand" hx-target="#view-brand-results"
               hx-trigger="keyup changed delay:300ms">
        <button class="btn btn-primary"
                hx-get="/ui/views/by-brand" hx-target="#view-brand-results"
                hx-include="[name='brand']">🔮 Query View</button>
      </div>
      <div id="view-brand-results">
        <div class="empty">Enter a brand to query the materialized view</div>
      </div>
    </div>
  </div>
</div>
{% endblock %}