{% load static otree %}
<table id="badges" width="100%">
    {% if player.treatment == "2" %}
    <tr>
      <td colspan="7" height="80"></td>
      <td class="verticalTableHeader" width="5%" style="border-left: 1px solid black; border-right: 1px solid black; border-top: 1px solid black;"><test>Bronze</test></td>
      <td colspan="4"></td>
      <td class="verticalTableHeader" width="5%" style="border-left: 1px solid black; border-right: 1px solid black; border-top: 1px solid black;"><test>Silver</test></td>
      <td colspan="4"></td>
      <td class="verticalTableHeader" width="5%" style="border-left: 1px solid black; border-right: 1px solid black; border-top: 1px solid black;"><test>Gold</test></td>
      <td colspan="2"></td>
    </tr>
    {% endif %}
    	<tr>
            {% if player.round_number >= 1 %}
                <td id="badges"><span class="dot"></span></td>
            {% else %}
                <td id="badges"><span class="dotgrey"></span></td>
            {% endif %}
            {% if player.round_number >= 2 %}
                <td id="badges"><span class="dot"></span></td>
            {% else %}
                <td id="badges"><span class="dotgrey"></span></td>
            {% endif %}
            {% if player.round_number >= 3 %}
                <td id="badges"><span class="dot"></span></td>
            {% else %}
                <td id="badges"><span class="dotgrey"></span></td>
            {% endif %}
            {% if player.round_number >= 4 %}
                <td id="badges"><span class="dot"></span></td>
            {% else %}
                <td id="badges"><span class="dotgrey"></span></td>
            {% endif %}
            {% if player.round_number >= 5 %}
                <td id="badges"><span class="dot"></span></td>
            {% else %}
                <td id="badges"><span class="dotgrey"></span></td>
            {% endif %}
            {% if player.round_number >= 6 %}
                <td id="badges"><span class="dot"></span></td>
            {% else %}
                <td id="badges"><span class="dotgrey"></span></td>
            {% endif %}
            {% if player.round_number >= 7 %}
                <td id="badges"><span class="dot"></span></td>
            {% else %}
                <td id="badges"><span class="dotgrey"></span></td>
            {% endif %}

            {% if player.treatment == "2" %}
                {% if player.round_number >= 8 %}
                    <td align=center style="border-left: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black;"><span class="bronze"></span></td>
                {% else %}
                    <td align=center style="border-left: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black;"><span class="bronzegrey"></span></td>
                {% endif %}
            {% endif %}

            {% if player.treatment == "3" %}
                {% if player.round_number >= 8 %}
                    <td id="badges"><span class="dot"></span></td>
                {% else %}
                    <td id="badges"><span class="dotgrey"></span></td>
                {% endif %}
            {% endif %}

            {% if player.round_number >= 9 %}
                <td id="badges"><span class="dot"></span></td>
            {% else %}
                <td id="badges"><span class="dotgrey"></span></td>
            {% endif %}
            {% if player.round_number >= 10 %}
                <td id="badges"><span class="dot"></span></td>
            {% else %}
                <td id="badges"><span class="dotgrey"></span></td>
            {% endif %}
            {% if player.round_number >= 11 %}
                <td id="badges"><span class="dot"></span></td>
            {% else %}
                <td id="badges"><span class="dotgrey"></span></td>
            {% endif %}
            {% if player.round_number >= 12 %}
                <td id="badges"><span class="dot"></span></td>
            {% else %}
                <td id="badges"><span class="dotgrey"></span></td>
            {% endif %}

            {% if player.treatment == "2" %}
                {% if player.round_number >= 13 %}
                    <td align=center style="border-left: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black;"><span class="silver"></span></td>
                {% else %}
                    <td align=center style="border-left: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black;"><span class="silvergrey"></span></td>
                {% endif %}
            {% endif %}

            {% if player.treatment == "3" %}
                {% if player.round_number >= 13 %}
                    <td id="badges"><span class="dot"></span></td>
                {% else %}
                    <td id="badges"><span class="dotgrey"></span></td>
                {% endif %}
            {% endif %}

            {% if player.round_number >= 14 %}
                <td id="badges"><span class="dot"></span></td>
            {% else %}
                <td id="badges"><span class="dotgrey"></span></td>
            {% endif %}
            {% if player.round_number >= 15 %}
                <td id="badges"><span class="dot"></span></td>
            {% else %}
                <td id="badges"><span class="dotgrey"></span></td>
            {% endif %}
            {% if player.round_number >= 16 %}
                <td id="badges"><span class="dot"></span></td>
            {% else %}
                <td id="badges"><span class="dotgrey"></span></td>
            {% endif %}
            {% if player.round_number >= 17 %}
                <td id="badges"><span class="dot"></span></td>
            {% else %}
                <td id="badges"><span class="dotgrey"></span></td>
            {% endif %}

            {% if player.treatment == "2" %}
                {% if player.round_number >= 18 %}
                    <td align=center style="border-left: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black;"><span class="gold"></span></td>
                {% else %}
                    <td align=center style="border-left: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black;"><span class="goldgrey"></span></td>
                {% endif %}
            {% endif %}

            {% if player.treatment == "3" %}
                {% if player.round_number >= 18 %}
                    <td id="badges"><span class="dot"></span></td>
                {% else %}
                    <td id="badges"><span class="dotgrey"></span></td>
                {% endif %}
            {% endif %}

            {% if player.round_number >= 19 %}
                <td id="badges"><span class="dot"></span></td>
            {% else %}
                <td id="badges"><span class="dotgrey"></span></td>
            {% endif %}
            {% if player.round_number >= 20 %}
                <td id="badges"><span class="dot"></span></td>
            {% else %}
                <td id="badges"><span class="dotgrey"></span></td>
            {% endif %}
	</tr>
</table>