<div
    id="project-{{ project.path | replace('/', '-') }}"
    class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow"
    hx-get="/partials/project-card{{ project.path }}"
    hx-trigger="every 5s"
    hx-swap="outerHTML"
>
    <div class="p-5">
        <div class="flex items-start justify-between">
            <div class="flex-1 min-w-0">
                <h3 class="text-lg font-semibold text-gray-900 truncate">{{ project.name }}</h3>
                <p class="mt-1 text-sm text-gray-500 truncate" title="{{ project.path }}">{{ project.path }}</p>
            </div>
            <div class="ml-4 flex-shrink-0">
                {% if project.status.is_listening %}
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                    <svg class="w-2 h-2 mr-1.5 text-green-400" fill="currentColor" viewBox="0 0 8 8">
                        <circle cx="4" cy="4" r="3"></circle>
                    </svg>
                    Running
                </span>
                {% else %}
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600">
                    <svg class="w-2 h-2 mr-1.5 text-gray-400" fill="currentColor" viewBox="0 0 8 8">
                        <circle cx="4" cy="4" r="3"></circle>
                    </svg>
                    Stopped
                </span>
                {% endif %}
            </div>
        </div>

        <div class="mt-4 grid grid-cols-2 gap-4 text-sm">
            <div>
                <span class="text-gray-500">Port:</span>
                <span class="ml-2 font-medium text-gray-900">{{ project.port }}</span>
            </div>
            {% if project.status.process_name %}
            <div>
                <span class="text-gray-500">Process:</span>
                <span class="ml-2 font-medium text-gray-900">{{ project.status.process_name }}</span>
            </div>
            {% endif %}
            {% if project.cloudflare.subdomain %}
            <div class="col-span-2">
                <span class="text-gray-500">Tunnel:</span>
                <span class="ml-2 font-medium text-paracord-600">{{ project.cloudflare.subdomain }}</span>
            </div>
            {% endif %}
        </div>

        {% if project.status.is_listening %}
        <div class="mt-4 pt-4 border-t border-gray-100">
            <a
                href="http://localhost:{{ project.port }}"
                target="_blank"
                class="inline-flex items-center text-sm font-medium text-paracord-600 hover:text-paracord-700"
            >
                Open in browser
                <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                </svg>
            </a>
        </div>
        {% endif %}
    </div>
</div>
