{% if projects %}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    {% for project in projects %}
        <div class="bg-white shadow rounded-lg hover:shadow-lg transition-shadow duration-200">
            <div class="p-6">
                <!-- Project Header -->
                <div class="flex items-start justify-between mb-4">
                    <div class="flex-1">
                        <div class="flex items-center">
                            <h3 class="text-lg font-semibold text-gray-900 truncate">
                                {{ project.title }}
                            </h3>
                            {% if project.user_role == 'owner' or project.user_id == current_user_id %}
                                <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">
                                    <i class="fas fa-crown mr-1"></i>
                                    {{ t('projects.owner') }}
                                </span>
                            {% elif project.user_role %}
                                <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
                                    {{ t('projects.role_' + project.user_role) }}
                                </span>
                            {% endif %}
                        </div>
                        <p class="text-sm text-gray-600 mt-1">{{ project.name }}</p>
                    </div>
                    <div class="flex items-center space-x-2">
                        <!-- Project Type Badge -->
                        {% if project.project_type == 'general' %}
                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                <i class="fas fa-folder mr-1"></i>
                                {{ t('projects.type_general') }}
                            </span>
                        {% elif project.project_type == 'sequenced' %}
                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                <i class="fas fa-list-ol mr-1"></i>
                                {{ t('projects.type_sequenced') }}
                            </span>
                        {% elif project.project_type == 'llm_comparison' %}
                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                                <i class="fas fa-balance-scale mr-1"></i>
                                {{ t('projects.type_llm_comparison') }}
                            </span>
                        {% elif project.project_type == 'developer' %}
                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                <i class="fas fa-code mr-1"></i>
                                {{ t('projects.type_developer') }}
                            </span>
                        {% endif %}
                    </div>
                </div>

                <!-- Project Description -->
                <div class="mb-4">
                    <p class="text-sm text-gray-600 line-clamp-2">
                        {{ project.description or t('projects.no_description') }}
                    </p>
                </div>

                <!-- Project Stats -->
                <div class="flex items-center justify-between text-xs text-gray-500 mb-4">
                    <div class="flex items-center space-x-4">
                        <div class="flex items-center">
                            <i class="fas fa-file-text mr-1"></i>
                            <span>{{ project.prompt_count or 0 }} {{ t('projects.prompts') }}</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-rules mr-1"></i>
                            <span>{{ project.rule_count or 0 }} {{ t('projects.rules') }}</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-users mr-1"></i>
                            <span>{{ project.member_count or 1 }} {{ t('projects.members') }}</span>
                        </div>
                    </div>
                    <div class="flex items-center">
                        <span>v{{ project.version or 1 }}</span>
                    </div>
                </div>

                <!-- Visibility and Sharing -->
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center space-x-2">
                        {% if project.visibility == 'public' %}
                            <div class="flex items-center text-green-600">
                                <i class="fas fa-globe mr-1"></i>
                                <span class="text-xs">{{ t('projects.public') }}</span>
                            </div>
                        {% else %}
                            <div class="flex items-center text-gray-500">
                                <i class="fas fa-lock mr-1"></i>
                                <span class="text-xs">{{ t('projects.private') }}</span>
                            </div>
                        {% endif %}
                        {% if project.shared_with_tenant %}
                            <div class="flex items-center text-blue-600">
                                <i class="fas fa-share-alt mr-1"></i>
                                <span class="text-xs">{{ t('projects.shared_tenant') }}</span>
                            </div>
                        {% endif %}
                    </div>
                    <div class="text-xs text-gray-500">
                        {{ t('projects.updated') }} {{ project.updated_at }}
                    </div>
                </div>

                <!-- Actions -->
                <div class="flex items-center justify-between pt-4 border-t border-gray-200">
                    <div class="flex items-center space-x-2">
                        <a href="/projects/{{ project.id }}" 
                           class="inline-flex items-center px-3 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50">
                            <i class="fas fa-eye mr-1"></i>
                            {{ t('common.view') }}
                        </a>
                        {% if project.user_role in ['owner', 'member'] or project.user_id == current_user_id %}
                            <a href="/projects/{{ project.id }}/edit" 
                               class="inline-flex items-center px-3 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50">
                                <i class="fas fa-edit mr-1"></i>
                                {{ t('common.edit') }}
                            </a>
                        {% endif %}
                    </div>
                    <div class="flex items-center space-x-1">
                        {% if project.project_type == 'sequenced' %}
                            <button class="text-gray-400 hover:text-blue-600 transition-colors duration-200"
                                    title="{{ t('projects.execute_sequence') }}"
                                    onclick="executeSequence({{ project.id }})">
                                <i class="fas fa-play"></i>
                            </button>
                        {% elif project.project_type == 'llm_comparison' %}
                            <button class="text-gray-400 hover:text-purple-600 transition-colors duration-200"
                                    title="{{ t('projects.run_comparison') }}"
                                    onclick="runComparison({{ project.id }})">
                                <i class="fas fa-balance-scale"></i>
                            </button>
                        {% endif %}
                        <button class="text-gray-400 hover:text-green-600 transition-colors duration-200"
                                title="{{ t('projects.export') }}"
                                onclick="exportProject({{ project.id }})">
                            <i class="fas fa-download"></i>
                        </button>
                        {% if project.user_id == current_user_id %}
                            <button class="text-gray-400 hover:text-red-600 transition-colors duration-200"
                                    title="{{ t('common.delete') }}"
                                    onclick="confirmDeleteProject({{ project.id }}, '{{ project.title }}')">
                                <i class="fas fa-trash"></i>
                            </button>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
</div>

<!-- Pagination -->
<div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6 rounded-b-lg mt-6">
    <div class="flex-1 flex justify-between sm:hidden">
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
            {{ t('common.previous') }}
        </a>
        <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
            {{ t('common.next') }}
        </a>
    </div>
    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
        <div>
            <p class="text-sm text-gray-700">
                {{ t('projects.showing_results', count_start=1, count_end=projects|length, total=projects|length) }}
            </p>
        </div>
        <div>
            <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                    <span class="sr-only">{{ t('common.previous') }}</span>
                    <i class="fas fa-chevron-left"></i>
                </a>
                <a href="#" class="bg-primary-50 border-primary-500 text-primary-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">1</a>
                <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                    <span class="sr-only">{{ t('common.next') }}</span>
                    <i class="fas fa-chevron-right"></i>
                </a>
            </nav>
        </div>
    </div>
</div>
{% else %}
<div class="bg-white shadow rounded-lg">
    <div class="text-center py-12">
        <i class="fas fa-folder-open text-4xl text-gray-300 mb-4"></i>
        <h3 class="text-lg font-medium text-gray-900 mb-2">{{ t('projects.no_projects_found') }}</h3>
        <p class="text-gray-500 mb-6">{{ t('projects.get_started_message') }}</p>
        <a href="/projects/new" class="btn-primary">
            <i class="fas fa-plus mr-2"></i>
            {{ t('projects.create_first') }}
        </a>
    </div>
</div>
{% endif %}