{{ block content }}
    {{ if player.round_number == 1}}
    <div>
        {{ include C.INSTRUCTIONS2_TEMPLATE }}
    </div>



    {{ else }}

    <div>
        {{ include C.FAILED_TEMPLATE }}
    </div>

    {{ endif }}

    <div class="card-body">
        <img src="{{ static image_path }}"
                width="700px"
            />
    </div>
    <br>
    <div style="width:100%">

        </p>
        <div style="width:50%; float:left">
            <p>
                <b>CHAT BOX</b>
            </p>
            {{ chat nickname=Nickname_chat_one }}
        </div>

        <div class="card-body" style="width:50%; float:right">
            <p>
                <b>SUBMIT DRAFT TEXTS HERE</b>
            </p>

            {{ include C.CHAT_TEMPLATE }}

        </div>
    </div>
    <br>
    <div style="width:100%; float:left; Margin-top:50px">
        <b>SUBMIT REVIEW TEXT HERE</b>
        <br>
        <br>
        <p>
        Please write your final review text below. This means, <b>given current evidence, do you believe the
        tweet is misinformed or potentially misleading? Please write the context you feel would help others
        understand why that tweet IS or IS NOT misleading.</b> Please remember, you will only be paid if your matched participant
        submitted the exact same text and if your text is max 280 characters. Links are not counted towards this limit.<br>
        When you're ready to submit, click <b>"NEXT".</b>
        </p>
        {{ form.suggestedEdit  }}
        <span style="color:#999;">Your text has</span> <span id="characters" style="color:#999;">0</span> <span style="color:#999;">characters</span>
    </div>
    <br>
    <br>
    <div >
        {{ form.includeLinks.label  }}<br>

        {{ form.includeLinks  }}
    </div>
    <br>
    <div >
        {{ form.evidenceEval.label  }}<br><br/>

        {{ form.evidenceEval  }}

        <p>{{ next_button }}</p>
    </div>

<script>
  function sayReady() {
    let msg = new SpeechSynthesisUtterance();
    // or: de-DE, zh-CN, ja-JP, es-MX, etc.
    msg.language = 'en-US';
    // actually better to use js_vars than double-braces
    msg.text = "Please, go back to the experiment tab. The experiment has begun. You have 15 minutes to complete the task.";
    window.speechSynthesis.speak(msg);
  }

  if (document.hidden) {
    sayReady();
  }
</script>

{{ endblock }}

{{ block scripts }}
<script>
    $('textarea').keyup(updateCount);
    $('textarea').keydown(updateCount);

    function updateCount() {
    var cs = [0+ $(this).val().length];
    $('#characters').text(cs);
    }
</script>



{{ endblock }}