{% extends "_app_base.html" %}
{% block title %}Projects — Issue Tracker{% endblock %}
{% block content %}
<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-2xl font-semibold tracking-tight">Projects</h1>
        <p class="text-sm text-base-content/60">Your issue-tracking workspaces</p>
    </div>
    <a href="/projects/new" class="btn btn-primary btn-sm">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
        New project
    </a>
</div>

{% if projects.is_empty() %}
    <div class="card bg-base-100 border border-base-300 border-dashed">
        <div class="card-body items-center text-center py-12">
            <div class="text-base-content/40 text-5xl">◎</div>
            <p class="text-base-content/70 mt-2">No projects yet.</p>
            <a href="/projects/new" class="btn btn-primary btn-sm mt-2">Create your first project</a>
        </div>
    </div>
{% else %}
    <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        {% for p in projects %}
            <a href="/projects/{{ p.id }}" class="card bg-base-100 border border-base-300 hover:border-primary hover:shadow-md transition">
                <div class="card-body p-4">
                    <div class="font-medium truncate">{{ p.name }}</div>
                    <div class="text-xs text-base-content/60 line-clamp-2 min-h-[2rem]">
                        {% if p.description.is_empty() %}
                            <span class="italic opacity-60">No description</span>
                        {% else %}
                            {{ p.description }}
                        {% endif %}
                    </div>
                    <div class="text-[11px] text-base-content/50 mt-2">
                        Updated {{ p.updated_at.format("%Y-%m-%d") }}
                    </div>
                </div>
            </a>
        {% endfor %}
    </div>
{% endif %}
{% endblock %}