{% 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 %}
	<p>Press “View Codebook” button to see the table of actions and contexts.</p>

	<button type="button" onclick="viewCodebook()" class="btn btn-primary" id="view-codebook-button">View Codebook</button>
	<div style="display: inline;" id="view-codebook-count">Number of Views Left: <strong>{{ view_codebook_count }}</strong></div>

	<div id="codebook" style="visibility: hidden;">
		<div class="row justify-content-center">
			<h3>Contexts</h3>
		</div>
		<div class="row">
			<div class="col-2 align-self-center">
				<h3>Actions</h3>
			</div>
			<div class="col-10">
				<table class="table table-bordered">
				  <thead>
				    <tr>
				      <th scope="col"></th>
				      {% for context_image in context_images %}
				      	<th scope="col"><img src="{% static context_image %}" class="mx-auto d-block" style="height: 60px; width: 55px"/></th>
				      {% endfor %}
				    </tr>
				  </thead>
				  <tbody>
				  	{% for row_image in row_images %}
				  		<tr>
				  			{% for image in row_image %}
				  				{% if forloop.counter == forloop.parentloop.counter|add:"1" %}
				  				<td><img src="{% static image %}" class="mx-auto d-block" style="height: 60px; width: 55px"/></td>
				  				{% elif forloop.counter == 1 %}
				  				<td><img src="{% static image %}" class="mx-auto d-block" style="height: 60px; width: 60px"/></td>
				  				{% else %}
				  				<td><img src="{% static image %}" class="mx-auto d-block" style="height: 35px; width: 30px"/></td>
				  				{% endif %}
				  			{% endfor %}
				  		</tr>
				  	{% endfor %}
				  </tbody>
				</table>
			</div>
		</div>
	</div>

	<button id="floating-continue" class="btn btn-primary btn-large position-fixed" style="bottom: 50px;">Continue</button>

	<script type="text/javascript">
		const viewCodebookButton = document.getElementById("view-codebook-button");
		const codebook = document.getElementById("codebook");
		var viewCodebookCount = js_vars.view_codebook_count;
		
		if (viewCodebookCount === 0) {
			viewCodebookButton.disabled = true;
		} 
		
		function viewCodeBookTimeout() {
			codebook.style.visibility = "hidden";
			if (viewCodebookCount !== 0) {
				viewCodebookButton.disabled = false;
			}
		}

		function viewCodebook() {
			liveSend(1);
			viewCodebookButton.disabled = true;
			codebook.style.visibility = "visible";
			
			setTimeout(viewCodeBookTimeout, 3000);
		}

		function liveRecv(payload) {
		    console.log('received a message!', payload.view_codebook_count);
		    document.getElementById("view-codebook-count").innerHTML = `Number of Views Left: <strong>${payload.view_codebook_count}</strong>`;
		    viewCodebookCount = payload.view_codebook_count;
		}
	</script>
{% endblock %}