<?php
$fieldIcons = ['text'=>'fa-font','email'=>'fa-envelope','phone'=>'fa-phone','number'=>'fa-hashtag','textarea'=>'fa-align-left','select'=>'fa-chevron-circle-down','radio'=>'fa-dot-circle','checkbox'=>'fa-check-square','date'=>'fa-calendar','file'=>'fa-paperclip','image'=>'fa-image'];
$badgeColors = ['text'=>'badge-gray','email'=>'badge-blue','phone'=>'badge-green','number'=>'badge-orange','textarea'=>'badge-gray','select'=>'badge-purple','radio'=>'badge-purple','checkbox'=>'badge-purple','date'=>'badge-blue','file'=>'badge-orange','image'=>'badge-orange'];
$icon = $fieldIcons[$field['field_type']] ?? 'fa-input';
$badge = $badgeColors[$field['field_type']] ?? 'badge-gray';
?>
<div data-field-id="<?= $field['id'] ?>" style="display:flex;align-items:center;gap:.75rem;padding:1rem;background:#fff;border:1px solid #e5e7eb;border-radius:.875rem;transition:all .15s" onmouseover="this.style.borderColor='#c7d2fe'" onmouseout="this.style.borderColor='#e5e7eb'">
    <div class="drag-handle" style="color:#d1d5db;font-size:1rem;padding:.25rem" title="Drag to reorder"><i class="fas fa-grip-vertical"></i></div>
    <div style="width:36px;height:36px;background:#e0e7ff;border-radius:.625rem;display:flex;align-items:center;justify-content:center;flex-shrink:0">
        <i class="fas <?= $icon ?>" style="color:#4f46e5;font-size:.8rem"></i>
    </div>
    <div style="flex:1;min-width:0">
        <div style="font-weight:700;font-size:.875rem;color:#111827">
            <?= e($field['label']) ?>
            <?php if ($field['required']): ?><span style="color:#ef4444;margin-left:.25rem">*</span><?php endif; ?>
        </div>
        <div style="font-size:.7rem;color:#9ca3af;margin-top:.125rem">
            <?= $field['field_type'] ?>
            <?php if (!empty($field['placeholder'])): ?>&bull; <?= e($field['placeholder']) ?><?php endif; ?>
            <?php if (!empty($field['options'])): ?>&bull; <?= count(explode("\n", trim($field['options']))) ?> options<?php endif; ?>
        </div>
    </div>
    <span class="badge <?= $badge ?>" style="font-size:.65rem;text-transform:capitalize;flex-shrink:0"><?= $field['field_type'] ?></span>
    <button onclick="openEditField(<?= $field['id'] ?>)" style="background:none;border:none;cursor:pointer;color:#6b7280;padding:.375rem;transition:color .15s" title="Edit field" onmouseover="this.style.color='#4f46e5'" onmouseout="this.style.color='#6b7280'">
        <i class="fas fa-edit"></i>
    </button>
</div>
