{% extends "base.html" %}
{% load gravatar %}

{% block style %}
<style>
  .container-min-height{
    min-height: 50vh;
  }
    .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 %}

{% block content %}
<div class="row container-min-height">
    <div class="col-lg-6" style="display: flex; justify-content: center; align-items: center;">
        <h1 class="page-header">Global Leaderboard</h1>         
    </div>
</div>
<div class="row">
    <div class="col-lg-9">
        <div class="list-group">
            {%if not leaderboard%}
                <p style="color: red;">No data for this month</p>
            {% else %}
                {% for leader in leaderboard %}
                <div class="list-group-item">
                    {% if leader.userprofile.avatar %}
                    <img src="{{ leader.userprofile.avatar }}" class="img-responsive img-thumbnail profileimage">
                    {% elif leader.socialaccount_set.all.0.get_avatar_url %}
                    <img src="{{ leader.socialaccount_set.all.0.get_avatar_url }}" class="profileimage">
                    {% else %}
                    <img src="{% gravatar_url leader.email 50 %}" class="profileimage">
                    {% endif %}
                    <a href="/profile/{{ leader.username }}">{{ leader.username }}</a>
                    <span class="pull-right badge">{{ leader.total_score }} Points</span>
                    {% if leader.userprofile.winnings %}
                    <span class="pull-right badge">${{ leader.userprofile.winnings|default:""|floatformat }}</span>
                    {% endif %}

                    <span><kbd
                            class="{{ leader.userprofile.get_title_display }} titleuser">{{ leader.userprofile.get_title_display }}</kbd></span>
                </div>
                {% endfor %}
            {%endif%}
        </div>
    </div>
</div>
{% endblock %}