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

{% block title %}
{%if is_practice%}
Practice
{%endif%} Period {{current_period}} of {{total_periods}}
{% endblock %}

{% block content %}


<div class="row colors" id="colors"  >
    <div class="col-md-3 color_wrapper" align="center">
        
        <h3>Chosen Color</h3>
        <svg width="50%" height="50%">
            <rect width="100%" height="100%" style="fill:{{fill_chosen}}" />
            </svg>
    </div>
    <div class="col-md-3 color_wrapper" align="center">
        <h3>Target Color</h3>
        <svg width="50%" height="50%">
            <rect width="100%" height="100%" style="fill:{{fill_target}};" />
            </svg>
    </div>

    
</div>

<p><b>Are the chosen color and the target color the same?</b></p>
<div>
    <button name="is_match_supervisor" value="True" class="btn btn-primary btn-large">Yes</button>
    <button name="is_match_supervisor" value="False" class="btn btn-primary btn-large">No</button>
</div>

{% endblock %}