{% extends "base.html" %}
{% load gravatar %}
{% block style %}
    <style>
    .list-group-item img {
        width: 50px;
        height: 50px;
    }

    .list-group-item .badge {
        margin-top: 15px;
    }

    .list-group-item a {
        text-decoration: none;
        margin-left: 10px;
    }

    .silver {
        background-color: lightblue;
        color: #333;
    }

    .gold {
        background-color: #D4AF37;
        color: #333;
    }

    .bronze {
        background-color: #C9AE5D;
        color: #333;
    }

    .profileimage {
        border-radius: 50%;
    }

    .titleuser {
        position: absolute;
        margin-top: 12px;
        margin-left: 5px;
    }
    </style>
{% endblock style %}
{% block content %}
    {% include "includes/sidenav.html" %}
    <div class="row">
        <div class="col-lg-6 flex justify-center items-center">
            <h1 class="page-header">Monthly Leaderboard</h1>
        </div>
    </div>
    <div class="row fles justify-center items-center">
        <div class="col-lg-9">
            <div class="list-group">
                {% if not leaderboard %}
                    <p class="text-red-900">No data for this month</p>
                {% else %}
                    {% for month in leaderboard %}
                        <div class="list-group-item mt-[30px]">
                            <button disabled class="btn btn-primary">{{ month.month }}</button>
                        </div>
                        <div class="list-group-item">
                            {% if not month.user %}
                                <p class="text-red-900">no bugs found this month</p>
                            {% else %}
                                {% if month.user.userprofile.avatar %}
                                    <img src="{{ month.user.userprofile.avatar }}"
                                         class="img-responsive img-thumbnail profileimage"
                                         alt="{{ month.user.username }}"
                                         width="50px"
                                         height="50px">
                                {% elif user.socialaccount_set.all.0.get_avatar_url %}
                                    <img src="{{ month.user.socialaccount_set.all.0.get_avatar_url }}"
                                         class="img-responsive img-thumbnail profileimage"
                                         alt="username"
                                         width="50px"
                                         height="50px">
                                {% else %}
                                    <img src="{% gravatar_url month.user.email 50 %}"
                                         class="img-responsive img-thumbnail profileimage"
                                         alt="username"
                                         width="50px"
                                         height="50px">
                                {% endif %}
                                <a href="{% url 'profile' slug=month.user.username %}">{{ month.user.username }}</a>
                                <span class="pull-right badge">{{ month.user.total_score }} Points</span>
                                {% if month.user.userprofile.winnings %}
                                    <span class="pull-right badge">${{ month.user.userprofile.winnings|default:""|floatformat }}</span>
                                {% endif %}
                                <span><kbd class="{{ month.user.userprofile.get_title_display }} titleuser">{{ month.user.userprofile.get_title_display }}</kbd></span>
                            {% endif %}
                        </div>
                    {% endfor %}
                {% endif %}
            </div>
        </div>
    </div>
{% endblock content %}