<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"/>
<title>Forms</title>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet"/>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased;background:#f1f5f9;min-height:100vh}
header{background:linear-gradient(135deg,#f0a500,#c47f00);padding:48px 24px;text-align:center;color:#fff}
header h1{font-size:clamp(24px,5vw,40px);font-weight:800;margin-bottom:8px}
header p{color:rgba(255,255,255,.8);font-size:15px}
.container{max-width:900px;margin:0 auto;padding:32px 16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.card{background:#fff;border-radius:16px;box-shadow:0 2px 12px rgba(0,0,0,.07);overflow:hidden;transition:transform .2s,box-shadow .2s;cursor:pointer;text-decoration:none;display:block;color:inherit}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(240,165,0,.18)}
.card-top{background:linear-gradient(135deg,#f0a50018,#c47f0010);padding:24px;border-bottom:1px solid #f1f5f9}
.card-icon{width:48px;height:48px;background:linear-gradient(135deg,#f0a500,#c47f00);border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.card-icon svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card-title{font-size:17px;font-weight:800;color:#0a1628;margin-bottom:6px}
.card-desc{font-size:13px;color:#64748b;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-foot{padding:14px 24px;display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#94a3b8}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.06em}
.badge-pub{background:#ecfdf5;color:#059669}
.badge-priv{background:#fef3c7;color:#d97706}
.open-btn{display:inline-flex;align-items:center;gap:6px;color:#f0a500;font-weight:700;font-size:13px}
.open-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.empty{text-align:center;padding:80px 20px;color:#94a3b8}
.empty svg{width:64px;height:64px;stroke:#cbd5e1;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px}
.spinner{width:40px;height:40px;border:3px solid #e2e8f0;border-top-color:#f0a500;border-radius:50%;animation:spin .7s linear infinite;margin:60px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Responsive ──────────────────────────────────────────────── */
@media(max-width:600px){
  header{padding:32px 16px}
  header h1{font-size:26px}
  .container{padding:20px 12px}
  .grid{grid-template-columns:1fr;gap:14px}
  .card-top{padding:18px}
  .card-foot{padding:12px 18px}
  .card-title{font-size:15px}
}
@media(max-width:360px){
  .container{padding:14px 8px}
}
</style>
</head>
<body>
<header>
  <h1 id="app-name">Forms</h1>
  <p>Select a form below to get started</p>
</header>
<div class="container">
  <div id="content"><div class="spinner"></div></div>
</div>
<script>
const BASE = (()=>{const p=window.location.pathname;return p.endsWith('/')?p.slice(0,-1):p.substring(0,p.lastIndexOf('/'));})();
const API  = BASE+'/api';

async function load(){
  try{
    const r=await fetch(API+'/public/forms');
    const j=await r.json();
    if(!j.ok||!j.forms.length){
      document.getElementById('content').innerHTML=`<div class="empty">
        <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
        <p>No forms available yet.</p></div>`;
      return;
    }
    const appName = document.title;
    document.getElementById('app-name').textContent = appName;
    document.getElementById('content').innerHTML=`<div class="grid">${j.forms.map(f=>`
      <a class="card" href="${BASE}/form.php?s=${f.slug}">
        <div class="card-top">
          <div class="card-icon"><svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg></div>
          <div class="card-title">${esc(f.title)}</div>
          <div class="card-desc">${esc(f.description||'')}</div>
        </div>
        <div class="card-foot">
          <span class="badge ${f.is_public?'badge-pub':'badge-priv'}">${f.is_public?'Public':'Password Protected'}</span>
          <span class="open-btn">Open <svg viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg></span>
        </div>
      </a>`).join('')}</div>`;
  }catch(e){document.getElementById('content').innerHTML='<p style="color:red;text-align:center;padding:40px">Failed to load forms.</p>';}
}
function esc(s){return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}
load();
</script>
</body>
</html>
