{% block title %}
    {# CUSTOMER VIEW: WORKER'S TASK DESCRIPTION #}
{% endblock %}

{% block content %}
    <div class="alert alert-success text-lg-center lead" role="alert">
        <h2><strong>WORKER TASK</strong></h2>
    </div>

    <div class="card mb-4">
        <div class="card-body" style="line-height: 1.6;">
            <p style="font-size:16pt" class="mb-4">
                The Worker will complete a task called the <strong>decode task</strong>. The Worker decodes 3-digit numbers into letters using
                a decoding key that maps each letter of the alphabet to a unique 3-digit number.
            </p>

            <p style="font-size:16pt">
                The number of correctly completed decodes represents the effort the Worker puts into serving you, the Customer,
                and the quality of their service. <b>The more decodes the Worker correctly completes, the higher the quality of
                their service</b>. This service quality forms the basis of your satisfaction and payoff, which will be described on the next screens.
            </p>
        </div>
    </div>

    <div id="decoding-area">
      <h5 class="text-center" style="font-size:16pt">Here is an example based on a sample decoding key in the Workers' task:</h5>
         <p style="LINE-HEIGHT:0.5pt"><br></p>

      <!-- TOP BAR -->
<div class="top-bar">
    <div><strong>Round 1</strong></div>
    <div>Time Remaining: 00:22</div>
    <div># Correct: 0</div>
</div>

<!-- DECODE ROW -->
<div class="decode-row">

<span style="font-weight:bold;font-size:30px;">Decode:</span>

<span class="decode-number">392</span>

<p style="LINE-HEIGHT:2pt"><br></p>
<p style="LINE-HEIGHT:2pt"><br></p>

<div style="margin-bottom:15px;font-size:20px;font-weight:bold;color:#333;">
Type the letter corresponding to the number. Uppercase or lowercase letters are both accepted.
</div>

<p style="LINE-HEIGHT:2pt"><br></p>

<input type="text"
class="decode-input"
value="G"
readonly
style="text-transform:uppercase;">

</div>

<!-- DECODING KEY -->

<div>

<div style="margin-bottom:10px;font-weight:bold;font-size:24px;">
DECODING KEY:
</div>

<div class="decoding-grid">

<div class="key-box">B = 663</div>
<div class="key-box">C = 679</div>
<div class="key-box">D = 767</div>
<div class="key-box">E = 243</div>
<div class="key-box">F = 957</div>
<div class="key-box highlight">G = 392</div>
<div class="key-box">H = 798</div>
<div class="key-box">I = 342</div>

<div class="key-box">J = 941</div>
<div class="key-box">K = 899</div>
<div class="key-box">L = 559</div>
<div class="key-box">N = 464</div>
<div class="key-box">O = 248</div>
<div class="key-box">P = 553</div>
<div class="key-box">Q = 851</div>
<div class="key-box">R = 280</div>

<div class="key-box">S = 376</div>
<div class="key-box">T = 930</div>
<div class="key-box">U = 919</div>
<div class="key-box">V = 537</div>
<div class="key-box">W = 237</div>
<div class="key-box">X = 116</div>
<div class="key-box">Y = 526</div>
<div class="key-box">Z = 625</div>

</div>
</div>

<!-- CORRECT ANSWER -->

<div class="text-center mt-4">
<p style="font-size:18pt;">
<strong>Correct Answer:</strong>
<span style="font-size:26pt;font-weight:bold;color:#1e7e34;">G</span>
</p>
</div>

<p style="LINE-HEIGHT:0.5pt"><br></p>

<div class="mt-4 text-start">
<p style="font-size:16pt" class="mb-4">Please click ‘Next’ to continue.</p>
{{ next_button }}
</div>

<style>

.top-bar{
display:flex;
justify-content:space-between;
font-size:22px;
margin-bottom:30px;
background-color:#d4edda;
color:#155724;
padding:15px 20px;
border-radius:8px;
font-weight:bold;
}

.decode-row{
text-align:center;
margin-bottom:35px;
font-size:22px;
}

.decode-number{
font-weight:bold;
margin:0 15px;
font-size:30px;
}

.decode-input{
width:120px;
text-align:center;
font-size:22px;
font-weight:bold;
padding:6px;
border:1px solid #ced4da;
border-radius:6px;
background-color:#fff;
}

.decoding-grid{
display:grid;
grid-template-columns:repeat(8,1fr);
gap:14px;
margin-top:30px;
}

.key-box{
padding:14px;
text-align:center;
font-weight:bold;
font-size:20px;
border:1px solid #bbb;
background-color:#f8f9fa;
white-space:nowrap;
border-radius:4px;
}

.highlight{
background-color:#e5e7eb;
}

.otree-btn-next{
margin-left:0!important;
margin-right:auto!important;
display:block!important;
}

</style>

{% endblock %}