<?php
$pageTitle = 'Forms';
$currentPage = 'forms';
$headerActions = '<a href="'.url('/forms/create').'" class="btn-primary"><i class="fas fa-plus"></i> New Form</a>';
require_once APP_PATH . '/views/layouts/header.php';
?>

<?php if (empty($forms)): ?>
<div class="card" style="padding:4rem;text-align:center;max-width:480px;margin:0 auto">
    <div style="width:64px;height:64px;background:#e0e7ff;border-radius:1rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem">
        <i class="fas fa-wpforms" style="font-size:1.75rem;color:#4f46e5"></i>
    </div>
    <h2 style="font-weight:800;font-size:1.25rem;color:#111827;margin:0 0 .5rem">No Forms Yet</h2>
    <p style="color:#6b7280;font-size:.875rem;margin:0 0 1.5rem">Create your first online form with drag &amp; drop fields.</p>
    <a href="<?= url('/forms/create') ?>" class="btn-primary" style="justify-content:center"><i class="fas fa-plus"></i> Create First Form</a>
</div>
<?php else: ?>
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.25rem">
<?php foreach ($forms as $form): ?>
<div class="card" style="padding:1.5rem;display:flex;flex-direction:column;gap:1rem" id="form-card-<?= $form['id'] ?>">
    <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem">
        <div style="flex:1;min-width:0">
            <div style="font-weight:700;font-size:1rem;color:#111827;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"><?= e($form['name']) ?></div>
            <?php if (!empty($form['description'])): ?>
            <div style="font-size:.8rem;color:#6b7280;margin-top:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"><?= e($form['description']) ?></div>
            <?php endif; ?>
        </div>
        <div style="display:flex;gap:.375rem;flex-shrink:0">
            <span class="badge badge-blue"><?= $form['field_count'] ?> fields</span>
            <span class="badge badge-green"><?= $form['response_count'] ?> resp.</span>
        </div>
    </div>
    <div style="background:#f9fafb;border-radius:.75rem;padding:.75rem;border:1px solid #f3f4f6">
        <div style="display:flex;align-items:center;gap:.5rem">
            <span style="font-family:'JetBrains Mono',monospace;font-size:.7rem;color:#6b7280;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"><?= url('/form/'.$form['slug']) ?></span>
            <button onclick="copyToClipboard('<?= url('/form/'.$form['slug']) ?>')" style="background:none;border:none;cursor:pointer;color:#4f46e5;font-size:.75rem;padding:.25rem;flex-shrink:0" title="Copy Link"><i class="fas fa-copy"></i></button>
            <a href="<?= url('/form/'.$form['slug']) ?>" target="_blank" style="color:#059669;font-size:.75rem;text-decoration:none;padding:.25rem;flex-shrink:0" title="Open"><i class="fas fa-external-link-alt"></i></a>
        </div>
    </div>
    <div style="display:flex;gap:.5rem;padding-top:.5rem;border-top:1px solid #f3f4f6">
        <a href="<?= url('/forms/'.$form['id'].'/edit') ?>" class="btn-secondary btn-sm" style="flex:1;justify-content:center"><i class="fas fa-edit"></i> Edit</a>
        <a href="<?= url('/forms/'.$form['id'].'/responses') ?>" class="btn-secondary btn-sm" style="flex:1;justify-content:center"><i class="fas fa-inbox"></i> Responses</a>
        <button onclick="deleteForm(<?= $form['id'] ?>)" class="btn-danger btn-sm" title="Delete"><i class="fas fa-trash"></i></button>
    </div>
    <div style="font-size:.65rem;color:#d1d5db">Created <?= timeAgo($form['created_at']) ?></div>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>

<script>
async function deleteForm(id) {
    confirmDelete('Delete this form? All responses will also be deleted.', async function() {
        var res = await apiPost('/forms/' + id + '/delete', {});
        if (res.success) { document.getElementById('form-card-' + id).remove(); showToast(res.message, 'success'); }
        else showToast(res.message || 'Error.', 'error');
    });
}
</script>
<?php require_once APP_PATH . '/views/layouts/footer.php'; ?>
