{% extends "global/Base.html" %}
{% load staticfiles otree_tags %}

{% block title %}
   Results
{% endblock %}

{% block content %}

<div class="panel-body">
<table class="table table-hover table-striped table-responsive table-bordered">
  <thead>
    <th>Sequence</th>
    <th>Your answer:</th>
    <th>Correct answer:</th>
    <th></th>
  </thead>
<tbody>
  {% for key, value in seq.items %}

  <tr >
  <td > {{value.seq_to_show}} </td>
    <td>
{{value.answer}}


    </td>
    <td >
{{value.corranswer}}
    </td>
<td>

  {% if value.iscorrect %}
  <span class="glyphicon glyphicon-ok " aria-hidden="true"></span>
  {% else %}
  <span class="glyphicon glyphicon-remove " aria-hidden="true"></span>
  {% endif %}
</td>
</tr>
{% endfor %}

</tbody>
</table>
  </div>

  <ul class="list-group">
  <li class="list-group-item list-group-item-success">Number of correct answers:
    <span class="badge badge-primary badge-pill">{{player.sumcorrect}}</span></li>
  <li class="list-group-item list-group-item-warning">Your payoff:
    <span class="badge badge-pill badge-primary ">{{player.payoff}}</span></li>
</ul>

{% next_button %}
{% endblock %}


{% block styles %}
<style>
.glyphicon-ok{color:green;}
.glyphicon-remove{color:red;}
.badge-primary {background-color:blue;}

</style>
{% endblock %}

{% block scripts %}
{% endblock %}