{{ block title }}

{{ endblock }}
{{ block content }}
<style>
  .trust-wrap { max-width: 980px; }
  .scale-head {
    display: grid;
    grid-template-columns: 40% 60%;
    align-items: end;
    margin-bottom: 6px;
  }
  .scale-head .left { font-weight: 600; }
  .scale-head .right {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
  }

  table.trust-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
  }
  table.trust-table td {
    vertical-align: middle;
    padding: 10px 8px;
    border-top: 1px solid #ddd;
  }
  table.trust-table tr:last-child td {
    border-bottom: 1px solid #ddd;
  }
  td.label-col { width: 40%; }
  td.slider-col { width: 60%; }

  .slider-wrap { position: relative; }
  input[type="range"] { width: 100%; }

  .ticks {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-top: 4px;
    color: #333;
  }
  .selected-wrap {
    margin-top: 6px;
    font-size: 13px;
  }
  .selected-val {
    font-weight: 700;
    visibility: hidden; /* becomes visible once moved */
    margin-left: 6px;
  }
  .q-title{
  font-size: 16px;
  font-weight: 500;
  }

  .followups { margin-top: 20px; }
  .followups .q { margin-top: 14px; }

  .otree-form-errors { color: #b00020; margin-top: 6px; }
</style>

<div class="trust-wrap">
   <div class="q-title" style="margin-bottom: 10px;">
    How trustworthy do you think are these health information sources?
  </div>
  <div class="scale-head">
    <div class="left"></div>
    <div class="right">
      <div>Not trustworthy at all</div>
      <div>Extremely trustworthy</div>
    </div>
  </div>

  <div style="display:grid; grid-template-columns: 40% 60%; margin-bottom:8px;">
    <div></div>
    <div class="ticks">
      <div>0</div><div>10</div><div>20</div><div>30</div><div>40</div><div>50</div>
      <div>60</div><div>70</div><div>80</div><div>90</div><div>100</div>
    </div>
  </div>

  <table class="trust-table">
    {% for item in slider_items %}
      <tr>
        <td class="label-col">{{ item.label }}</td>
        <td class="slider-col">
          <!-- moved flag -->
          <input type="hidden"
                 name="{{ item.moved }}"
                 id="{{ item.moved }}"
                 value="False">

          <div class="slider-wrap">
            <input type="range"
                   name="{{ item.field }}"
                   min="0"
                   max="100"
                   step="1"
                   value="0"
                   required
                   oninput="
                     document.getElementById('{{ item.field }}_val').textContent = this.value;
                     document.getElementById('{{ item.field }}_val').style.visibility = 'visible';
                     document.getElementById('{{ item.moved }}').value = 'True';
                   ">

            <div class="selected-wrap">
              Selected:
              <span id="{{ item.field }}_val" class="selected-val">0</span>
            </div>
          </div>
        </td>
      </tr>
    {% endfor %}
  </table>
  <br>
  <br>

<center><button class="btn btn-primary">Continue</button></center>
{{ endblock }}