{% extends "base.html" %}
{% load gravatar %}
{% load static %}
{% block title %}
    Search Results
{% endblock title %}
{% block description %}
    View the results of your search, including activities, domains, and users. Find the information you are looking for quickly and efficiently.
{% endblock description %}
{% block keywords %}
    Search Results, Search Activities, Search Domains, Search Users, Find Information, Efficient Search
{% endblock keywords %}
{% block og_title %}
    Search Results - Find What You Need
{% endblock og_title %}
{% block og_description %}
    Access detailed search results, including activities, domains, and users. Quickly find the information and resources you're looking for.
{% endblock og_description %}
{% load humanize %}
{% block content %}
    <!-- Include Sidenav -->
    {% include "includes/sidenav.html" %}
    <div class="absolute bottom-[10px] right-[15px]">
        <a href="https://github.com/OWASP-BLT/BLT/blob/main/website/templates/search.html">
            <i class="fab fa-github"></i>
        </a>
        <a href="https://www.figma.com/file/s0xuxeU6O2guoWEfA9OElZ/Design?node-id=513%3A768&t=pqxWpF3hcYxjEDrs-1">
            <i class="fab fa-figma"></i>
        </a>
    </div>
    <div class="row mt-20">
        <div class="col-md-8 col-md-offset-2">
            <h1 class="text-center">
                <span class="search-header text-black text-3xl">Search Results for&nbsp;</span><span class="search-header-query text-blue-400 font-bold text-3xl">{{ query }}</span>
            </h1>
            <hr>
        </div>
    </div>
    {% if query %}
        <div class="container mt-4">
            <div class="flex">
                <!-- Left sidebar with counts -->
                {% if type == 'all' %}
                    <div class="w-64 flex-shrink-0 pr-6 sticky top-4">
                        <div class="bg-white rounded-lg shadow-sm p-4">
                            <h2 class="text-xl font-semibold mb-4 text-gray-800">Results Found</h2>
                            <div class="space-y-2">
                                {% if organizations %}
                                    <div class="p-2 hover:bg-red-50 rounded-lg transition-colors cursor-pointer"
                                         onclick="scrollToSection('organizations-section')">
                                        <div class="flex items-center justify-between">
                                            <span class="text-gray-700">Organizations</span>
                                            <span class="text-[#e74c3c] font-bold bg-red-50 px-3 py-1 rounded-full">{{ organizations|length }}</span>
                                        </div>
                                    </div>
                                {% endif %}
                                {% if issues %}
                                    <div class="p-2 hover:bg-red-50 rounded-lg transition-colors cursor-pointer"
                                         onclick="scrollToSection('issues-section')">
                                        <div class="flex items-center justify-between">
                                            <span class="text-gray-700">Issues</span>
                                            <span class="text-[#e74c3c] font-bold bg-red-50 px-3 py-1 rounded-full">{{ issues|length }}</span>
                                        </div>
                                    </div>
                                {% endif %}
                                {% if domains %}
                                    <div class="p-2 hover:bg-red-50 rounded-lg transition-colors cursor-pointer"
                                         onclick="scrollToSection('domains-section')">
                                        <div class="flex items-center justify-between">
                                            <span class="text-gray-700">Domains</span>
                                            <span class="text-[#e74c3c] font-bold bg-red-50 px-3 py-1 rounded-full">{{ domains|length }}</span>
                                        </div>
                                    </div>
                                {% endif %}
                                {% if users %}
                                    <div class="p-2 hover:bg-red-50 rounded-lg transition-colors cursor-pointer"
                                         onclick="scrollToSection('users-section')">
                                        <div class="flex items-center justify-between">
                                            <span class="text-gray-700">Users</span>
                                            <span class="text-[#e74c3c] font-bold bg-red-50 px-3 py-1 rounded-full">{{ users|length }}</span>
                                        </div>
                                    </div>
                                {% endif %}
                                {% if projects %}
                                    <div class="p-2 hover:bg-red-50 rounded-lg transition-colors cursor-pointer"
                                         onclick="scrollToSection('projects-section')">
                                        <div class="flex items-center justify-between">
                                            <span class="text-gray-700">Projects</span>
                                            <span class="text-[#e74c3c] font-bold bg-red-50 px-3 py-1 rounded-full">{{ projects|length }}</span>
                                        </div>
                                    </div>
                                {% endif %}
                                {% if repos %}
                                    <div class="p-2 hover:bg-red-50 rounded-lg transition-colors cursor-pointer"
                                         onclick="scrollToSection('repos-section')">
                                        <div class="flex items-center justify-between">
                                            <span class="text-gray-700">Repos</span>
                                            <span class="text-[#e74c3c] font-bold bg-red-50 px-3 py-1 rounded-full">{{ repos|length }}</span>
                                        </div>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                {% endif %}
                <!-- Main content area -->
                <div class="flex-1">
                    {% if issues %}
                        <div id="issues-section" class="bg-gray-50 py-12">
                            <div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-10">
                                <h2 class="text-4xl font-extrabold text-black mb-8">Issues</h2>
                                <div class="list-group">
                                    {% for activity in issues %}
                                        {% include "includes/_activity.html" %}
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    {% endif %}
                    {% if domains %}
                        <div id="domains-section" class="row">
                            <div class="col-12">
                                <div class="bg-gray-50 py-12">
                                    <div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-10">
                                        <h2 class="text-4xl font-extrabold text-black mb-8">Domains</h2>
                                        <div class="list-group">
                                            {% for domain in domains %}
                                                <div class="bg-white shadow-lg rounded-lg p-6 hover:shadow-2xl transition-shadow duration-300">
                                                    <div class="flex items-center mb-4 space-x-4">
                                                        {% if domain.logo %}
                                                            <img class="h-16 w-16 object-cover rounded-lg border border-gray-300"
                                                                 src="{{ domain.logo.url }}"
                                                                 alt="{{ domain.name }} Logo"
                                                                 height="64"
                                                                 width="64">
                                                        {% else %}
                                                            <div class="h-16 w-16 bg-gray-100 flex items-center justify-center rounded-lg">
                                                                <span class="text-gray-400 font-semibold">N/A</span>
                                                            </div>
                                                        {% endif %}
                                                        <div>
                                                            <h2 class="text-4xl font-bold text-gray-800">
                                                                <a href="{{ domain.get_absolute_url }}" class="hover:text-blue-600">{{ domain.name }}</a>
                                                            </h2>
                                                            {% if domain.hostname_domain %}<p class="text-md text-gray-500">{{ domain.hostname_domain }}</p>{% endif %}
                                                        </div>
                                                    </div>
                                                    <div class="flex items-center mb-4">
                                                        {% if domain.webshot %}
                                                            <a href="{{ domain.webshot.url }}" target="_blank" class="ml-auto">
                                                                <img src="{{ domain.webshot.url }}"
                                                                     alt="{{ domain.name }} Webshot"
                                                                     class="h-10 w-10 rounded-lg"
                                                                     height="40"
                                                                     width="40">
                                                            </a>
                                                        {% endif %}
                                                    </div>
                                                    <div class="grid grid-cols-3 gap-4 text-md text-gray-600">
                                                        <div class="flex items-center space-x-2 ml-4">
                                                            <i class="fas fa-mouse-pointer text-green-600"></i>
                                                            <span><strong>Clicks:</strong> {{ domain.clicks|default:"0" }}</span>
                                                        </div>
                                                        <div class="flex items-center space-x-2">
                                                            <i class="fas fa-exclamation-circle text-red-600"></i>
                                                            <span><strong>Open Issues:</strong> {{ domain.open_issues.count }}</span>
                                                        </div>
                                                        <div class="flex items-center space-x-2">
                                                            <i class="fas fa-check-circle text-emerald-600"></i>
                                                            <span><strong>Closed Issues:</strong> {{ domain.closed_issues.count }}</span>
                                                        </div>
                                                    </div>
                                                    {% if domain.managers.exists %}
                                                        <div class="mt-4 text-md ml-4">
                                                            <strong>Managers:</strong>
                                                            <div class="flex flex-wrap mt-2">
                                                                {% for manager in domain.managers.all %}
                                                                    <span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full mr-2 mb-2">
                                                                        <i class="fas fa-user-circle mr-1"></i> {{ manager.get_full_name|default:manager.username }}
                                                                    </span>
                                                                {% endfor %}
                                                            </div>
                                                        </div>
                                                    {% endif %}
                                                    <div class="mt-4 flex space-x-3 ml-4">
                                                        {% if domain.twitter %}
                                                            <a href="https://twitter.com/{{ domain.twitter }}"
                                                               target="_blank"
                                                               class="text-white bg-blue-400 hover:bg-blue-500 px-3 py-2 rounded-md flex items-center space-x-2">
                                                                <i class="fab fa-twitter"></i>
                                                                <span>Twitter</span>
                                                            </a>
                                                        {% endif %}
                                                        {% if domain.facebook %}
                                                            <a href="{{ domain.facebook }}"
                                                               target="_blank"
                                                               class="text-white bg-blue-600 hover:bg-blue-700 px-3 py-2 rounded-md flex items-center space-x-2">
                                                                <i class="fab fa-facebook"></i>
                                                                <span>Facebook</span>
                                                            </a>
                                                        {% endif %}
                                                        {% if domain.github %}
                                                            <a href="{{ domain.github }}"
                                                               target="_blank"
                                                               class="text-white bg-gray-800 hover:bg-black px-3 py-2 rounded-md flex items-center space-x-2">
                                                                <i class="fab fa-github"></i>
                                                                <span>GitHub</span>
                                                            </a>
                                                        {% endif %}
                                                    </div>
                                                    {% if domain.tags.exists %}
                                                        <div class="mt-4 flex flex-wrap ml-4">
                                                            {% for tag in domain.tags.all %}
                                                                <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-md font-medium mr-2 mb-2">
                                                                    <i class="fas fa-tag mr-1"></i>{{ tag.name }}
                                                                </span>
                                                            {% endfor %}
                                                        </div>
                                                    {% endif %}
                                                    {% if domain.top_tester %}
                                                        <div class="mt-4 text-xl ml-4">
                                                            <i class="fas fa-user-check text-blue-600 mr-1"></i>
                                                            <strong>Top Tester:</strong> <span class="text-blue-600">{{ domain.top_tester.get_full_name|default:domain.top_tester.username }}</span>
                                                        </div>
                                                    {% endif %}
                                                    <div class="mt-4 ml-4">
                                                        <div class="flex items-center space-x-2">
                                                            <span class="text-md font-semibold">Domain Color:</span>
                                                            <div class="w-6 h-6 rounded-full border border-gray-300"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                    {% if users %}
                        <div id="users-section" class="bg-gray-50 py-12">
                            <div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-10">
                                <h2 class="text-4xl font-extrabold text-black mb-8">Users</h2>
                                <div class="space-y-6">
                                    {% for user in users %}
                                        <div class="bg-white shadow-lg rounded-xl p-6 hover:shadow-2xl transition-shadow duration-300 flex items-center">
                                            {% if user.userprofile.user_avatar %}
                                                <img src="{{ user.userprofile.user_avatar.url }}"
                                                     class="h-24 w-24 object-cover rounded-md border border-indigo-200 mr-6"
                                                     alt="{{ user.username }}"
                                                     height="96"
                                                     width="96">
                                            {% elif user.socialaccount_set.all.0.get_avatar_url %}
                                                <img src="{{ user.socialaccount_set.all.0.get_avatar_url }}"
                                                     class="h-24 w-24 object-cover rounded-full border border-indigo-200 mr-6"
                                                     alt="user image"
                                                     height="96"
                                                     width="96">
                                            {% else %}
                                                <img src="{% static 'images/dummy-user.png' %}"
                                                     class="h-24 w-24 object-cover rounded-full border border-indigo-200 mr-6"
                                                     alt="user image"
                                                     height="96"
                                                     width="96">
                                            {% endif %}
                                            <div class="flex-1">
                                                <h3 class="text-3xl font-bold text-indigo-800 flex items-center space-x-2">
                                                    <a href="{% url 'profile' slug=user.username %}"
                                                       class="hover:text-blue-600">{{ user.username }}</a>
                                                    {% if user.userprofile %}
                                                        <span class="{{ user.userprofile.get_title_display|lower }} text-base p-2">{{ user.userprofile.get_title_display }}</span>
                                                    {% endif %}
                                                </h3>
                                                <div class="mt-3 flex flex-wrap gap-4 text-md text-gray-700">
                                                    {% if user.userprofile %}
                                                        <p class="flex items-center px-3 py-2 shadow-sm">
                                                            <i class="fas fa-briefcase text-indigo-600 mr-2"></i>
                                                            <strong class="text-indigo-800">Role:</strong>
                                                            <span class="ml-1 text-indigo-700">{{ user.userprofile.role|default:"Not specified" }}</span>
                                                        </p>
                                                        <p class="flex items-center px-3 py-2 shadow-sm">
                                                            <i class="fas fa-trophy text-yellow-600 mr-2"></i>
                                                            <strong class="text-yellow-800">Points:</strong>
                                                            <span class="ml-1 text-yellow-700">{{ user.userprofile.total_score }}</span>
                                                        </p>
                                                        {% if user.userprofile.team %}
                                                            <p class="flex items-center px-3 py-2 shadow-sm">
                                                                <i class="fas fa-users text-blue-600 mr-2"></i>
                                                                <strong class="text-blue-800">Team:</strong>
                                                                <span class="ml-1 text-blue-700">{{ user.userprofile.team }}</span>
                                                            </p>
                                                        {% endif %}
                                                    {% endif %}
                                                </div>
                                                <div class="mt-4 flex flex-wrap gap-4 items-center">
                                                    {% if user.userprofile.linkedin_url %}
                                                        <a href="{{ user.userprofile.linkedin_url }}"
                                                           target="_blank"
                                                           class="text-white bg-blue-700 hover:bg-blue-800 px-3 py-2 rounded-md shadow-md transition-colors flex items-center space-x-2">
                                                            <i class="fab fa-linkedin"></i>
                                                            <span>LinkedIn</span>
                                                        </a>
                                                    {% endif %}
                                                    {% if user.userprofile.github_url %}
                                                        <a href="{{ user.userprofile.github_url }}"
                                                           target="_blank"
                                                           class="text-white bg-gray-800 hover:bg-gray-900 px-3 py-2 rounded-md shadow-md transition-colors flex items-center space-x-2">
                                                            <i class="fab fa-github"></i>
                                                            <span>GitHub</span>
                                                        </a>
                                                    {% endif %}
                                                    {% if user.userprofile.website_url %}
                                                        <a href="{{ user.userprofile.website_url }}"
                                                           target="_blank"
                                                           class="text-white bg-green-500 hover:bg-green-600 px-3 py-2 rounded-md shadow-md transition-colors flex items-center space-x-2">
                                                            <i class="fas fa-globe"></i>
                                                            <span>Website</span>
                                                        </a>
                                                    {% endif %}
                                                    {% if user.userprofile.public_key %}
                                                        <button class="text-white bg-indigo-600 hover:bg-indigo-700 px-3 py-2 rounded-md shadow-md transition-colors flex items-center space-x-2 start-chat"
                                                                data-user-id="{{ user.id }}">
                                                            <i class="fas fa-comment-alt"></i>
                                                            <span>Message</span>
                                                        </button>
                                                    {% else %}
                                                        <button class="text-white bg-gray-400 px-3 py-2 rounded-md shadow-md transition-colors flex items-center space-x-2"
                                                                data-user-id="{{ user.id }}"
                                                                disabled
                                                                title="User has not joined BLT-DMs">
                                                            <i class="fas fa-comment-alt"></i>
                                                            <span>Message</span>
                                                        </button>
                                                    {% endif %}
                                                </div>
                                                <div class="flex flex-wrap gap-4 mt-4">
                                                    {% for badge in user.badges %}
                                                        <div class="flex items-center space-x-2 bg-gray-200 rounded-md p-3">
                                                            <img src="{{ badge.badge.icon.url }}"
                                                                 alt="{{ badge.badge.title }}"
                                                                 class="w-12 h-12 object-contain"
                                                                 title="{{ badge.badge.title }}"
                                                                 height="48"
                                                                 width="48">
                                                            <span class="text-gray-700 font-medium">{{ badge.badge.title }}</span>
                                                        </div>
                                                    {% endfor %}
                                                </div>
                                                <div class="mt-2 flex flex-wrap space-x-2">
                                                    {% for tag in user.tags.all %}
                                                        <span class="bg-gradient-to-r from-indigo-100 to-indigo-200 text-indigo-800 px-3 py-1 rounded-full text-md font-semibold shadow-sm my-1">
                                                            {{ tag.name }}
                                                        </span>
                                                    {% endfor %}
                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    {% endif %}
                    {% if organizations %}
                        <div id="organizations-section" class="bg-gray-50 py-12">
                            <div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-10">
                                <h2 class="text-4xl font-extrabold text-black mb-8">Organizations</h2>
                                <div class="space-y-6">
                                    {% for organization in organizations %}
                                        <div class="bg-white shadow-lg rounded-xl p-6 hover:shadow-2xl transition-shadow duration-300">
                                            <div class="flex items-center">
                                                {% if organization.logo %}
                                                    <img class="h-24 w-24 object-cover rounded-lg border border-indigo-200 mr-6"
                                                         src="{{ organization.logo.url }}"
                                                         alt="{{ organization.name }} Logo"
                                                         height="96"
                                                         width="96">
                                                {% else %}
                                                    <div class="h-24 w-24 bg-gray-100 flex items-center justify-center rounded-lg mr-6">
                                                        <span class="text-indigo-400 font-semibold">No Logo</span>
                                                    </div>
                                                {% endif %}
                                                <div class="flex-1">
                                                    <h3 class="text-3xl font-bold text-indigo-800">
                                                        <a href="/organization/{{ organization.slug }}"
                                                           class="hover:text-blue-600">{{ organization.name }}</a>
                                                    </h3>
                                                    {% if organization.description %}
                                                        <p class="text-gray-700 mt-2 text-md">{{ organization.description|truncatechars:150 }}</p>
                                                    {% endif %}
                                                    <div class="mt-3 flex items-center space-x-4 text-md">
                                                        {% if organization.email %}
                                                            <a href="mailto:{{ organization.email }}"
                                                               class="text-white bg-blue-500 hover:bg-blue-600 px-3 py-2 rounded-md shadow-md transition-colors flex items-center space-x-2">
                                                                <i class="fas fa-envelope"></i>
                                                                <span>{{ organization.email }}</span>
                                                            </a>
                                                        {% endif %}
                                                        {% if organization.url %}
                                                            <a href="{{ organization.url }}"
                                                               target="_blank"
                                                               class="text-white bg-green-500 hover:bg-green-600 px-3 py-2 rounded-md shadow-md transition-colors flex items-center space-x-2">
                                                                <i class="fas fa-globe"></i>
                                                                <span>{{ organization.url }}</span>
                                                            </a>
                                                        {% endif %}
                                                        {% if organization.twitter %}
                                                            <a href="https://twitter.com/{{ organization.twitter }}"
                                                               target="_blank"
                                                               class="text-white bg-blue-400 hover:bg-blue-500 px-3 py-3 rounded-md shadow-md transition-colors flex items-center space-x-2">
                                                                <i class="fab fa-twitter"></i>
                                                            </a>
                                                        {% endif %}
                                                        {% if organization.facebook %}
                                                            <a href="{{ organization.facebook }}"
                                                               target="_blank"
                                                               class="text-white bg-blue-600 hover:bg-blue-700 px-3 py-3 rounded-md shadow-md transition-colors flex items-center space-x-2">
                                                                <i class="fab fa-facebook"></i>
                                                            </a>
                                                        {% endif %}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mt-6 flex justify-between items-center">
                                                <div class="text-md text-gray-600">
                                                    <strong>Type:</strong> <span class="text-blue-600">{{ organization.get_type_display }}</span>
                                                </div>
                                                <div class="text-md text-gray-600">
                                                    <strong>Team Points:</strong> <span class="text-green-600">{{ organization.team_points }}</span>
                                                </div>
                                                <div class="text-md text-gray-600">
                                                    <p class="mt-2 mb-0">
                                                        {% if organization.is_active %}
                                                            <span class="text-emerald-600 text-md font-semibold">Active</span>
                                                        {% else %}
                                                            <span class="text-red-600 text-md font-semibold">Inactive</span>
                                                        {% endif %}
                                                    </p>
                                                </div>
                                            </div>
                                            {% if organization.tags.all %}
                                                <div class="mt-2 flex flex-wrap space-x-2">
                                                    {% for tag in organization.tags.all %}
                                                        <span class="bg-gradient-to-r from-indigo-100 to-indigo-200 text-indigo-800 px-3 py-1 rounded-full text-md font-semibold shadow-sm my-1">
                                                            {{ tag.name }}
                                                        </span>
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    {% endif %}
                    {% if projects %}
                        <div id="projects-section" class="bg-gray-50 py-12">
                            <div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-10">
                                <h2 class="text-4xl font-extrabold text-gray-900 mb-8">Projects</h2>
                                <div class="space-y-6">
                                    {% for project in projects %}
                                        <div class="bg-white shadow-lg rounded-xl p-6 hover:shadow-2xl transition-shadow duration-300">
                                            <div class="flex items-center">
                                                {% if project.logo %}
                                                    <img class="h-24 w-24 object-cover rounded-lg border border-indigo-200 mr-6"
                                                         src="{{ organization.logo.url }}"
                                                         alt="{{ organization.name }} Logo"
                                                         height="96"
                                                         width="96">
                                                {% else %}
                                                    <div class="h-24 w-24 bg-gray-100 flex items-center justify-center rounded-lg mr-6">
                                                        <span class="text-gray-400 font-semibold">No Logo</span>
                                                    </div>
                                                {% endif %}
                                                <div class="flex-1">
                                                    <h3 class="text-3xl font-bold text-gray-800">
                                                        <a href="{{ project.get_absolute_url }}" class="hover:text-blue-600">{{ project.name }}</a>
                                                    </h3>
                                                    {% if project.description %}
                                                        <p class="text-gray-700 mt-2 text-md">{{ project.description|truncatechars:150 }}</p>
                                                    {% endif %}
                                                    <div class="mt-3 flex items-center space-x-4 text-md">
                                                        {% if project.url %}
                                                            <a href="{{ project.url }}"
                                                               target="_blank"
                                                               class="text-white bg-green-500 hover:bg-green-600 px-3 py-2 rounded-md shadow-md transition-colors flex items-center space-x-2">
                                                                <i class="fas fa-link"></i>
                                                                <span>{{ project.url }}</span>
                                                            </a>
                                                        {% endif %}
                                                        {% if project.twitter %}
                                                            <a href="https://twitter.com/{{ project.twitter }}"
                                                               target="_blank"
                                                               class="text-white bg-blue-400 hover:bg-blue-500 px-3 py-3 rounded-md shadow-md transition-colors flex items-center space-x-2">
                                                                <i class="fab fa-twitter"></i>
                                                            </a>
                                                        {% endif %}
                                                        {% if project.facebook %}
                                                            <a href="{{ project.facebook }}"
                                                               target="_blank"
                                                               class="text-white bg-blue-600 hover:bg-blue-700 px-3 py-3 rounded-md shadow-md transition-colors flex items-center space-x-2">
                                                                <i class="fab fa-facebook"></i>
                                                            </a>
                                                        {% endif %}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mt-4 flex items-center space-x-3">
                                                {% if project.organization %}
                                                    {% if project.organization.logo %}
                                                        <img class="h-24 w-24 object-cover rounded-lg border border-indigo-200 mr-6"
                                                             src="{{ organization.logo.url }}"
                                                             alt="{{ organization.name }} Logo"
                                                             height="96"
                                                             width="96">
                                                    {% endif %}
                                                    <h3 class="font-semibold text-gray-800">
                                                        Organization:
                                                        <span class="text-blue-600">{{ project.organization.name }}</span>
                                                    </h3>
                                                {% else %}
                                                    <h3 class="font-semibold text-gray-800">
                                                        Organization: <span class="text-gray-500">Not Assigned</span>
                                                    </h3>
                                                {% endif %}
                                            </div>
                                            <div class="mt-6 flex justify-between items-center">
                                                <div class="text-md text-gray-600">
                                                    <strong>Visits:</strong> <span class="text-blue-600">{{ project.project_visit_count }}</span>
                                                </div>
                                                <div class="text-md text-gray-600">
                                                    <strong>Created:</strong> <span class="text-green-600">{{ project.created|date:"F j, Y" }}</span>
                                                </div>
                                                <div class="text-md text-gray-600">
                                                    <strong>Modified:</strong> <span class="text-orange-600">{{ project.modified|date:"F j, Y" }}</span>
                                                </div>
                                            </div>
                                            {% if project.tags.all %}
                                                <div class="mt-2 flex flex-wrap space-x-2">
                                                    {% for tag in project.tags.all %}
                                                        <span class="bg-gradient-to-r from-gray-100 to-gray-200 text-gray-800 px-3 py-1 rounded-full text-md font-semibold shadow-sm my-1">
                                                            {{ tag.name }}
                                                        </span>
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    {% endif %}
                    {% if tags %}
                        <div class="bg-gray-50 py-12">
                            <div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-10">
                                <h2 class="text-4xl font-extrabold text-gray-900 mb-8">Tags</h2>
                                <div class="mb-6">
                                    <h2 class="text-2xl font-bold text-gray-800 mb-4">
                                        <i class="fas fa-tags text-indigo-600"></i> Tags
                                    </h2>
                                    <div class="flex flex-wrap gap-2">
                                        {% for tag in tags %}
                                            <a href="{{ tag.get_absolute_url }}"
                                               class="bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full text-md font-medium hover:bg-indigo-200">
                                                <i class="fas fa-tag"></i> {{ tag.name }}
                                            </a>
                                        {% endfor %}
                                    </div>
                                </div>
                                {% if matching_organizations %}
                                    <div class="mb-6">
                                        <h3 class="text-2xl font-semibold text-gray-800 mb-4">
                                            <i class="fas fa-building text-blue-600"></i> Matching Organizations
                                        </h3>
                                        <div class="flex flex-wrap gap-4">
                                            {% for org in matching_organizations %}
                                                <div class="bg-blue-100 text-blue-800 px-4 py-2 rounded-md shadow-md hover:shadow-lg transition-shadow flex items-center gap-3">
                                                    {% if org.logo %}
                                                        <img src="{{ org.logo.url }}"
                                                             alt="{{ org.name }} logo"
                                                             class="rounded-md"
                                                             height="32"
                                                             width="32">
                                                    {% endif %}
                                                    <a href="{{ org.absolute_url }}" class="font-medium hover:underline">{{ org.name }}</a>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                {% endif %}
                                {% if matching_domains %}
                                    <div class="mb-6">
                                        <h3 class="text-2xl font-semibold text-gray-800 mb-4">
                                            <i class="fas fa-globe text-green-600"></i> Matching Domains
                                        </h3>
                                        <div class="flex flex-wrap gap-4">
                                            {% for domain in matching_domains %}
                                                <div class="bg-green-100 text-green-800 px-4 py-2 rounded-md shadow-md hover:shadow-lg transition-shadow flex items-center gap-3">
                                                    {% if domain.logo %}
                                                        <img src="{{ domain.logo.url }}"
                                                             alt="{{ domain.name }} logo"
                                                             class="rounded-md"
                                                             height="32"
                                                             width="32">
                                                    {% endif %}
                                                    <a href="{{ domain.get_absolute_url }}"
                                                       class="font-medium hover:underline">{{ domain.name }}</a>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                {% endif %}
                                {% if matching_issues %}
                                    <div class="mb-6">
                                        <h3 class="text-2xl font-semibold text-gray-800 mb-4">
                                            <i class="fas fa-exclamation-circle text-red-600"></i> Matching Issues
                                        </h3>
                                        <div class="flex flex-wrap gap-4">
                                            {% for issue in matching_issues %}
                                                <div class="bg-red-100 text-red-800 px-4 py-2 rounded-md shadow-md hover:shadow-lg transition-shadow flex items-center gap-3">
                                                    {% if issue.logo %}
                                                        <img src="{{ issue.logo.url }}"
                                                             alt="{{ issue.description }} logo"
                                                             class="rounded-md"
                                                             height="32"
                                                             width="32">
                                                    {% endif %}
                                                    <a href="{{ issue.get_absolute_url }}"
                                                       class="font-medium hover:underline">{{ issue.description }}</a>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                {% endif %}
                                {% if matching_user_profiles %}
                                    <div class="mb-6">
                                        <h3 class="text-2xl font-semibold text-gray-800 mb-4">
                                            <i class="fas fa-user text-yellow-600"></i> Matching User Profiles
                                        </h3>
                                        <div class="flex flex-wrap gap-4">
                                            {% for profile in matching_user_profiles %}
                                                <div class="bg-yellow-100 text-yellow-800 px-4 py-2 rounded-md shadow-md hover:shadow-lg transition-shadow flex items-center gap-3">
                                                    {% if profile.user_avatar %}
                                                        <img src="{{ profile.user_avatar.url }}"
                                                             alt="{{ profile.user.username }}"
                                                             class="rounded-md"
                                                             height="32"
                                                             width="32">
                                                    {% else %}
                                                        <img src="{% gravatar_url profile.user.email 200 %}"
                                                             class="rounded-md"
                                                             alt="avatar"
                                                             width="32"
                                                             height="32">
                                                    {% endif %}
                                                    <a href="{% url 'profile' slug=profile.user.username %}"
                                                       class="font-medium hover:underline">{{ profile.user.username }}</a>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                {% endif %}
                                {% if matching_repos %}
                                    <div>
                                        <h3 class="text-2xl font-semibold text-gray-800 mb-4">
                                            <i class="fas fa-code-branch text-purple-600"></i> Matching Repositories
                                        </h3>
                                        <div class="flex flex-wrap gap-4">
                                            {% for repo in matching_repos %}
                                                <div class="bg-purple-300 text-purple-800 px-4 py-2 rounded-full shadow-md hover:shadow-lg transition-shadow">
                                                    <a href="{{ repo.repo_url }}" class="font-medium hover:underline">{{ repo.name }}</a>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}
                    {% if repos %}
                        <div id="repos-section" class="bg-gray-50 py-12">
                            <div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-10">
                                <h2 class="text-4xl font-extrabold text-black mb-8">Repositories</h2>
                                <div class="space-y-6">
                                    {% for repo in repos %}
                                        <div class="bg-white shadow-lg rounded-xl p-6 hover:shadow-2xl transition-shadow duration-300">
                                            <div class="flex items-center">
                                                {% if repo.logo_url %}
                                                    <img class="h-24 w-24 object-cover rounded-lg border border-indigo-200 mr-6"
                                                         src="{{ repo.logo_url }}"
                                                         alt="{{ repo.name }} Logo"
                                                         height="96"
                                                         width="96">
                                                {% else %}
                                                    <div class="h-24 w-24 bg-gray-100 flex items-center justify-center rounded-lg mr-6">
                                                        <span class="text-indigo-400 font-semibold">No Logo</span>
                                                    </div>
                                                {% endif %}
                                                <div class="flex-1">
                                                    <h3 class="text-3xl font-bold text-indigo-800 flex items-center gap-3">
                                                        <a href="{% url 'repo_detail' repo.slug %}" class="hover:text-[#e74c3c]">{{ repo.name }}</a>
                                                        <a href="{{ repo.repo_url }}"
                                                           target="_blank"
                                                           class="text-gray-600 hover:text-[#e74c3c] text-2xl">
                                                            <i class="fab fa-github"></i>
                                                        </a>
                                                    </h3>
                                                    {% if repo.description %}<p class="text-gray-700 mt-2 text-md">{{ repo.description|truncatechars:150 }}</p>{% endif %}
                                                    <div class="mt-3 flex items-center space-x-4 text-md">
                                                        {% if repo.primary_language %}
                                                            <span class="text-gray-800 bg-purple-200 px-3 py-1 rounded-full">{{ repo.primary_language }}</span>
                                                        {% endif %}
                                                        {% if repo.stars %}
                                                            <span class="text-yellow-500 flex items-center space-x-2">
                                                                <i class="fas fa-star"></i>
                                                                <span>{{ repo.stars }}</span>
                                                            </span>
                                                        {% endif %}
                                                        {% if repo.forks %}
                                                            <span class="text-blue-500 flex items-center space-x-2">
                                                                <i class="fas fa-code-branch"></i>
                                                                <span>{{ repo.forks }}</span>
                                                            </span>
                                                        {% endif %}
                                                        {% if repo.open_issues %}
                                                            <span class="text-red-500 flex items-center space-x-2">
                                                                <i class="fas fa-exclamation-circle"></i>
                                                                <span>{{ repo.open_issues }}</span>
                                                            </span>
                                                        {% endif %}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mt-6 flex justify-between items-center">
                                                <div class="text-md text-gray-600">
                                                    <i class="fas fa-calendar-alt mr-2"></i>
                                                    <strong>Last Updated:</strong>
                                                    <span class="text-blue-600">{{ repo.last_updated|date:"d M Y, H:i" }}</span>
                                                </div>
                                                <div class="text-md text-gray-600">
                                                    <i class="fas fa-file-alt mr-2"></i>
                                                    <strong>License:</strong>
                                                    <span class="text-green-600">{{ repo.license }}</span>
                                                </div>
                                                <div class="text-md text-gray-600">
                                                    <i class="fas fa-eye mr-2"></i>
                                                    <strong>Visits:</strong>
                                                    <span class="text-blue-600">{{ repo.repo_visit_count }}</span>
                                                </div>
                                            </div>
                                            {% if repo.tags.all %}
                                                <div class="mt-2 flex flex-wrap space-x-2">
                                                    {% for tag in repo.tags.all %}
                                                        <span class="bg-gradient-to-r from-indigo-100 to-indigo-200 text-indigo-800 px-3 py-1 rounded-full text-md font-semibold shadow-sm my-1">
                                                            {{ tag.name }}
                                                        </span>
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    {% endif %}
                    {% if not issues and not domains and not users and not organizations and not projects and not tags and not repos %}
                        <div class="row">
                            <div class="col-12">
                                <div class="alert alert-warning text-center" role="alert">Nothing Found!</div>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    {% endif %}
    <script>
    function scrollToSection(sectionId) {
        const section = document.getElementById(sectionId);
        if (section) {
            section.scrollIntoView({ 
                behavior: 'smooth',
                block: 'start'
            });
        }
    }
document.addEventListener("DOMContentLoaded", function () {
    const messageButtons = document.querySelectorAll(".start-chat");
    console.log(messageButtons)
    messageButtons.forEach(button => {
        button.addEventListener("click", function () {
            const userId = this.getAttribute("data-user-id");

            fetch(`/messaging/start-thread/${userId}/`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRFToken": getCookie("csrftoken")
                },
                body: JSON.stringify({})
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    window.location.href = `/messaging/?thread=${data.thread_id}`;
                } else {
                    alert("Error starting chat.");
                }
            })
            .catch(error => console.error("Error:", error));
        });
    });

    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.startsWith(name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
});
    </script>
{% endblock content %}