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

{% block title %}Search Results{% endblock %}

{% block body %}
    {% include('parts/header.html.twig') %}
    <main class="p-6 flex flex-col gap-12">
        <section class="m-8 text-center">
            <div class="flex flex-col gap-3">
                <h1 class="text-4xl font-bold">Search Results for "{{ searchTerm }}"</h1>
                <p class="text-lg text-gray-500 max-w-4xl mx-auto">Showing results for projects and users matching your search criteria.</p>
            </div>
        </section>
        {% if searchResultsProjects is empty and searchResultsUsers is empty %}
            <p class="text-lg text-gray-500 text-center">No projects or users found matching your search criteria.</p>
        {% else %}
            {% if searchResultsProjects is not empty %}
                <section class="flex flex-col gap-3">
                    <h2 class="text-3xl font-semibold">Project Results</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                        {% for project in searchResultsProjects %}
                            <div class="flex flex-col shadow-lg rounded-lg border border-gray-300">
                                {% include 'parts/project_card.html.twig' with {'project': project, 'informations': true} %}
                            </div>
                        {% endfor %}
                    </div>
                </section>
            {% endif %}
            {% if searchResultsUsers is not empty %}
                <section class="flex flex-col gap-3">
                    <h2 class="text-3xl font-semibold">User Results</h2>
                    <div class="flex gap-2">
                        {% for user in searchResultsUsers %}
                            <a href="{{ path('profile_view', {'id': user.id}) }}" class="flex justify-center items-center p-2 pr-4 gap-2 bg-white border border-gray-300 shadow rounded-lg">
                                <img src="{{ user.profilePicture }}" alt="Profile picture of {{ user.username }}" class="w-8 h-8 rounded-full">
                                <span class="text-md font-semibold">{{ user.username }}</span>
                            </a>
                        {% endfor %}
                    </div>
                </section>
            {% endif %}
        {% endif %}
    </main>
{% endblock %}