{{ block title }} INDIVIDUAL EVALUATION {{ endblock }}

{{ block content }}

<style>
.center {
    display: block;
    border: 4px solid #555;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}
.button {
    background-color: #3182bd;
    border: none;
    color: white;
    padding: 10px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 12px;
}
.button2 {
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
}
.button2:hover {
  background-color: #008CBA;
  color: white;
}
</style>



<div class="card bg-white mb-1">
    <h2 class="card-header">Evaluate the Tweet below</h2>
      <div class="card-body">
          <img src="{{ static image_path }}" class="center"/>
      </div>
</div>


<div class="card bg-white mb-1">
    <h2 class="card-header">TASK 1: Is the tweet misinformed or potentially misleading?</h2>
      <div class="card-body">
          <div class="card-text">
              <h5 class="card-title">Based on the latest available evidence, <u><b>I</b></u> believe the tweet is:</h5>
              {{ form.evidenceEval_IND  }}
          </div>
      </div>
</div>


<div class="card bg-white mb-1">
    <h2 class="card-header">TASK 2: Submit review text here</h2>
      <div class="card-body">
          <p class="card-text">
              Please provide a written explanation for your evaluation in the space provided below. When writing the text,
              provide context that you feel will help others understand why the tweet is or is not misleading. It is helpful
              to cite sources. Keep your response within 280 characters (excluding URLs).
          </p>
          {{ form.suggestedEdit_IND  }}
          <span style="color:#999;">Your text has</span> <span id="characters" style="color:#999;">0</span> <span style="color:#999;">characters</span>
          <br>
          <br>
          <button class="button button2">Submit</button>
      </div>
</div>

{{ endblock }}



{{ block scripts }}
<script>

    $('textarea').keyup(updateCount);
    $('textarea').keydown(updateCount);

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

{{ endblock }}