<?php
$typeColors = ['landing'=>['bg'=>'#e0e7ff','color'=>'#4338ca'],'form'=>['bg'=>'#d1fae5','color'=>'#065f46'],'thankyou'=>['bg'=>'#fef3c7','color'=>'#92400e']];
$typeIcons  = ['landing'=>'fa-image','form'=>'fa-wpforms','thankyou'=>'fa-check-circle'];
$tc = $typeColors[$page['page_type']] ?? $typeColors['landing'];
$ti = $typeIcons[$page['page_type']] ?? 'fa-file';
?>
<div style="display:flex;align-items:center;gap:.875rem;padding:1rem 1.125rem">
    <div class="page-drag-handle" style="color:#d1d5db;cursor:grab;font-size:1rem" title="Drag to reorder"><i class="fas fa-grip-vertical"></i></div>
    <div style="width:36px;height:36px;background:<?= $tc['bg'] ?>;border-radius:.625rem;display:flex;align-items:center;justify-content:center;flex-shrink:0">
        <i class="fas <?= $ti ?>" style="color:<?= $tc['color'] ?>;font-size:.85rem"></i>
    </div>
    <div style="flex:1;min-width:0">
        <div style="font-weight:700;font-size:.875rem;color:#111827;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"><?= e($page['title']) ?></div>
        <div style="font-size:.7rem;color:#9ca3af;margin-top:.125rem">
            <span class="step-number" style="font-weight:600;color:#6366f1">Step <?= $idx + 1 ?></span>
            &bull; <span style="text-transform:capitalize"><?= $page['page_type'] ?></span>
            <?php if (!empty($page['form_id'])): ?>&bull; Form embedded<?php endif; ?>
        </div>
    </div>
    <div style="display:flex;gap:.375rem;flex-shrink:0">
        <a href="<?= url('/funnels/'.$funnel['id'].'/pages/'.$page['id'].'/builder') ?>" class="btn-secondary btn-sm" title="Visual Builder"><i class="fas fa-paint-brush"></i></a>
        <button onclick="openEditPage(<?= $page['id'] ?>,'<?= addslashes(e($page['title'])) ?>','<?= $page['page_type'] ?>',<?= $page['form_id'] ?: 'null' ?>)" class="btn-secondary btn-sm" title="Edit"><i class="fas fa-edit"></i></button>
    </div>
</div>
