{% extends "base.html" %}
{% block title %}Oracle — ICDEV™{% endblock %}
{% block content %}
<div class="page-header"><h1>Oracle — Predictive Intelligence</h1></div>
<div class="stat-grid" style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;">
  <div class="card" style="padding:20px;text-align:center;">
    <div style="font-size:36px;font-weight:700;color:#2196f3;">0</div>
    <div style="color:#7a8cb0;font-size:12px;">Active Predictions</div>
  </div>
  <div class="card" style="padding:20px;text-align:center;">
    <div style="font-size:36px;font-weight:700;color:#27ae60;">6</div>
    <div style="color:#7a8cb0;font-size:12px;">Lenses Available</div>
  </div>
  <div class="card" style="padding:20px;text-align:center;">
    <div style="font-size:36px;font-weight:700;color:#f39c12;">0</div>
    <div style="color:#7a8cb0;font-size:12px;">Warnings</div>
  </div>
</div>
<div class="card" style="padding:20px;">
  <h3 style="margin:0 0 12px;">Quality Lens</h3>
  <p style="color:#7a8cb0;">Predicts UQS regressions, recurring gate failures, and findings growth from historical QDC data.</p>
  <button onclick="fetch('/quality/api/oracle/quality').then(r=>r.json()).then(d=>{document.getElementById('oracle-output').textContent=JSON.stringify(d,null,2);document.getElementById('oracle-result').style.display='block';})" style="background:#2196f3;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;">Run Quality Lens</button>
  <div id="oracle-result" style="display:none;margin-top:12px;">
    <pre id="oracle-output" style="background:#0a1628;padding:12px;border-radius:4px;color:#7a8cb0;font-size:11px;overflow:auto;max-height:300px;"></pre>
  </div>
</div>
{% endblock %}