{% for project in projects %}
<div class="bg-gray-800 rounded-xl border border-gray-700 p-5 hover:border-gray-600 transition-colors">
  <div class="flex items-start justify-between">
    <div class="flex-1 min-w-0">
      <div class="flex items-center gap-3 mb-1">
        <a href="/projects/{{ project.id }}" class="font-semibold text-white hover:text-forge-400 transition-colors">
          {{ project.name }}
        </a>
        <span class="status-badge
          {% if project.status.value == 'ready' %}bg-green-900 text-green-300
          {% elif project.status.value in ['analyzing','generating','testing'] %}bg-yellow-900 text-yellow-300
          {% elif project.status.value == 'error' %}bg-red-900 text-red-300
          {% else %}bg-gray-700 text-gray-400{% endif %}">
          {% if project.status.value in ['analyzing','generating','testing'] %}<i class="fa-solid fa-spinner fa-spin mr-1 text-xs"></i>{% endif %}
          {{ project.status.value | title }}
        </span>
      </div>
      <p class="text-sm text-gray-500 truncate">{{ project.source_url or project.description or 'No source URL' }}</p>
      <div class="flex items-center gap-3 mt-2 text-xs text-gray-600">
        <span><i class="fa-solid fa-code mr-1"></i>{{ project.target_language.value }}</span>
        <span><i class="fa-solid fa-tag mr-1"></i>{{ project.source_type.value }}</span>
        <span><i class="fa-solid fa-clock mr-1"></i>{{ project.updated_at.strftime('%b %d') }}</span>
      </div>
    </div>
    <div class="flex gap-1 ml-4">
      <a href="/projects/{{ project.id }}" class="p-2 rounded-lg hover:bg-gray-700 text-gray-500 hover:text-white transition-colors">
        <i class="fa-solid fa-arrow-up-right-from-square text-xs"></i>
      </a>
    </div>
  </div>
</div>
{% else %}
<div class="text-center py-12 text-gray-600">
  <i class="fa-solid fa-folder-open text-3xl mb-3 block"></i>
  <p class="text-sm">No projects yet — create one to get started.</p>
</div>
{% endfor %}