{% extends "base.html" %}

{% block subtitle %}
  Podium du challenge "{{challenge_session.challenge.name}}"
{% endblock %}

{% block main %}
  <div class="row-fluid">
    <div class="span4" style="height: 400px; position:relative;">
      <div style="position:absolute; bottom:0; width: 100%;">
        {% if cs_user_scores.1.user.photo.img %}
        <img src="{{cs_user_scores.1.user.photo.img.url}}" class="img-rounded">
        {% else %}
        <img src="{{ STATIC_URL }}trainings/images/avatar.jpg" class="img-rounded">
        {% endif %}
        <div style="background-color: rgba(0,0,0,10);">
          <h2 class="text-center" style="color: rgba(255,255,255,255);">{{cs_user_scores.1.user.first_name|capfirst}} - {{cs_user_scores.1.user.last_name|upper}}</h2>
          <h3 class="text-center" style="color: rgba(255,255,255,255);">{{cs_user_scores.1.score}} pts</h3>
        </div>
      </div>
    </div>
    <div class="span5" style="height: 400px; position:relative;">
      <div style="position:absolute; bottom:0; width: 100%;">
        {% if cs_user_scores.0.user.photo.img %}
        <img src="{{cs_user_scores.0.user.photo.img.url}}" class="img-rounded">
        {% else %}
        <img src="{{ STATIC_URL }}trainings/images/avatar.jpg" class="img-rounded">
        {% endif %}
        <div style="background-color: rgba(0,0,0,10);">
          <h2 class="text-center" style="color: rgba(255,255,255,255);">{{cs_user_scores.0.user.first_name|capfirst}} - {{cs_user_scores.0.user.last_name|upper}}</h2>
          <h3 class="text-center" style="color: rgba(255,255,255,255);">{{cs_user_scores.0.score}} pts</h3>
        </div>
      </div>
    </div>
    <div class="span3" style="height: 400px; position:relative;">
      <div style="position:absolute; bottom:0;width:100%;">
        {% if cs_user_scores.2.user.photo.img %}
        <img src="{{cs_user_scores.2.user.photo.img.url}}" class="img-rounded">
        {% else %}
        <img src="{{ STATIC_URL }}trainings/images/avatar.jpg" class="img-rounded">
        {% endif %}
        <div style="background-color: rgba(0,0,0,10);">
          <h2 class="text-center" style="color: rgba(255,255,255,255);">{{cs_user_scores.2.user.first_name|capfirst}} - {{cs_user_scores.2.user.last_name|upper}}</h2>
          <h3 class="text-center" style="color: rgba(255,255,255,255);">{{cs_user_scores.2.score}} pts</h3>
        </div>
      </div>
    </div>
  </div>
  <div>
    <ol>
      {% for cs in  cs_user_scores %}
      <li>
      {{cs.user.first_name|capfirst}} {{cs.user.last_name|upper}} - {{cs.score }}
      </li>
      {% endfor %}
    </ol>
  </div>
{% endblock %}