{% extends "base.html" %}
{% block title %}evalkit — Projects{% endblock %}
{% block content %}
<div class="flex items-center justify-between mb-6">
    <h1 class="text-2xl font-semibold">Projects</h1>
    <button
        onclick="document.getElementById('new-project-modal').classList.remove('hidden')"
        class="bg-indigo-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-indigo-700"
    >+ New Project</button>
</div>

{% if projects %}
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
    {% for project in projects %}
    <a href="/projects/{{ project.id }}" class="block bg-white rounded-xl border border-gray-200 p-5 hover:shadow-md transition-shadow">
        <div class="flex items-start justify-between gap-2">
            <h2 class="font-medium text-gray-900 truncate">{{ project.name }}</h2>
            {% set last_eval = project.evaluations | sort(attribute='created_at') | last if project.evaluations else none %}
            {% if last_eval and last_eval.average_score is not none %}
                {% set score = (last_eval.average_score * 100) | int %}
                <span class="shrink-0 text-xs font-semibold px-2 py-0.5 rounded-full
                    {% if score >= 80 %}bg-green-100 text-green-800
                    {% elif score >= 50 %}bg-yellow-100 text-yellow-800
                    {% else %}bg-red-100 text-red-800{% endif %}">
                    {{ score }}%
                </span>
            {% else %}
                <span class="shrink-0 text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-500">no runs</span>
            {% endif %}
        </div>
        {% if project.description %}
        <p class="mt-1 text-sm text-gray-500 truncate">{{ project.description }}</p>
        {% endif %}
        <p class="mt-3 text-xs text-gray-400">{{ project.evaluations | length }} evaluation{% if project.evaluations | length != 1 %}s{% endif %}</p>
    </a>
    {% endfor %}
</div>
{% else %}
<div class="text-center py-16 text-gray-400">
    <p class="text-4xl mb-4">📊</p>
    <p class="text-lg font-medium">No projects yet</p>
    <p class="text-sm mt-1">Create your first project to start evaluating your RAG pipeline.</p>
</div>
{% endif %}

<!-- New Project Modal -->
<div id="new-project-modal" class="hidden fixed inset-0 bg-black/40 flex items-center justify-center z-50">
    <div class="bg-white rounded-2xl shadow-xl p-6 w-full max-w-md mx-4">
        <h2 class="text-lg font-semibold mb-4">New Project</h2>
        <form method="POST" action="/projects">
            <label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
            <input name="name" required
                class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm mb-3 focus:outline-none focus:ring-2 focus:ring-indigo-400"
                placeholder="my-rag-pipeline">
            <label class="block text-sm font-medium text-gray-700 mb-1">Description <span class="text-gray-400 font-normal">(optional)</span></label>
            <input name="description"
                class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm mb-5 focus:outline-none focus:ring-2 focus:ring-indigo-400"
                placeholder="What does this pipeline do?">
            <div class="flex gap-3 justify-end">
                <button type="button"
                    onclick="document.getElementById('new-project-modal').classList.add('hidden')"
                    class="text-sm text-gray-500 hover:text-gray-800 px-4 py-2">Cancel</button>
                <button type="submit"
                    class="bg-indigo-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-indigo-700">Create</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}