{% extends "./GameCode.html" %}
{% load otree static %}

{% block title %}
PART 2 - Matrix {{ player.round_number }}
{% endblock %}

{% block content %}

{% if player.participant.vars.num_correct %}
    <p>Total score: {{ player.participant.vars.num_correct}} stars </p>
{% endif %}

{% if player.participant.vars.last_stars %}
    <p>Last round score: {{ player.participant.vars.last_stars}} stars</p>
{% endif %}

<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda">

<div class="game_container">

    <section class="score-panel">
        <ul class="stars">
            <li><i id="star1" class="fa fa-star star"></i></li>
            <li><i id="star2" class="fa fa-star star"></i></li>
            <li><i id="star3" class="fa fa-star star"></i></li>
        </ul>

        <div id="timeElapsed" class="timeElapsed">
            <span id="secondsElapsed">0</span> s
        </div>

        <div class="moves">
            <span id="movesNumberDisplay">0</span> Moves
        </div>

        <div class="matched">
            <span id="matchedCoupleDisplay">0</span>/10 Matched
        </div>

    </section>

    <ul id="deck" class="deck">
		<li class="tile diamond">		<i class="fa fa-diamond"></i></li>
        <li class="tile plane">         <i class="fa fa-paper-plane-o"></i></li>
        <li class="tile anchor">        <i class="fa fa-anchor"></i></li>
        <li class="tile thumbs">        <i class="fa fa-thumbs-o-up"></i></li>
        <li class="tile bolt">          <i class="fa fa-bolt"></i></li>
        <li class="tile cube">          <i class="fa fa-cube"></i></li>
        <li class="tile anchor">        <i class="fa fa-anchor"></i></li>
        <li class="tile leaf">          <i class="fa fa-leaf"></i></li>
        <li class="tile bicycle">       <i class="fa fa-bicycle"></i></li>
        <li class="tile diamond">       <i class="fa fa-diamond"></i></li>
        <li class="tile bomb">          <i class="fa fa-bomb"></i></li>
        <li class="tile leaf">          <i class="fa fa-leaf"></i></li>
        <li class="tile paperclip">     <i class="fa fa-paperclip"></i></li>
        <li class="tile bomb">          <i class="fa fa-bomb"></i></li>
        <li class="tile bolt">          <i class="fa fa-bolt"></i></li>
        <li class="tile bicycle">       <i class="fa fa-bicycle"></i></li>
        <li class="tile plane">         <i class="fa fa-paper-plane-o"></i></li>
        <li class="tile cube">          <i class="fa fa-cube"></i></li>
        <li class="tile paperclip">     <i class="fa fa-paperclip"></i></li>
        <li class="tile thumbs">        <i class="fa fa-thumbs-o-up"></i></li>
    </ul>
</div>

<!-- <li class="tile scissors">      <i class="fa fa-scissors"></i></li>
<li class="tile scissors">      <i class="fa fa-scissors"></i></li>
<li class="tile fire">          <i class="fa fa-fire"></i></li>
<li class="tile fire">          <i class="fa fa-fire"></i></li> -->

<!-- The following writes the sucecss or failure back to our app on form submission -->
{{ form.star_rating.errors }}
<input type="hidden" name="star_rating" id="star_rating" />

{% endblock %}