{% extends "base.html" %}
{% load static %}
{% load gravatar %}
{% load custom_tags %}
{% block title %}Home - Bug Logging Tool{% endblock %}
{% block description %}
    Welcome to OWASP {% env 'PROJECT_NAME' %}, a platform to report bugs, earn rewards, and help secure the web through community-driven collaboration.
{% endblock %}
{% block keywords %}
    Bug Logging Tool, OWASP, security, bug reporting, rewards, open source, community, web security, contributions
{% endblock %}
{% block og_title %}Home - Bug Logging Tool{% endblock %}
{% block og_description %}
    Welcome to OWASP {% env 'PROJECT_NAME' %}, a platform to report bugs, earn rewards, and help secure the web through community-driven collaboration.
{% endblock %}
{% block content %}
    <!-- Include Sidebar -->
    {% include "includes/sidenav.html" %}
    {% if debug_mode %}
        <!-- Local Mode Panel -->
        <div id="dev-panel"
             class="bg-gray-900 text-white p-4 mb-4 rounded-lg shadow-lg max-w-7xl mx-auto mt-4">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <i class="fas fa-code text-[#e74c3c] mr-2"></i>
                    <h2 class="text-xl font-bold">Local Mode</h2>
                    <span class="ml-2 px-2 py-1 bg-[#e74c3c] text-white text-xs rounded-full">DEBUG=True</span>
                </div>
                <button id="toggle-dev-panel" class="text-gray-400 hover:text-white">
                    <i class="fas fa-chevron-up"></i>
                </button>
            </div>
            <div id="dev-panel-content">
                <!-- System Stats -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                    <div class="bg-gray-800 p-3 rounded-lg">
                        <h3 class="text-sm font-semibold text-gray-400 mb-1">System Stats</h3>
                        <ul class="text-sm">
                            <li class="flex justify-between py-1 border-b border-gray-700">
                                <span>Memory Usage:</span>
                                <span class="font-mono">{{ system_stats.memory_usage }}</span>
                            </li>
                            <li class="flex justify-between py-1 border-b border-gray-700">
                                <span>CPU Usage:</span>
                                <span class="font-mono">{{ system_stats.cpu_percent }}</span>
                            </li>
                            <li class="flex justify-between py-1 border-b border-gray-700">
                                <span>Python Version:</span>
                                <span class="font-mono text-xs">{{ system_stats.python_version|truncatechars:20 }}</span>
                            </li>
                            <li class="flex justify-between py-1 border-b border-gray-700">
                                <span>Django Version:</span>
                                <span class="font-mono">{{ system_stats.django_version }}</span>
                            </li>
                            <li class="flex justify-between py-1">
                                <span>DB Connections:</span>
                                <span class="font-mono">{{ system_stats.db_connections }}</span>
                            </li>
                        </ul>
                    </div>
                    <div class="bg-gray-800 p-3 rounded-lg">
                        <h3 class="text-sm font-semibold text-gray-400 mb-1">Database Stats</h3>
                        <ul class="text-sm">
                            <li class="flex justify-between py-1 border-b border-gray-700">
                                <span>Users:</span>
                                <span id="user-count" class="font-mono">Loading...</span>
                            </li>
                            <li class="flex justify-between py-1 border-b border-gray-700">
                                <span>Issues:</span>
                                <span id="issue-count" class="font-mono">Loading...</span>
                            </li>
                            <li class="flex justify-between py-1 border-b border-gray-700">
                                <span>Organizations:</span>
                                <span id="org-count" class="font-mono">Loading...</span>
                            </li>
                            <li class="flex justify-between py-1 border-b border-gray-700">
                                <span>Domains:</span>
                                <span id="domain-count" class="font-mono">Loading...</span>
                            </li>
                            <li class="flex justify-between py-1">
                                <span>Repositories:</span>
                                <span id="repo-count" class="font-mono">Loading...</span>
                            </li>
                        </ul>
                    </div>
                    <div class="bg-gray-800 p-3 rounded-lg">
                        <h3 class="text-sm font-semibold text-gray-400 mb-1">Cache Stats</h3>
                        <ul class="text-sm">
                            <li class="flex justify-between py-1 border-b border-gray-700">
                                <span>Cache Backend:</span>
                                <span id="cache-backend" class="font-mono">Loading...</span>
                            </li>
                            <li class="flex justify-between py-1 border-b border-gray-700">
                                <span>Cache Keys:</span>
                                <span id="cache-keys" class="font-mono">Loading...</span>
                            </li>
                            <li class="flex justify-between py-1">
                                <span>Cache Hit Ratio:</span>
                                <span id="cache-hit-ratio" class="font-mono">Loading...</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- Action Buttons -->
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <button id="populate-data-btn"
                            class="bg-[#e74c3c] hover:bg-[#c0392b] text-white py-2 px-4 rounded-lg flex items-center justify-center">
                        <i class="fas fa-database mr-2"></i>
                        Populate Test Data
                    </button>
                    <button id="clear-cache-btn"
                            class="bg-[#e74c3c] hover:bg-[#c0392b] text-white py-2 px-4 rounded-lg flex items-center justify-center">
                        <i class="fas fa-broom mr-2"></i>
                        Clear Cache
                    </button>
                    <button id="check-performance-btn"
                            class="bg-[#e74c3c] hover:bg-[#c0392b] text-white py-2 px-4 rounded-lg flex items-center justify-center">
                        <i class="fas fa-tachometer-alt mr-2"></i>
                        Check Performance
                    </button>
                    <button id="sync-github-btn"
                            class="bg-[#e74c3c] hover:bg-[#c0392b] text-white py-2 px-4 rounded-lg flex items-center justify-center">
                        <i class="fab fa-github mr-2"></i>
                        Sync GitHub Data
                    </button>
                </div>
                <!-- Status Messages -->
                <div id="dev-status-messages" class="mt-4 hidden">
                    <div class="bg-gray-800 p-3 rounded-lg">
                        <h3 class="text-sm font-semibold text-gray-400 mb-1">Status</h3>
                        <div id="dev-status-content"
                             class="text-sm font-mono bg-black p-2 rounded h-32 overflow-y-auto"></div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
    <!-- Main Content -->
    <div class="relative mt-9">
        <!-- Hero Section -->
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
            <h1 class="text-4xl font-bold mb-5 text-black/90">OWASP BLT: Secure the Web, Get Rewarded</h1>
            <p class="text-lg mb-4 text-black/80">
                Strengthen <span class="font-bold">worldwide applications</span> by <span class="font-bold">finding and fixing security & coding issues</span> through <span class="font-bold">bug bounties and issue rewards.</span> Earn <span class="font-bold">money via GitHub Sponsors & BCH</span> and get recognized with <span class="font-bold">BACON</span>, the first open-source security token on Bitcoin Runes.
            </p>
        </div>
        <!-- Features Section -->
        <section class="py-1">
            <div class="max-w-7xl mx-auto">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <!-- Feature 1 -->
                    <div class="text-center">
                        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-50 mb-3 shadow-sm hover:shadow-md transition-all duration-200">
                            <i class="fas fa-shield-virus fa-2xl text-[#e74c3c]"></i>
                        </div>
                        <h3 class="text-lg font-semibold mb-1">Protect Applications</h3>
                        <p class="text-sm text-gray-600">Safeguard your applications from security vulnerabilities.</p>
                    </div>
                    <!-- Feature 2 -->
                    <div class="text-center">
                        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-50 mb-3 shadow-sm hover:shadow-md transition-all duration-200">
                            <i class="fas fa-hand-holding-usd fa-2xl text-[#e74c3c]"></i>
                        </div>
                        <h3 class="text-lg font-semibold mb-1">Earn Rewards</h3>
                        <p class="text-sm text-gray-600">Get rewarded for your security findings.</p>
                        <a href="{% url 'hunts' %}"
                           class="inline-block mt-3 text-[#e74c3c] hover:text-[#c0392b] font-medium text-sm">
                            <span class="flex items-center gap-1">
                                View Bounties
                                <i class="fas fa-arrow-right transition-transform group-hover:translate-x-1"></i>
                            </span>
                        </a>
                    </div>
                    <!-- Feature 3 -->
                    <div class="text-center">
                        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-50 mb-3 shadow-sm hover:shadow-md transition-all duration-200">
                            <i class="fas fa-robot fa-2xl text-[#e74c3c]"></i>
                        </div>
                        <h3 class="text-lg font-semibold mb-1">Automate Security</h3>
                        <p class="text-sm text-gray-600">Streamline your security workflows.</p>
                    </div>
                    <!-- New Education Feature -->
                    <div class="text-center">
                        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-50 mb-3 shadow-sm hover:shadow-md transition-all duration-200">
                            <i class="fas fa-graduation-cap fa-2xl text-[#e74c3c]"></i>
                        </div>
                        <div class="relative">
                            <span class="absolute -top-1 right-0 inline-flex items-center px-2 py-0.5 text-xs font-medium bg-[#e74c3c] text-white rounded-full animate-pulse">NEW</span>
                            <h3 class="text-lg font-semibold mb-1">Learn & Grow</h3>
                        </div>
                        <p class="text-sm text-gray-600">Access expert-led security courses.</p>
                        <a href="{% url 'education' %}"
                           class="inline-block mt-3 text-[#e74c3c] hover:text-[#c0392b] font-medium text-sm">
                            <span class="flex items-center gap-1">
                                Start Learning
                                <i class="fas fa-arrow-right transition-transform group-hover:translate-x-1"></i>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </section>
        <!-- Decorative Divider -->
        <div class="max-w-7xl mx-auto px-4 py-8">
            <div class="flex items-center justify-center">
                <div class="flex-grow h-px bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
                <div class="mx-4">
                    <i class="fas fa-code-branch text-2xl text-[#e74c3c]"></i>
                </div>
                <div class="flex-grow h-px bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
            </div>
        </div>
        <!-- Project Cards Section -->
        <section class="py-6">
            <div class="max-w-7xl mx-auto px-4">
                <div class=" mb-8">
                    <div class="flex items-center gap-4">
                        <i class="fas fa-code-branch text-2xl text-[#e74c3c]"></i>
                        <h2 class="text-3xl font-bold">Our Components</h2>
                        <div class="flex-grow h-px bg-gradient-to-r from-gray-300 to-transparent"></div>
                    </div>
                    <p class="text-gray-600 text-base max-w-9xl mx-auto mt-3">
                        Four key components power OWASP BLT. The core, mobile access, browser integration, and automation—working together to secure applications worldwide.
                    </p>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                    <!-- Core Card -->
                    <div class="bg-white rounded-xl shadow-md p-6 flex flex-col">
                        <div class="flex items-center gap-3 mb-4">
                            <i class="fas fa-shield-alt text-2xl text-[#e74c3c]"></i>
                            <h4 class="font-bold text-lg">
                                <a href="{% url 'repo_detail' 'blt' %}"
                                   class="hover:text-[#e74c3c] transition-colors">Django Core</a>
                            </h4>
                        </div>
                        <p class="text-gray-600 text-sm mb-4 flex-grow">The main engine powering OWASP BLT's system API and Slack Bot.</p>
                        <div class="flex flex-col gap-2">
                            <a href="https://github.com/OWASP-BLT/BLT"
                               target="_blank"
                               class="inline-flex items-center text-gray-700 border border-gray-300 px-4 py-2 rounded-md hover:bg-gray-50 transition-colors">
                                <i class="fab fa-github mr-2"></i><i class="fas fa-star text-yellow-400 mr-2"></i> Star
                                {% for repo in repo_stars %}
                                    {% if repo.key == 'blt' %}
                                        <span class="ml-2 bg-gray-100 px-2 py-0.5 rounded-full text-sm">{{ repo.stars }}</span>
                                    {% endif %}
                                {% endfor %}
                            </a>
                            <a href="{% url 'report' %}"
                               class="inline-flex select-none items-center justify-center px-3 py-2 text-red-500 border-2 border-red-500 rounded-lg hover:bg-red-500 hover:text-white font-medium transition-colors duration-200">
                                <i class="fas fa-bug mr-2"></i> Report a Bug
                            </a>
                        </div>
                    </div>
                    <!-- App Card -->
                    <div class="bg-white rounded-xl shadow-md p-6 flex flex-col">
                        <div class="flex items-center gap-3 mb-4">
                            <i class="fas fa-mobile-alt text-2xl text-[#e74c3c]"></i>
                            <h4 class="font-bold text-lg">
                                <a href="{% url 'repo_detail' 'blt-flutter' %}"
                                   class="hover:text-[#e74c3c] transition-colors">Flutter iOS App</a>
                            </h4>
                        </div>
                        <p class="text-gray-600 text-sm mb-4 flex-grow">Mobile application for on-the-go bug reporting and management.</p>
                        <div class="flex flex-col gap-2">
                            <a href="https://github.com/OWASP-BLT/BLT-Flutter"
                               target="_blank"
                               class="inline-flex items-center text-gray-700 border border-gray-300 px-4 py-2 rounded-md hover:bg-gray-50 transition-colors">
                                <i class="fab fa-github mr-2"></i><i class="fas fa-star text-yellow-400 mr-2"></i> Star
                                {% for repo in repo_stars %}
                                    {% if repo.key == 'flutter' %}
                                        <span class="ml-2 bg-gray-100 px-2 py-0.5 rounded-full text-sm">{{ repo.stars }}</span>
                                    {% endif %}
                                {% endfor %}
                            </a>
                            <a href="#"
                               class="inline-flex select-none items-center justify-center px-3 py-2 text-red-500 border-2 border-red-500 rounded-lg hover:bg-red-500 hover:text-white font-medium transition-colors duration-200">
                                <i class="fab fa-apple mr-2"></i> Download App
                            </a>
                        </div>
                    </div>
                    <!-- Extension Card -->
                    <div class="bg-white rounded-xl shadow-md p-6 flex flex-col">
                        <div class="flex items-center gap-3 mb-4">
                            <i class="fas fa-puzzle-piece text-2xl text-[#e74c3c]"></i>
                            <h4 class="font-bold text-lg">
                                <a href="{% url 'repo_detail' 'blt-extension' %}"
                                   class="hover:text-[#e74c3c] transition-colors">Chrome Extension</a>
                            </h4>
                        </div>
                        <p class="text-gray-600 text-sm mb-4 flex-grow">Browser extension for quick bug reporting and screenshots.</p>
                        <div class="flex flex-col gap-2">
                            <a href="https://github.com/OWASP-BLT/BLT-Extension"
                               target="_blank"
                               class="inline-flex items-center text-gray-700 border border-gray-300 px-4 py-2 rounded-md hover:bg-gray-50 transition-colors">
                                <i class="fab fa-github mr-2"></i><i class="fas fa-star text-yellow-400 mr-2"></i> Star
                                {% for repo in repo_stars %}
                                    {% if repo.key == 'extension' %}
                                        <span class="ml-2 bg-gray-100 px-2 py-0.5 rounded-full text-sm">{{ repo.stars }}</span>
                                    {% endif %}
                                {% endfor %}
                            </a>
                            <a href="#"
                               class="inline-flex select-none items-center justify-center px-3 py-2 text-red-500 border-2 border-red-500 rounded-lg hover:bg-red-500 hover:text-white font-medium transition-colors duration-200">
                                <i class="fab fa-chrome mr-2"></i> Install Extension
                            </a>
                        </div>
                    </div>
                    <!-- Action Card -->
                    <div class="bg-white rounded-xl shadow-md p-6 flex flex-col">
                        <div class="flex items-center gap-3 mb-4">
                            <i class="fas fa-bolt text-2xl text-[#e74c3c]"></i>
                            <h4 class="font-bold text-lg">
                                <a href="{% url 'repo_detail' 'blt-action' %}"
                                   class="hover:text-[#e74c3c] transition-colors">GitHub Action</a>
                            </h4>
                        </div>
                        <p class="text-gray-600 text-sm mb-4 flex-grow">GitHub Action for automated security checks and reporting.</p>
                        <div class="flex flex-col gap-2">
                            <a href="https://github.com/OWASP-BLT/BLT-Action"
                               target="_blank"
                               class="inline-flex items-center text-gray-700 border border-gray-300 px-4 py-2 rounded-md hover:bg-gray-50 transition-colors">
                                <i class="fab fa-github mr-2"></i><i class="fas fa-star text-yellow-400 mr-2"></i> Star
                                {% for repo in repo_stars %}
                                    {% if repo.key == 'action' %}
                                        <span class="ml-2 bg-gray-100 px-2 py-0.5 rounded-full text-sm">{{ repo.stars }}</span>
                                    {% endif %}
                                {% endfor %}
                            </a>
                            <a href="#"
                               class="inline-flex select-none items-center justify-center px-3 py-2 text-red-500 border-2 border-red-500 rounded-lg hover:bg-red-500 hover:text-white font-medium transition-colors duration-200">
                                <i class="fas fa-code-branch mr-2"></i> Use Latest
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Referral Program Card -->
        {% if user.is_authenticated %}
            <div class="max-w-7xl mx-auto px-4 mb-8">
                <div class="bg-white rounded-xl shadow-lg p-6 border border-[#e74c3c]">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="p-3 bg-red-50 rounded-lg">
                            <i class="fas fa-users text-[#e74c3c] text-2xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold">Referral Program</h3>
                            <p class="text-gray-600">Invite friends to join BLT and earn points!</p>
                        </div>
                    </div>
                    <div class="flex items-center gap-4 mb-4">
                        <div class="flex-1">
                            <input type="text"
                                   id="referralLink"
                                   value="https://{{ request.get_host }}{% url 'referral_signup' %}?ref={{ referral_code }}"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-gray-50"
                                   readonly>
                        </div>
                        <button onclick="copyReferralLink()"
                                class="px-4 py-2 bg-[#e74c3c] text-white rounded-lg hover:bg-[#c0392b] transition-colors">
                            <i class="fas fa-copy mr-2"></i>Copy Link
                        </button>
                    </div>
                    <div class="text-sm text-gray-600">
                        <p>
                            <i class="fas fa-check-circle text-green-500 mr-2"></i>Earn 2 points for each friend who joins
                        </p>
                        <p>
                            <i class="fas fa-check-circle text-green-500 mr-2"></i>Track clicks and successful signups
                        </p>
                        <p>
                            <i class="fas fa-check-circle text-green-500 mr-2"></i>Compete on the referral leaderboard
                        </p>
                    </div>
                </div>
            </div>
        {% else %}
            <div class="max-w-7xl mx-auto px-4 mb-8">
                <div class="bg-white rounded-xl shadow-lg p-6 border border-[#e74c3c]">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="p-3 bg-red-50 rounded-lg">
                            <i class="fas fa-users text-[#e74c3c] text-2xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold">Join Our Referral Program</h3>
                            <p class="text-gray-600">Sign in to get your referral link and start earning points!</p>
                        </div>
                    </div>
                    <div class="flex justify-center">
                        <a href="{% url 'account_login' %}?next={{ request.path }}"
                           class="px-4 py-2 bg-[#e74c3c] text-white rounded-lg hover:bg-[#c0392b] hover:text-white transition-colors">
                            <i class="fas fa-sign-in-alt mr-2"></i>Sign In to Participate
                        </a>
                    </div>
                </div>
            </div>
        {% endif %}
        <!-- Leaderboard Section -->
        <section class="py-12 bg-gray-50">
            <div class="max-w-7xl mx-auto px-4">
                <div class="text-center mb-12">
                    <h2 class="text-3xl font-bold mb-4">Community Leaderboards</h2>
                    <div class="inline-flex items-center justify-center px-6 py-3 bg-white rounded-full shadow-md mb-8">
                        <i class="fas fa-trophy text-[#e74c3c] mr-3"></i>
                        <span class="text-xl font-bold">Total Bounties Earned: $155</span>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <!-- Top Earners -->
                    <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
                        <div class="p-4 border-b border-gray-200 bg-[#e74c3c] text-white">
                            <div class="flex items-center justify-between">
                                <h3 class="text-lg font-bold">Top Earners</h3>
                                <i class="fas fa-dollar-sign"></i>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="space-y-4">
                                {% for profile in top_earners %}
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center gap-3">
                                            <span class="text-[#e74c3c] font-bold">{{ forloop.counter }}</span>
                                            {% if profile.avatar %}
                                                <img src="{{ profile.avatar }}"
                                                     class="w-8 h-8 rounded-full"
                                                     alt="{{ profile.user.username }}'s avatar"
                                                     width="32"
                                                     height="32">
                                            {% elif profile.user.socialaccount_set.all.0.get_avatar_url %}
                                                <img src="{{ profile.user.socialaccount_set.all.0.get_avatar_url }}"
                                                     class="w-8 h-8 rounded-full"
                                                     alt="{{ profile.user.username }}'s avatar"
                                                     width="32"
                                                     height="32">
                                            {% else %}
                                                <img src="{% gravatar_url profile.user.email 50 %}"
                                                     class="w-8 h-8 rounded-full"
                                                     alt="{{ profile.user.username }}'s avatar"
                                                     width="32"
                                                     height="32">
                                            {% endif %}
                                            <a href="{% url 'profile' profile.user.username %}"
                                               class="font-medium hover:text-[#e74c3c]">{{ profile.user.username }}</a>
                                        </div>
                                        <span class="text-green-600 font-medium">${{ profile.winnings|floatformat:2 }}</span>
                                    </div>
                                {% empty %}
                                    <div class="text-center text-gray-500">
                                        <p>No earnings recorded yet</p>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    <!-- Top Bug Reporters -->
                    <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
                        <div class="p-4 border-b border-gray-200 bg-[#e74c3c] text-white">
                            <div class="flex items-center justify-between">
                                <h3 class="text-lg font-bold">Top Bug Reporters</h3>
                                <i class="fas fa-bug"></i>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="space-y-4">
                                {% for user in top_bug_reporters %}
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center gap-3">
                                            <span class="text-[#e74c3c] font-bold">{{ forloop.counter }}</span>
                                            <a href="{% url 'profile' user.username %}"
                                               class="text-sm hover:text-[#e74c3c] font-medium flex items-center gap-2">
                                                {% if user.userprofile.avatar %}
                                                    <img src="{{ user.userprofile.avatar }}"
                                                         alt="{{ user.username }}'s avatar"
                                                         width="24"
                                                         height="24"
                                                         class="w-6 h-6 rounded-full">
                                                {% elif user.socialaccount_set.all.0.get_avatar_url %}
                                                    <img src="{{ user.socialaccount_set.all.0.get_avatar_url }}"
                                                         alt="{{ user.username }}'s avatar"
                                                         width="24"
                                                         height="24"
                                                         class="w-6 h-6 rounded-full">
                                                {% else %}
                                                    <img src="{% gravatar_url user.email 50 %}"
                                                         alt="{{ user.username }}'s avatar"
                                                         width="24"
                                                         height="24"
                                                         class="w-6 h-6 rounded-full">
                                                {% endif %}
                                                {{ user.username }}
                                            </a>
                                        </div>
                                        <span class="text-sm text-gray-500">{{ user.bug_count }} bugs</span>
                                    </div>
                                {% empty %}
                                    <div class="text-center text-gray-500">
                                        <p>No bug reports yet</p>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    <!-- Top PR Contributors -->
                    <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
                        <div class="p-4 border-b border-gray-200 bg-[#e74c3c] text-white">
                            <div class="flex items-center justify-between">
                                <h3 class="text-lg font-bold">TOP BLT PRs - {{ current_time|date:"M" }}</h3>
                                <i class="fas fa-code-branch"></i>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="space-y-4">
                                {% for user in top_pr_contributors %}
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center gap-3">
                                            <span class="text-[#e74c3c] font-bold">{{ forloop.counter }}</span>
                                            <a href="{{ user.contributor__github_url }}"
                                               target="_blank"
                                               class="text-sm hover:text-[#e74c3c] font-medium flex items-center gap-2">
                                                {% if user.contributor__avatar_url %}
                                                    <img src="{{ user.contributor__avatar_url }}"
                                                         alt="{{ user.contributor__name }}'s avatar"
                                                         width="24"
                                                         height="24"
                                                         class="w-6 h-6 rounded-full"
                                                         onerror="this.src='{% static 'images/dummy-user.png' %}'">
                                                {% else %}
                                                    <img src="{% static 'images/dummy-user.png' %}"
                                                         alt="{{ user.contributor__name }}'s avatar"
                                                         width="24"
                                                         height="24"
                                                         class="w-6 h-6 rounded-full">
                                                {% endif %}
                                                {{ user.contributor__name }}
                                            </a>
                                        </div>
                                        <span class="text-sm text-gray-500">{{ user.total_prs }} PRs</span>
                                    </div>
                                {% empty %}
                                    <div class="text-center text-gray-500">
                                        <p>No BLT PRs for {{ current_time|date:"F Y" }}</p>
                                        <a href="https://github.com/OWASP-BLT/BLT/pulls"
                                           target="_blank"
                                           class="text-[#e74c3c] hover:underline text-sm mt-2 inline-block">
                                            <i class="fas fa-external-link-alt mr-1"></i>View PRs on GitHub
                                        </a>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    <!-- Top Referrals -->
                    <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
                        <div class="p-4 border-b border-gray-200 bg-[#e74c3c] text-white">
                            <div class="flex items-center justify-between">
                                <h3 class="text-lg font-bold">Top Referrals</h3>
                                <i class="fas fa-user-plus"></i>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="space-y-4">
                                {% for invite in top_referrals %}
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center gap-3">
                                            <span class="text-[#e74c3c] font-bold">{{ forloop.counter }}</span>
                                            {% if invite.sender.userprofile.avatar %}
                                                <img src="{{ invite.sender.userprofile.avatar }}"
                                                     class="w-8 h-8 rounded-full"
                                                     alt="{{ invite.sender.username }}'s avatar"
                                                     width="32"
                                                     height="32">
                                            {% elif invite.sender.socialaccount_set.all.0.get_avatar_url %}
                                                <img src="{{ invite.sender.socialaccount_set.all.0.get_avatar_url }}"
                                                     class="w-8 h-8 rounded-full"
                                                     alt="{{ invite.sender.username }}'s avatar"
                                                     width="32"
                                                     height="32">
                                            {% else %}
                                                <img src="{% gravatar_url invite.sender.email 50 %}"
                                                     class="w-8 h-8 rounded-full"
                                                     alt="{{ invite.sender.username }}'s avatar"
                                                     width="32"
                                                     height="32">
                                            {% endif %}
                                            <a href="{% url 'profile' invite.sender.username %}"
                                               class="font-medium hover:text-[#e74c3c]">
                                                {{ invite.sender.username }}
                                            </a>
                                        </div>
                                        <div class="flex items-center">
                                            <span class="text-sm text-gray-500 mr-3">
                                                <i class="fas fa-star text-yellow-400 mr-1"></i>
                                                {{ invite.point_by_referral }} pts
                                            </span>
                                            <span class="font-medium">
                                                <i class="fas fa-user-check text-green-500 mr-1"></i>
                                                {{ invite.signup_count }}
                                            </span>
                                        </div>
                                    </div>
                                {% empty %}
                                    <div class="text-center text-gray-500">
                                        <p>No referrals recorded yet</p>
                                        <a href="{% url 'invite' %}"
                                           class="text-[#e74c3c] hover:text-[#c0392b] font-medium mt-2 inline-block">
                                            <i class="fas fa-plus-circle mr-1"></i>
                                            Invite friends
                                        </a>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Decorative Divider -->
        <div class="max-w-7xl mx-auto px-4 py-8">
            <div class="flex items-center justify-center">
                <div class="flex-grow h-px bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
                <div class="mx-4">
                    <i class="fas fa-chart-line text-2xl text-[#e74c3c]"></i>
                </div>
                <div class="flex-grow h-px bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
            </div>
        </div>
        <!-- Latest Activity Section -->
        <section class="py-12">
            <div class="max-w-7xl mx-auto px-4">
                <h2 class="text-3xl font-bold text-center mb-12">Latest Activity</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
                    <!-- Latest Repositories -->
                    <div class="bg-white rounded-lg shadow-lg border-2 border-[#e74c3c] overflow-hidden">
                        <div class="p-6">
                            <div class="flex justify-between items-center mb-6">
                                <h3 class="text-xl font-semibold text-gray-800">Latest Repositories</h3>
                                <span class="text-sm text-gray-500">({{ total_repos }} total)</span>
                            </div>
                            <div class="space-y-4">
                                {% for repo in latest_repos %}
                                    <div class="flex items-center justify-between">
                                        <a href="{% url 'repo_detail' repo.slug %}"
                                           class="text-sm hover:text-[#e74c3c] truncate max-w-[280px]">{{ repo.name }}</a>
                                        <span class="text-xs text-gray-500">{{ repo.primary_language|default:"-" }}</span>
                                    </div>
                                {% endfor %}
                            </div>
                            <div class="flex justify-between mt-6 pt-4 border-t border-gray-100">
                                <a href="{% url 'repo_list' %}"
                                   class="text-sm text-[#e74c3c] hover:text-[#c0392b] font-medium">View All</a>
                                <a href="{% url 'repo_list' %}"
                                   class="text-sm text-[#e74c3c] hover:text-[#c0392b] font-medium flex items-center">
                                    <svg class="w-4 h-4 mr-1"
                                         viewBox="0 0 24 24"
                                         fill="none"
                                         stroke="currentColor">
                                        <path d="M12 4v16m8-8H4" stroke-width="2" stroke-linecap="round" />
                                    </svg>
                                    Add Repo
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- Recent Forum Posts -->
                    <div class="bg-white rounded-lg shadow-lg border-2 border-[#e74c3c] overflow-hidden">
                        <div class="p-6">
                            <div class="flex justify-between items-center mb-6">
                                <h3 class="text-xl font-semibold text-gray-800">Recent Discussions</h3>
                                <span class="text-sm text-gray-500">({{ recent_posts.count }} recent)</span>
                            </div>
                            <div class="space-y-4">
                                {% for post in recent_posts %}
                                    <div class="flex flex-col gap-1">
                                        <a href="{% url 'view_forum' %}?post={{ post.id }}"
                                           class="text-sm hover:text-[#e74c3c] font-medium">{{ post.title }}</a>
                                        <div class="flex items-center gap-4 text-xs text-gray-500">
                                            <span class="flex items-center gap-1">
                                                <i class="fas fa-user"></i>
                                                {{ post.user|default:"Anonymous" }}
                                            </span>
                                            <span class="flex items-center gap-1">
                                                <i class="fas fa-clock"></i>
                                                {{ post.created|timesince }} ago
                                            </span>
                                        </div>
                                    </div>
                                {% empty %}
                                    <p class="text-sm text-gray-500">No discussions yet</p>
                                {% endfor %}
                            </div>
                            <div class="flex justify-between mt-6 pt-4 border-t border-gray-100">
                                <a href="{% url 'view_forum' %}"
                                   class="text-sm text-[#e74c3c] hover:text-[#c0392b] font-medium">View All</a>
                                <a href="{% url 'view_forum' %}"
                                   class="text-sm text-[#e74c3c] hover:text-[#c0392b] font-medium flex items-center">
                                    <i class="fas fa-plus mr-1"></i>
                                    New Discussion
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Leaderboards -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-12">
                    <!-- Remove the duplicate Top PR Contributors section -->
                </div>
            </div>
        </section>
        <!-- Latest Bugs -->
        <section class="py-12 bg-gray-50">
            <div class="max-w-7xl mx-auto px-4">
                <h2 class="text-3xl font-bold text-center mb-12">Latest Bug Reports</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
                    {% for bug in latest_bugs|slice:":2" %}
                        <div class="bg-white rounded-lg shadow-lg border-2 border-[#e74c3c] overflow-hidden">
                            <div class="p-6">
                                <div class="flex justify-between items-center mb-4">
                                    <h3 class="text-xl font-semibold text-gray-800 truncate">{{ bug.description }}</h3>
                                    <span class="px-2 py-1 bg-{{ bug.status|yesno:'green-100,red-100' }} text-{{ bug.status|yesno:'green-800,red-800' }} rounded-full text-xs">
                                        {{ bug.status|default:"open"|title }}
                                    </span>
                                </div>
                                <div class="flex items-center text-gray-600 text-sm mb-4">
                                    <i class="fas fa-globe mr-2"></i>
                                    <a href="{{ bug.url }}"
                                       class="hover:text-[#e74c3c] truncate"
                                       target="_blank">{{ bug.domain_name }}</a>
                                </div>
                                {% if bug.screenshots.all.0 %}
                                    <div class="mb-4 rounded-lg overflow-hidden">
                                        <img src="{{ bug.screenshots.all.0.image.url }}"
                                             alt="Screenshot"
                                             class="w-full h-32 object-cover"
                                             width="400"
                                             height="128">
                                    </div>
                                {% endif %}
                                <div class="flex justify-between items-center text-sm text-gray-500">
                                    <div class="flex items-center">
                                        {% if bug.user %}
                                            {% if bug.user.userprofile.avatar %}
                                                <img src="{{ bug.user.userprofile.avatar }}"
                                                     alt="{{ bug.user.username }}"
                                                     class="w-6 h-6 rounded-full mr-2"
                                                     width="24"
                                                     height="24">
                                            {% else %}
                                                <img src="{% gravatar_url bug.user.email 30 %}"
                                                     alt="{{ bug.user.username }}"
                                                     class="w-6 h-6 rounded-full mr-2"
                                                     width="24"
                                                     height="24">
                                            {% endif %}
                                            <a href="{% url 'profile' bug.user.username %}"
                                               class="hover:text-[#e74c3c]">{{ bug.user.username }}</a>
                                        {% else %}
                                            <span>Anonymous</span>
                                        {% endif %}
                                    </div>
                                    <span>{{ bug.created|timesince }} ago</span>
                                </div>
                                <div class="flex justify-between mt-6 pt-4 border-t border-gray-100">
                                    <div class="flex items-center">
                                        <span class="flex items-center mr-4"><i class="fas fa-thumbs-up text-green-500 mr-1"></i> {{ bug.upvoted.count }}</span>
                                        <span class="flex items-center"><i class="fas fa-tag text-blue-500 mr-1"></i> {{ bug.get_label_display }}</span>
                                    </div>
                                    <a href="{% url 'issue_view' bug.id %}"
                                       class="text-[#e74c3c] hover:text-[#c0392b] font-medium">View Details</a>
                                </div>
                            </div>
                        </div>
                    {% empty %}
                        <div class="col-span-2 text-center p-8">
                            <p class="text-gray-500 mb-4">No bug reports available yet.</p>
                            <a href="{% url 'report' %}"
                               class="inline-block px-6 py-3 bg-[#e74c3c] text-white rounded-md hover:bg-[#c0392b]">Report a Bug</a>
                        </div>
                    {% endfor %}
                </div>
                <div class="text-center">
                    <a href="{% url 'issues' %}"
                       class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-[#e74c3c] hover:bg-[#d44637] transition-colors">
                        <i class="fas fa-list mr-2"></i> View All Bug Reports
                    </a>
                </div>
            </div>
        </section>
        <!-- Latest Blog Posts Section -->
        <section class="py-12">
            <div class="max-w-7xl mx-auto px-4">
                <h2 class="text-3xl font-bold text-center mb-12">Latest Blog Posts</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
                    {% if latest_blog_posts %}
                        {% for post in latest_blog_posts %}
                            <div class="bg-white rounded-lg shadow-lg border-2 border-[#e74c3c] overflow-hidden">
                                {% if post.image %}
                                    <div class="w-full h-48 overflow-hidden">
                                        <img src="{{ post.image.url }}"
                                             alt="{{ post.title }}"
                                             width="800"
                                             height="400"
                                             class="w-full h-full object-cover">
                                    </div>
                                {% endif %}
                                <div class="p-6">
                                    <h3 class="text-xl font-semibold mb-2">{{ post.title }}</h3>
                                    <div class="flex items-center gap-4 text-sm text-gray-500 mb-4">
                                        <span class="flex items-center gap-1">
                                            <i class="fas fa-user"></i>
                                            {{ post.author.username }}
                                        </span>
                                        <span class="flex items-center gap-1">
                                            <i class="fas fa-clock"></i>
                                            {{ post.created_at|timesince }} ago
                                        </span>
                                    </div>
                                    <p class="text-gray-700 mb-4">{{ post.content|truncatewords:30 }}</p>
                                    <a href="{% url 'post_detail' slug=post.slug %}"
                                       class="text-[#e74c3c] hover:text-[#c0392b] font-medium">Read more</a>
                                </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <p class="text-gray-500 text-center">No blog posts available.</p>
                    {% endif %}
                </div>
            </div>
        </section>
        <!-- Tools for Organizations Section -->
        <section class="py-12 bg-gray-50">
            <div class="max-w-7xl mx-auto px-4">
                <h2 class="text-3xl font-bold text-center mb-12">Tools for Organizations</h2>
                <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-6 mb-6">
                    <!-- Organizations -->
                    <a href="{% url 'organizations' %}"
                       class="bg-white rounded-xl shadow-md p-6 flex flex-col items-center hover:shadow-lg transition-shadow">
                        <i class="fas fa-building text-3xl text-[#e74c3c] mb-3"></i>
                        <span class="text-lg font-medium text-center">Organizations</span>
                    </a>
                    <!-- Domains -->
                    <a href="{% url 'domains' %}"
                       class="bg-white rounded-xl shadow-md p-6 flex flex-col items-center hover:shadow-lg transition-shadow">
                        <i class="fas fa-globe text-3xl text-[#e74c3c] mb-3"></i>
                        <span class="text-lg font-medium text-center">Domains</span>
                    </a>
                    <!-- Bugs -->
                    <a href="{% url 'issues' %}"
                       class="bg-white rounded-xl shadow-md p-6 flex flex-col items-center hover:shadow-lg transition-shadow">
                        <i class="fas fa-bug text-3xl text-[#e74c3c] mb-3"></i>
                        <span class="text-lg font-medium text-center">Bugs</span>
                    </a>
                    <!-- Issues -->
                    <a href="{% url 'github_issues' %}"
                       class="bg-white rounded-xl shadow-md p-6 flex flex-col items-center hover:shadow-lg transition-shadow">
                        <i class="fas fa-exclamation-circle text-3xl text-[#e74c3c] mb-3"></i>
                        <span class="text-lg font-medium text-center">Issues</span>
                    </a>
                    <!-- Bounties -->
                    <a href="{% url 'hunts' %}"
                       class="bg-white rounded-xl shadow-md p-6 flex flex-col items-center hover:shadow-lg transition-shadow">
                        <i class="fas fa-dollar-sign text-3xl text-[#e74c3c] mb-3"></i>
                        <span class="text-lg font-medium text-center">Bounties</span>
                    </a>
                    <!-- Check-ins -->
                    <a href="{% url 'checkIN' %}"
                       class="bg-white rounded-xl shadow-md p-6 flex flex-col items-center hover:shadow-lg transition-shadow">
                        <i class="fas fa-calendar-check text-3xl text-[#e74c3c] mb-3"></i>
                        <span class="text-lg font-medium text-center">Check-ins</span>
                    </a>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                    <!-- Time Logs -->
                    <a href="{% url 'sizzle' %}"
                       class="bg-white rounded-xl shadow-md p-6 flex flex-col items-center hover:shadow-lg transition-shadow">
                        <i class="fas fa-clock text-3xl text-[#e74c3c] mb-3"></i>
                        <span class="text-lg font-medium text-center">Time Logs</span>
                        <p class="text-sm text-gray-600 text-center mt-2">Track time spent on security tasks</p>
                    </a>
                    <!-- Trademarks -->
                    <a href="{% url 'trademark_search' %}"
                       class="bg-white rounded-xl shadow-md p-6 flex flex-col items-center hover:shadow-lg transition-shadow">
                        <i class="fas fa-trademark text-3xl text-[#e74c3c] mb-3"></i>
                        <span class="text-lg font-medium text-center">Trademarks</span>
                        <p class="text-sm text-gray-600 text-center mt-2">Manage intellectual property</p>
                    </a>
                    <!-- Map -->
                    <a href="{% url 'map' %}"
                       class="bg-white rounded-xl shadow-md p-6 flex flex-col items-center hover:shadow-lg transition-shadow">
                        <i class="fas fa-map-marked-alt text-3xl text-[#e74c3c] mb-3"></i>
                        <span class="text-lg font-medium text-center">Map</span>
                        <p class="text-sm text-gray-600 text-center mt-2">Visualize global security impact</p>
                    </a>
                </div>
            </div>
        </section>
        <!-- Tools for Projects Section -->
        <section class="py-12 bg-white">
            <div class="max-w-7xl mx-auto px-4">
                <h2 class="text-3xl font-bold text-center mb-8">Tools for Projects</h2>
                <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
                    <!-- Projects -->
                    <a href="{% url 'project_list' %}"
                       class="bg-gray-50 rounded-xl shadow-md p-4 flex flex-col items-center hover:shadow-lg transition-shadow">
                        <i class="fas fa-project-diagram text-2xl text-[#e74c3c] mb-2"></i>
                        <span class="text-base font-medium text-center">Projects</span>
                        <p class="text-xs text-gray-600 text-center mt-1">Manage your security projects</p>
                    </a>
                    <!-- Repositories -->
                    <a href="{% url 'repo_list' %}"
                       class="bg-gray-50 rounded-xl shadow-md p-4 flex flex-col items-center hover:shadow-lg transition-shadow">
                        <i class="fas fa-code-branch text-2xl text-[#e74c3c] mb-2"></i>
                        <span class="text-base font-medium text-center">Repositories</span>
                        <p class="text-xs text-gray-600 text-center mt-1">Connect and monitor GitHub repos</p>
                    </a>
                    <!-- Bid on Issues -->
                    <a href="{% url 'BiddingData' %}"
                       class="bg-gray-50 rounded-xl shadow-md p-4 flex flex-col items-center hover:shadow-lg transition-shadow">
                        <i class="fas fa-gavel text-2xl text-[#e74c3c] mb-2"></i>
                        <span class="text-base font-medium text-center">Bid on Issues</span>
                        <p class="text-xs text-gray-600 text-center mt-1">Place bids on open issues</p>
                    </a>
                    <!-- Funding -->
                    <a href="{% url 'sponsor' %}"
                       class="bg-gray-50 rounded-xl shadow-md p-4 flex flex-col items-center hover:shadow-lg transition-shadow">
                        <i class="fas fa-hand-holding-usd text-2xl text-[#e74c3c] mb-2"></i>
                        <span class="text-base font-medium text-center">Funding</span>
                        <p class="text-xs text-gray-600 text-center mt-1">Manage project funding & rewards</p>
                    </a>
                    <!-- Bacon -->
                    <a href="{% url 'bacon' %}"
                       class="bg-gray-50 rounded-xl shadow-md p-4 flex flex-col items-center hover:shadow-lg transition-shadow">
                        <i class="fas fa-bacon text-2xl text-[#e74c3c] mb-2"></i>
                        <span class="text-base font-medium text-center">Bacon</span>
                        <p class="text-xs text-gray-600 text-center mt-1">Earn & manage Bacon tokens</p>
                    </a>
                </div>
            </div>
        </section>
        <!-- Tools for Users & Teams Section -->
        <section class="py-12 bg-gray-50">
            <div class="max-w-7xl mx-auto px-4">
                <h2 class="text-3xl font-bold text-center mb-12">Tools for Users & Teams</h2>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6">
                    <!-- Users -->
                    <a href="{% url 'users' %}"
                       class="bg-white rounded-xl shadow-md p-6 flex flex-col items-center hover:shadow-lg transition-shadow">
                        <i class="fas fa-users text-3xl text-[#e74c3c] mb-3"></i>
                        <span class="text-lg font-medium text-center">Users</span>
                        <p class="text-sm text-gray-600 text-center mt-2">Manage team members</p>
                    </a>
                    <!-- Teams -->
                    <a href="{% url 'team_overview' %}"
                       class="bg-white rounded-xl shadow-md p-6 flex flex-col items-center hover:shadow-lg transition-shadow">
                        <i class="fas fa-user-friends text-3xl text-[#e74c3c] mb-3"></i>
                        <span class="text-lg font-medium text-center">Teams</span>
                        <p class="text-sm text-gray-600 text-center mt-2">Create & manage teams</p>
                    </a>
                    <!-- Challenges -->
                    <a href="{% url 'team_challenges' %}"
                       class="bg-white rounded-xl shadow-md p-6 flex flex-col items-center hover:shadow-lg transition-shadow">
                        <i class="fas fa-flag text-3xl text-[#e74c3c] mb-3"></i>
                        <span class="text-lg font-medium text-center">Challenges</span>
                        <p class="text-sm text-gray-600 text-center mt-2">Security challenges</p>
                    </a>
                    <!-- Leaderboards -->
                    <a href="{% url 'team_leaderboard' %}"
                       class="bg-white rounded-xl shadow-md p-6 flex flex-col items-center hover:shadow-lg transition-shadow">
                        <i class="fas fa-trophy text-3xl text-[#e74c3c] mb-3"></i>
                        <span class="text-lg font-medium text-center">Leaderboards</span>
                        <p class="text-sm text-gray-600 text-center mt-2">Track achievements</p>
                    </a>
                    <!-- Badges -->
                    <a href="{% url 'badges' %}"
                       class="bg-white rounded-xl shadow-md p-6 flex flex-col items-center hover:shadow-lg transition-shadow">
                        <i class="fas fa-medal text-3xl text-[#e74c3c] mb-3"></i>
                        <span class="text-lg font-medium text-center">Badges</span>
                        <p class="text-sm text-gray-600 text-center mt-2">Earn achievements</p>
                    </a>
                    <!-- Analytics -->
                    <a href="{% url 'team_leaderboard' %}"
                       class="bg-white rounded-xl shadow-md p-6 flex flex-col items-center hover:shadow-lg transition-shadow">
                        <i class="fas fa-chart-line text-3xl text-[#e74c3c] mb-3"></i>
                        <span class="text-lg font-medium text-center">Analytics</span>
                        <p class="text-sm text-gray-600 text-center mt-2">Team performance</p>
                    </a>
                </div>
            </div>
        </section>
        <!-- Corporate Supporters Section -->
        <section class="bg-white rounded-xl shadow-sm p-8 mb-8">
            <div class="max-w-3xl mx-auto">
                <h2 class="text-3xl font-bold mb-6 flex items-center gap-3">
                    <i class="fas fa-handshake text-[#e74c3c]"></i>
                    Corporate Supporters
                </h2>
                <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                    <!-- OWASP -->
                    <div class="flex flex-col items-center text-center">
                        <a href="{% url 'organization_detail' slug='owasp' %}"
                           class="w-32 h-32 flex items-center justify-center mb-4 hover:opacity-80 transition-opacity">
                            <img src="{% static 'images/OWASP_black_logo.svg' %}"
                                 alt="OWASP Logo"
                                 width="128"
                                 height="128"
                                 class="max-w-full max-h-full">
                        </a>
                        <p class="text-gray-700">
                            BLT is an official OWASP project, adhering to the highest standards of open-source security.
                        </p>
                    </div>
                    <!-- Sentry -->
                    <div class="flex flex-col items-center text-center">
                        <a href="{% url 'organization_detail' slug='sentry' %}"
                           class="w-32 h-32 flex items-center justify-center mb-4 hover:opacity-80 transition-opacity">
                            <img src="{% static 'images/sentry-logo.svg' %}"
                                 alt="Sentry Logo"
                                 width="128"
                                 height="128"
                                 class="max-w-full max-h-full">
                        </a>
                        <p class="text-gray-700">Sentry provides BLT with a free plan for error monitoring and performance tracking.</p>
                    </div>
                    <!-- Google -->
                    <div class="flex flex-col items-center text-center">
                        <a href="{% url 'organization_detail' slug='google' %}"
                           class="w-32 h-32 flex items-center justify-center mb-4 hover:opacity-80 transition-opacity">
                            <img src="{% static 'images/googlelogo_color_272x92dp.png' %}"
                                 alt="Google Logo"
                                 width="272"
                                 height="92"
                                 class="max-w-full max-h-full">
                        </a>
                        <p class="text-gray-700">
                            Google supports BLT through <a href="{% url 'gsoc' %}" class="text-[#e74c3c] hover:text-[#c0392b]">Google Summer of Code</a>, fostering student contributions.
                        </p>
                    </div>
                    <!-- Your Logo Here -->
                    <div class="flex flex-col items-center text-center">
                        <div class="w-32 h-32 flex items-center justify-center mb-4 border-2 border-dashed border-[#e74c3c] rounded-lg">
                            <i class="fas fa-image text-6xl text-[#e74c3c]"></i>
                        </div>
                        <p class="text-gray-700">
                            Donate to the BLT project to support our development and have your logo featured here. <a href="https://owasp.org/donate?reponame=www-project-bug-logging-tool&title=OWASP+Bug+logging+tool"
    target="_blank"
    class="text-[#e74c3c] hover:text-[#c0392b]">Become a Supporter</a>
                        </p>
                    </div>
                </div>
            </div>
        </section>
        <!-- Call to Action Section -->
        <section class="py-12">
            <div class="max-w-7xl mx-auto text-center">
                <h2 class="text-3xl font-bold mb-6">Get Involved</h2>
                <p class="mb-8">Join our community and help make the internet a safer place.</p>
                <div class="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-6">
                    <a href="{% url 'contribution_guidelines' %}"
                       class="inline-flex select-none items-center justify-center px-4 py-2 text-red-500 border-2 border-red-500 rounded-lg hover:bg-red-500 hover:text-white font-medium transition-colors duration-200">
                        <i class="fas fa-users mr-2"></i> Join the Community
                    </a>
                    <a href="{% url 'project_list' %}"
                       class="inline-flex select-none items-center justify-center px-4 py-2 text-red-500 border-2 border-red-500 rounded-lg hover:bg-red-500 hover:text-white font-medium transition-colors duration-200">
                        <i class="fas fa-project-diagram mr-2"></i> Explore Projects
                    </a>
                    <a href="{% url 'roadmap' %}"
                       class="inline-flex select-none items-center justify-center px-4 py-2 text-red-500 border-2 border-red-500 rounded-lg hover:bg-red-500 hover:text-white font-medium transition-colors duration-200">
                        <i class="fas fa-road mr-2"></i> Roadmap
                    </a>
                    <a href="{% url 'sponsor' %}"
                       class="inline-flex select-none items-center justify-center px-4 py-2 text-red-500 border-2 border-red-500 rounded-lg hover:bg-red-500 hover:text-white font-medium transition-colors duration-200">
                        <i class="fas fa-donate mr-2"></i> Support Us
                    </a>
                </div>
            </div>
        </section>
        <!-- Footer -->
        <footer class="py-8">
            <div class="max-w-7xl mx-auto text-center">
                <p class="mb-4">Follow us on:</p>
                <div class="flex justify-center space-x-6">
                    <a href="https://twitter.com/OWASP_BLT" target="_blank"><i class="fab fa-twitter fa-2x"></i></a>
                    <a href="https://github.com/OWASP-BLT" target="_blank"><i class="fab fa-github fa-2x"></i></a>
                </div>
                <p class="mt-4">© {{ current_year }} OWASP BLT. All rights reserved.</p>
                <p>Last commit: {{ last_commit }}</p>
            </div>
        </footer>
    </div>
    <!-- Add GitHub Buttons Script at the end of the content block -->
    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <script>
        function copyReferralLink() {
            var copyText = document.getElementById("referralLink");
            copyText.select();
            copyText.setSelectionRange(0, 99999);
            document.execCommand("copy");
            
            // Show feedback
            var button = event.target.closest('button');
            var originalText = button.innerHTML;
            button.innerHTML = '<i class="fas fa-check mr-2"></i>Copied!';
            setTimeout(function() {
                button.innerHTML = originalText;
            }, 2000);
        }
    </script>
{% endblock content %}