{% extends "base.html" %}

{% block title %}Projects - Paracord Console{% endblock %}

{% block content %}
<div class="mb-8">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Projects</h1>
            <p class="mt-1 text-sm text-gray-500">{{ project_count }} registered project{% if project_count != 1 %}s{% endif %}</p>
        </div>
        <button
            hx-get="/api/projects"
            hx-trigger="click"
            hx-swap="none"
            onclick="location.reload()"
            class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-paracord-500"
        >
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
            </svg>
            Refresh
        </button>
    </div>
</div>

{% if projects %}
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
    {% for project in projects %}
    {% include "partials/project_card.html" %}
    {% endfor %}
</div>
{% else %}
<div class="text-center py-12">
    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
    </svg>
    <h3 class="mt-2 text-sm font-medium text-gray-900">No projects registered</h3>
    <p class="mt-1 text-sm text-gray-500">Get started by registering a project with the CLI.</p>
    <div class="mt-6">
        <code class="px-4 py-2 bg-gray-100 rounded-md text-sm font-mono text-gray-700">
            paracord console init
        </code>
    </div>
</div>
{% endif %}
{% endblock %}