{% 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;
    }

    @media (min-height: 800px) and (min-width: 992px) {
    .col-md-8 {
        width: 66.66666667%;
    }}
    @media (min-height: 800px) and (min-width: 360px) {
    .col-md-8 {
        width: 90%;
        font-size: small;
    }}

    .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 container-min-height flex justify-center">
        <div class="col-lg-6 flex justify-center items-center">
            <h1 class="page-header">Global Leaderboard</h1>
        </div>
    </div>
    <div class="row flex justify-center">
        <div class="col-md-8">
            <div class="list-group">
                {% if not leaderboard %}
                    <p class="text-red-900">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"
                                     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="img-responsive img-thumbnail profileimage"
                                     alt="username"
                                     width="50px"
                                     height="50px">
                            {% else %}
                                <img src="{% gravatar_url leader.email 50 %}"
                                     class="img-responsive img-thumbnail profileimage"
                                     alt="username"
                                     width="50px"
                                     height="50px">
                            {% endif %}
                            <a href="{% url 'profile' slug=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 content %}