{% if projects %}
<div class="overflow-x-auto rounded-lg border border-border scrollbar-soft">
    <table class="min-w-full divide-y divide-border text-sm">
        <thead class="bg-muted/60">
            <tr>
                <th class="px-6 py-3 text-left text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">Name</th>
                <th class="px-6 py-3 text-left text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">Created</th>
                <th class="px-6 py-3 text-left text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-border bg-background">
            {% for project in projects %}
            <tr class="transition hover:bg-muted/50">
                <td class="px-6 py-4 whitespace-nowrap font-medium text-foreground">
                    <a href="/project/{{ project.id }}" class="text-foreground hover:text-primary">
                        {{ project.name }}
                    </a>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-muted-foreground">{{ project.created_at[:19] if project.created_at else '' }}</td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <a href="/project/{{ project.id }}" class="inline-flex items-center rounded-full border border-border bg-card px-3 py-1 text-xs font-semibold text-foreground shadow-sm transition hover:border-primary">Open</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<p class="text-muted-foreground italic">No projects yet. Create one to get started.</p>
{% endif %}