{% extends 'base.html.twig' %}

{% block title %}Project index{% endblock %}

{% block body %}
    <main class="relative h-screen w-screen flex flex-col justify-center items-center overflow-auto">
        <section class="relative w-full h-full flex justify-center z-10">
            <div class="relative flex flex-col w-full">
                {% include 'admin/header.html.twig' with {'title': 'Projects', 'button_link': path('app_project_new'), 'button_text': 'Create new'} %}
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50 h-14">
                            <tr>
                                <th scope="col" class="px-8 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider max-w-[50px]">Id</th>
                                <th scope="col" class="px-2 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider max-w-[150px]">Name</th>
                                <th scope="col" class="px-2 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider max-w-[150px]">Visibility</th>
                                <th scope="col" class="px-2 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider max-w-[150px]">Number of Views</th>
                                <th scope="col" class="px-2 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider max-w-[150px]">Likes</th>
                                <th scope="col" class="px-2 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider max-w-[150px]">Created At</th>
                                <th scope="col" class="px-8 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                        {% set sortedProjects = projects|sort((project1, project2) => project1.id <=> project2.id) %}
                        {% for project in sortedProjects %}
                            <tr>
                                <td class="px-8 py-4 whitespace-nowrap truncate">{{ project.id }}</td>
                                <td class="px-2 py-4 whitespace-nowrap max-w-[150px] truncate">{{ project.name }}</td>
                                <td class="px-2 py-4 whitespace-nowrap max-w-[150px] truncate">{{ project.visibility ? project.visibility.value : '' }}</td>
                                <td class="px-2 py-4 whitespace-nowrap max-w-[150px] truncate">{{ project.numberOfViews }}</td>
                                <td class="px-2 py-4 whitespace-nowrap max-w-[150px] truncate">{{ project.likes }}</td>
                                <td class="px-2 py-4 whitespace-nowrap max-w-[150px] truncate">{{ project.createdAt ? project.createdAt|date('Y-m-d H:i:s') : '' }}</td>
                                <td class="px-8 whitespace-nowrap">
                                    <div class="flex flex-row justify-end gap-2">
                                        <a href="{{ path('project', {'id': project.id }) }}" class="py-2 px-4 border border-gray-300 shadow text-sm font-medium rounded-lg text-gray-500 bg-white hover:text-white hover:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white transition-all duration-300">View page</a>
                                        <a href="{{ path('app_project_show', {'id': project.id}) }}" class="py-2 px-4 border border-gray-300 shadow text-sm font-medium rounded-lg text-gray-500 bg-white hover:text-white hover:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white transition-all duration-300">Show</a>
                                        <a href="{{ path('app_project_edit', {'id': project.id}) }}" class="py-2 px-4 border border-gray-300 shadow text-sm font-medium rounded-lg text-gray-500 bg-white hover:text-white hover:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white transition-all duration-300">Edit</a>
                                    </div>
                                </td>
                            </tr>
                        {% else %}
                            <tr>
                                <td colspan="7" class="px-8 py-4 whitespace-nowrap text-center text-sm text-gray-500">No records found</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
    </main>
{% endblock %}