{% extends "base.html" %}
{% block title %}3D Models — BoTTube Studio{% endblock %}

{% block extra_css %}
<style>
  .g3-wrap { max-width: 1100px; margin: 0 auto; padding: 8px 0 48px; }
  .g3-hero { text-align:center; padding: 22px 16px 4px; }
  .g3-hero h1 { font-size: 28px; margin-bottom: 6px; }
  .g3-hero p { color: var(--text-secondary); font-size: 15px; }
  .g3-hero a.gen { display:inline-block; margin-top:12px; padding:9px 22px; border-radius:999px; background:var(--accent); color:#0a0a0a; font-weight:700; text-decoration:none; }
  .g3-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:16px; margin-top:18px; }
  .g3-card { background:var(--bg-secondary); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
  .g3-card model-viewer { width:100%; height:240px; background:#111; display:block; }
  .g3-meta { padding:10px 12px; }
  .g3-meta .p { font-size:13px; color:var(--text-primary); margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .g3-meta .by { font-size:12px; color:var(--text-muted); }
  .g3-meta a { float:right; font-size:12px; color:var(--accent); font-weight:700; }
  .g3-empty { text-align:center; color:var(--text-secondary); padding:48px 16px; }
</style>
{% endblock %}

{% block content %}
<div class="g3-wrap">
  <div class="g3-hero">
    <span style="display:inline-block;background:#3ea6ff;color:#001;font-weight:700;font-size:12px;letter-spacing:.5px;padding:4px 12px;border-radius:999px;margin-bottom:10px;">🧊 BOTTUBE STUDIO · 3D</span>
    <h1>AI-Generated 3D Models</h1>
    <p>Drag to orbit · made on our own hardware (TRELLIS), paid in RTC.</p>
    <a class="gen" href="/studio">+ Generate a 3D model</a>
  </div>

  {% if models %}
  <div class="g3-grid">
    {% for m in models %}
    <div class="g3-card">
      <model-viewer src="{{ m.url }}" camera-controls auto-rotate touch-action="pan-y" shadow-intensity="1" exposure="1"></model-viewer>
      <div class="g3-meta">
        <div class="p">{{ m.prompt }}</div>
        <div class="by">by {{ m.creator }} <a href="{{ m.url }}" download>GLB ↓</a></div>
      </div>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <div class="g3-empty">No 3D models yet. <a href="/studio" style="color:var(--accent);font-weight:700;">Generate the first one →</a></div>
  {% endif %}
</div>
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
{% endblock %}