{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
<div class="row justify-content-end">
	<div class="col-4 align-self-end">
		<h6 class="text-right">Participant ID: {{ participant_id }}, Stage: 2, Round: <strong>{{ round_number }}</strong>/15</h6>
	</div>
</div>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
	<div class="card text-center" style="border: none; width: 7rem;">
	  <div class="card-body">
	  	Context
	  </div>
	  <img src="{% static context_image %}" class="card-img-top"/>
	</div>
</div>

<br>
<div class="row justify-content-center">
	<div class="card" style="width: 10rem;">
		{% if player_action_choice_image == "Image/0Action0.png" %}
		<img src="" class="mx-auto d-block" style="height: 100px; width: 100px" alt="No action selected"><hr>
		{% else %}
	 	<img src="{% static player_action_choice_image %}" class="mx-auto d-block" style="height: 100px; width: 100px" alt="No action selected"><hr>
	 	{% endif %}
	<div class="card-body">
		<img src="{% static tickCrossImage %}" class="mx-auto d-block">
	</div>
	</div>
</div>
<br>

<p class="text-center"><strong>Your Individual score: {{ score }}</strong></p>

<div class="row">
	<div class="col-1 text-center">0</div>
	<div class="col-10 align-self-center">
		<div class="progress">
		  <div class="progress-bar" role="progressbar" style="width: {{ score }}%;" aria-valuenow="{{ score }}" aria-valuemin="0" aria-valuemax="15">{{ score }}</div>
		</div>
	</div>
	<div class="col-1 text-center">15</div>
</div>

<br>
{% next_button %}
{% endblock %}