{% block ranking_box %}
    <div class="row">
        <div class="col-sm-12 header">
            <span class="title">RANKING</span>
            <a href="{{ path( 'ranking' ) }}" class="btn default-blue">Ir a ranking</a>
        </div>
        <div class="col-sm-12">
            <table class="table table-hover width-100">
                <tbody>
                    {% for user in rankingUsers %}
                        <tr>
                            {% if user.isPublicProfile == true %}
                                <td class="item-01 col-xs-1"><a href="{{ path('user_profile_by_user', { 'id': user.id }) }}"> {{loop.index}}</a></td>
                                <td><img class="item-02 img-circle" src="{{user.picture}}"></td>
                                <td class="item-03 col-xs-2"><a href="{{ path('user_profile_by_user', { 'id': user.id }) }}">{{user.nickname}}</a></td>
                                <td class="item-04 col-xs-2"><a href="#">{{user.route}}</a></td>
                                <td class="item-05">{{user.points |number_format}} pts</td>
                                <td class="item-06">{{user.progress |number_format}} % progreso</td>
                                <td>
                                    <a href="{{ path('user_profile_by_user', { 'id': user.id }) }}">
                                        <span class="glyphicons glyphicons-zoom_in item-07"></span>
                                    </a>
                                </td>
                                <td>
                                    <a href="{{ path('challenge_pvp', { 'challengedId': user.id }) }}">
                                        <span class="item-08">
                                            <span class="glyphicons glyphicons-user"></span>
                                            <span class="glyphicons glyphicons-transfer"></span>
                                            <span class="glyphicons glyphicons-user"></span>
                                        </span>
                                    </a>
                                </td>
                            {% else %}
                                <td class="item-01"><a href=""> {{loop.index}}</a></td>
                                <td><img class="item-02 img-circle" src="{{user.picture}}"/></td>
                                <td class="item-03"><a href="">{{user.nickname}}</a></td>
                                <td class="item-04"><a href="#">{{user.route}}</a></td>
                                <td class="item-05">{{ user.points|number_format }} pts</td>
                                <td class="item-06">{{user.progress}} % progreso</td>
                                <td>
                                <a href="">
                                    <span class="glyphicons glyphicons-zoom_in item-07"></span>
                                </a>
                                </td>
                                <td>
                                    <a href="">
                                        <span class="item-08">
                                            <span class="glyphicons glyphicons-user"></span>
                                            <span class="glyphicons glyphicons-transfer"></span>
                                            <span class="glyphicons glyphicons-user"></span>
                                        </span>
                                    </a>
                                </td>
                            {% endif %}
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
            <div class="clearfix"></div>
        </div>
    </div>
{% endblock %}