{% extends "base.html" %}
{% load static %}
{% block title %}
    Global Leaderboard
{% endblock title %}
{% block description %}
    Check out the top performers on the global leaderboard. View scores, usernames, and their achievements from around the world.
{% endblock description %}
{% block keywords %}
    Global Leaderboard, Top Performers, Scores, Usernames, Achievements, Worldwide Rankings
{% endblock keywords %}
{% block og_title %}
    Global Leaderboard - Top Performers and Achievements Worldwide
{% endblock og_title %}
{% block og_description %}
    Explore the global leaderboard to see the top performers from around the world. View scores, usernames, and their achievements.
{% endblock og_description %}
{% load gravatar %}
{% block content %}
    {% include "includes/sidenav.html" %}
    <div class="row container-min-height flex justify-center pb-4">
        <div class="col-lg-12 flex justify-center items-center">
            <h1 class="page-header">Global Leaderboard</h1>
        </div>
    </div>
    <div class="flex flex-col md:gap-10 px-4  gap-2 md:px-0">
        <div class="flex justify-center gap-6 flex-wrap">
            <div class=" flex-1  border-2 border-gray-300 pb-3 rounded-b-lg flex-1 min-w-[300px] max-w-[550px]">
                <div class="text-center text-3xl font-bold py-4 border-2 border-red-500 rounded-t-lg">Points Leaderboard</div>
                <div class=" list-group w-full p-4">
                    {% if not leaderboard %}
                        <p class="text-red-500 text-center font-medium">No data for this month!</p>
                    {% else %}
                        <div class="flex flex-col gap-2">
                            {% for leader in leaderboard %}
                                <div class=" flex justify-between items-center">
                                    <div class="flex  gap-2 items-center truncate">
                                        {% if leader.userprofile.avatar %}
                                            <img src="{{ leader.userprofile.avatar }}"
                                                 class=" size-11 select-none border border-gray-200 rounded-full"
                                                 alt="{{ leader.username }}"
                                                 width="50px"
                                                 height="50px">
                                        {% elif leader.socialaccount_set.all.0.get_avatar_url %}
                                            <img src="{{ leader.socialaccount_set.all.0.get_avatar_url }}"
                                                 class=" size-11 select-none border border-gray-200 rounded-full"
                                                 alt="username"
                                                 width="50px"
                                                 height="50px">
                                        {% else %}
                                            <img src="{% gravatar_url leader.email 50 %}"
                                                 class=" size-11 select-none border border-gray-200 rounded-full"
                                                 alt="username"
                                                 width="50px"
                                                 height="50px">
                                        {% endif %}
                                        <a href="{% url 'profile' slug=leader.username %}"
                                           class="text-lg transition-all duration-200">{{ leader.username }}</a>
                                        <span>
                                            <kbd class="py-1 px-2 select-none rounded-md {% if leader.userprofile.get_title_display|lower == 'silver' %}bg-gray-400 text-gray-800{% elif leader.userprofile.get_title_display|lower == 'gold' %}bg-yellow-600 text-gray-800{% elif leader.userprofile.get_title_display|lower == 'bronze' %}bg-orange-700 text-white{% elif leader.userprofile.get_title_display|lower == 'platinum' %}bg-gray-200 text-gray-800{% elif leader.userprofile.get_title_display|lower == 'unrated' %}bg-black text-white{% endif %}">
                                                {{ leader.userprofile.get_title_display }}
                                            </kbd>
                                        </span>
                                        {% if leader.userprofile.winnings %}
                                            <span class="pull-right badge px-2 py-1 select-none">${{ leader.userprofile.winnings|default:""|floatformat }}</span>
                                        {% endif %}
                                    </div>
                                    <span class="pull-right badge bg-gray-100 flex-shrink-0 rounded-md py-1 px-2 select-none">{{ leader.total_score }} Points</span>
                                </div>
                                <div class="border-t border-gray-200 my-1"></div>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>
            <div class=" flex-1 border-2 border-gray-300 pb-3 rounded-b-lg flex-1 min-w-[300px] max-w-[550px]">
                <div class=" text-center text-3xl font-bold py-4 border-2 border-red-500 rounded-t-lg">Pull Request Leaderboard</div>
                <div class=" list-group w-full p-4">
                    {% if pr_leaderboard %}
                        <div class="flex flex-col gap-2">
                            {% for leader in pr_leaderboard %}
                                <div class="flex justify-between items-center">
                                    <div class="flex  gap-2 items-center truncate">
                                        {% if leader.user_profile__github_url %}
                                            <img src="https://github.com/{{ leader.user_profile__user__username }}.png"
                                                 class=" size-11 select-none border border-gray-200 rounded-full"
                                                 alt="{{ leader.user_profile__user__username }}"
                                                 width="50px"
                                                 height="50px">
                                        {% else %}
                                            <img src="{% gravatar_url leader.user_profile__user__email 50 %}"
                                                 class=" size-11 select-none border border-gray-200 rounded-full"
                                                 alt="username"
                                                 width="50px"
                                                 height="50px">
                                        {% endif %}
                                        <a href="{% url 'profile' slug=leader.user_profile__user__username %}"
                                           class="text-lg transition-all duration-200">{{ leader.user_profile__user__username }}</a>
                                        <a href="{{ leader.user_profile__github_url }}"
                                           target="_blank"
                                           class="ml-2">
                                            <i class="fab fa-github text-xl"></i>
                                        </a>
                                    </div>
                                    <span class="pull-right badge bg-gray-100 flex-shrink-0 rounded-md py-1 px-2 select-none">{{ leader.total_prs }} PRs</span>
                                </div>
                                <div class="border-t border-gray-200 my-1"></div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <p class="text-red-500 text-center font-medium">No pull request data available!</p>
                    {% endif %}
                </div>
            </div>
            <div class=" flex-1 border-2 border-gray-300 pb-3 rounded-b-lg flex-1 min-w-[300px] max-w-[550px]">
                <div class="text-center text-3xl font-bold py-4 border-2 border-red-500 rounded-t-lg">Code Review Leaderboard</div>
                <div class="list-group p-4">
                    {% if code_review_leaderboard %}
                        <div class="flex flex-col gap-2">
                            {% for leader in code_review_leaderboard %}
                                <div class="flex justify-between items-center">
                                    <div class="flex  gap-2 items-center truncate">
                                        {% if leader.reviews__reviewer__user__username %}
                                            <img src="https://github.com/{{ leader.reviews__reviewer__user__username }}.png"
                                                 class=" size-11 select-none border border-gray-200 rounded-full"
                                                 alt="{{ leader.reviews__reviewer__user__username }}"
                                                 width="50px"
                                                 height="50px">
                                        {% else %}
                                            <img src="{% gravatar_url leader.reviews__reviewer__user__email 50 %}"
                                                 class=" size-11 select-none border border-gray-200 rounded-full"
                                                 alt="username"
                                                 width="50px"
                                                 height="50px">
                                        {% endif %}
                                        <a href="{% url 'profile' slug=leader.reviews__reviewer__user__username %}"
                                           class="text-lg transition-all duration-200">
                                            {{ leader.reviews__reviewer__user__username }}
                                        </a>
                                        <a href="https://github.com/{{ leader.reviews__reviewer__user__username }}"
                                           target="_blank"
                                           class="ml-2">
                                            <i class="fab fa-github text-xl"></i>
                                        </a>
                                    </div>
                                    <span class="pull-right badge bg-gray-100 flex-shrink-0 rounded-md py-1 px-2 select-none">Reviews: {{ leader.total_reviews }}</span>
                                </div>
                                <div class="border-t border-gray-200 my-1"></div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <p class="text-red-500 text-center font-medium">No code review data available!</p>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="flex justify-center gap-6 flex-wrap">
            <div class="flex-1 border-2 border-gray-300 pb-3 rounded-b-lg flex-1 min-w-[300px] max-w-[550px]">
                <div class="text-center text-3xl font-bold py-4 border-2 border-red-500 rounded-t-lg">Top Visitors</div>
                <div class="list-group w-full p-4">
                    {% if top_visitors %}
                        <div class="flex flex-col gap-2">
                            {% for profile in top_visitors %}
                                <div class="flex justify-between items-center">
                                    <div class="flex gap-2 items-center truncate">
                                        {% if profile.avatar %}
                                            <img src="{{ profile.avatar }}"
                                                 class="size-11 select-none border border-gray-200 rounded-full rounded-full"
                                                 alt="{{ profile.user.username }}"
                                                 width="50px"
                                                 height="50px">
                                        {% else %}
                                            <img src="{% gravatar_url profile.user.email 50 %}"
                                                 class="size-11 select-none border border-gray-200 rounded-full rounded-full"
                                                 alt="{{ profile.user.username }}"
                                                 width="50px"
                                                 height="50px">
                                        {% endif %}
                                        <a href="{% url 'profile' profile.user.username %}"
                                           class="text-lg transition-all duration-200">{{ profile.user.username }}</a>
                                    </div>
                                    <div class="flex flex-col items-end text-right text-sm">
                                        <span class="badge bg-gray-100 rounded-md py-1 px-2 select-none">{{ profile.daily_visit_count }} visits</span>
                                        <span class="text-xs text-gray-500">Last Visit: {{ profile.last_visit_day|default:"Never" }}</span>
                                    </div>
                                </div>
                                <div class="border-t border-gray-200 my-1"></div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <p class="text-red-500 text-center font-medium">No visitor data available!</p>
                    {% endif %}
                </div>
            </div>
            <div class=" flex-1 border-2 border-gray-300 pb-3 rounded-b-lg flex-1 min-w-[300px] max-w-[550px]">
                <div class="text-center text-3xl font-bold py-4 border-2 border-red-500 rounded-t-lg">Issue Bounties</div>
                <div class=" list-group w-full p-4">
                    {% if not issue_bounties %}
                        <p class="text-red-500 text-center font-medium">No issue bounties data available!</p>
                    {% else %}
                    {% endif %}
                </div>
            </div>
            <div class=" flex-1  border-2 border-gray-300 pb-3 rounded-b-lg flex-1 min-w-[300px] max-w-[550px]">
                <div class="text-center text-3xl font-bold py-4 border-2 border-red-500 rounded-t-lg">Bug Bounties</div>
                <div class=" list-group w-full p-4">
                    {% if not bug_bounties %}
                        <p class="text-red-500 text-center font-medium">No bug bounties data available!</p>
                    {% else %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock content %}