{{block styles }}
<link rel="stylesheet" type="text/css" href="{{ static 'prediction/custom.css' }}"/>
<link rel="stylesheet" type="text/css" href="{{ static 'prediction/nouislider.css' }}"/>
<style>
    .loadbar {
    width: 36px;
    text-align: center;
    height: 100%;
    background-color: #fff;
    border: 1px solid #ccc;
    position: absolute;
    right: 0;
    z-index: 1;
   }
    .bar
    {
    width: 100%;
    display: block;
    font-family: arial;
    font-size: 12px;
    background-color: #0d6efd;
    color: #fff;
    position: absolute;
    bottom: 0;
    }
    #topchart{
    /*position: absolute;*/
    left: 120px;
     top:0px;
    z-index: 1;
    }

    .otree-timer {
        text-align: center;
    }

    .page-header {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 10px;
}
    #model{
    /*position: absolute;



    right: 40px;
        margin-top: 10px;
    width: 33%;
     */
    height: 200px;
    z-index: 1;
    border: #136dfa 1px solid;
    background: #FFF;
    border-radius: 5px;
    }
</style>

{{endblock}}
{{ block content }}

<div style="display:none;">
  {{ formfields}}
</div>

<div class="mb-4" style="text-align: left; font-size: 1.1em;"></div>
La siguiente pregunta sirve para asegurarnos de que los participantes <b>leen las preguntas con atención</b>.<br>
En la pantalla se puede ver un gráfico con rangos de calorías.<br><br>
Para demostrar que está leyendo con atención, por favor haga lo siguiente:
<ul>
    <li>Asigne el <b>100%</b> al rango de <b>450-500 calorías</b>.</li>
    <li>Asigne el <b>0%</b> a <b>todos los demás rangos</b>.</li>
</ul> Utilice el gráfico para <b>mover las barras</b> de modo que toda la probabilidad quede en el rango de <b>450–500</b> calorías, y luego <b>envíe</b> su respuesta.<br>
<p></p>
</div>

<div id="probError"
     style="display:none;
            color:#842029;
            background:#f8d7da;
            border:1px solid #f5c2c7;
            padding:10px;
            border-radius:6px;
            margin-bottom:16px;">
</div>


    <!-- Uncomment if title wanted
    <h1 style="text-align: center">
      {{attention_questions}}
    </h1>
    -->

<figure class="highcharts-figure">


    <div class="container">

<div id="timer"></div>


        <div class="row">
    <div class="col">

 <div style="text-align: left;
    /*position: absolute;
        margin-left: 50px;
    right: 50px;
    z-index: 2;*/">
    <button id="undo"  class="btn  btn-warning"  disabled  type="button"> Deshacer </button>
    <button id="reset" class="btn  btn-danger" disabled  type="button"> Reiniciar </button>
    <button id="normalize" class="btn  btn-info"   type="button"> Normalizar </button>
    </div>

    </div>
    <div class="col">
  <div class="mt-0 d-flex justify-content-end gap-2" style="height: 40px">
    <button class="btn btn-success" id="validate_btn" type="submit">
      Enviar
    </button>
  </div>
</div>


  </div>



  








    <div id="bins_container" style="display:none; position: relative; width:100%;">
    <div id="binsliders" class="d-flex justify-content-between"></div>
    </div>


    <div id="draw"></div>

</div>
</figure>

<div id="sliders">
   <div class="slider mt-3" id="slider_0"></div>
</div>
<div class="mt-0" style="text-align: center;">
<button id="add_component" style="display: none"  class="btn  btn-warning mt-3" type="button">Add a slider</button>
<button id="remove_component" style="display: none"  class="btn  btn-danger mt-3" type="button">Remove last slider</button>

</div>
<div id="binsinput" class="d-flex justify-content-around"></div>
<div id="alert" style="display:none">You can't add a point so close to another one!</div>

  <div id="topchart" class=" text-center" style="display: none" >
                <div class="btn-group btn-group-toggle" data-toggle="buttons">

                <input type="radio" class="btn-check" name="mode" id="curve-mode" autocomplete="off" value="curve" checked>
                <label class="btn btn-outline-primary" for="curve-mode">Point mode</label>

                <input type="radio" class="btn-check" name="mode" id="bins-mode" autocomplete="off" value="bins">
                <label class="btn btn-outline-primary" for="bins-mode">Bins mode</label>
                </div>

            </div>

<div class="container">
  <div class="row">
    <div class="col text-start">
      <div id="skip_wrapper" >
        <button class="btn btn-secondary"
                id="skip_btn"
                type="submit"
                style="text-align:left">
          Omitir
        </button>
      </div>
    </div>
  </div>
</div>






{{ endblock }}

{{ block scripts }}
<script src="{{ static 'prediction/nouislider.min.js' }}"></script>
<script src="{{ static 'prediction/math.js' }}"></script>
<script src="{{ static 'prediction/highcharts.js' }}"></script>
<script src="{{ static 'prediction/draggable-points.js' }}"></script>
<script src="{{ static 'prediction/script.js' }}"></script>
<script src="{{ static 'prediction/bootstrap.bundle.min.js' }}"></script>
<!--Script 1-->
<script>
function liveRecv(data) {
  if (!data || !data.data2) return;
  const el = document.querySelector('input[name="data2"]');
  if (el) el.value = data.data2;
}
</script>
<!--Script 2-->
<script>
(function () {
  const TOL = 1e-3;

  function init() {
    const form = document.querySelector('form');
    const errBox = document.getElementById('probError');
    const skippedEl = document.querySelector('input[name="skipped2"]');
    const dataEl = document.querySelector('input[name="data2"]');

    if (!form || !errBox || !skippedEl || !dataEl) {
      console.error('Wiring failed', { form, errBox, skippedEl, dataEl });
      return;
    }

    function clearError() {
      errBox.innerHTML = '';
      errBox.style.display = 'none';
    }

    function showError(html) {
      errBox.innerHTML = html;
      errBox.style.display = 'block';
    }

    function readDataArray() {
      const raw = (dataEl.value || '').trim();
      if (!raw) return null;
      const arr = JSON.parse(raw);
      if (!Array.isArray(arr)) return null;
      return arr.map(v => Number(v) || 0);
    }

    form.addEventListener('submit', (e) => {
      clearError();

      const submitter = e.submitter;
      const isSkip = submitter && submitter.id === 'skip_btn';

      if (isSkip) {
        skippedEl.value = '1';
        return;
      }

      skippedEl.value = '0';

      let arr;
      try {
        arr = readDataArray();
      } catch (err) {
        e.preventDefault();
        showError('No fue posible leer su distribución. Por favor, inténtelo nuevamente.');
        return;
      }

      if (!arr) {
        e.preventDefault();
        showError('Por favor, ingrese una distribución de probabilidades antes de continuar.');
        return;
      }

      const s = arr.reduce((a, v) => a + v, 0);
      const percent = (s * 100).toFixed(2);

      if (Math.abs(s - 1) > TOL) {
        e.preventDefault();
        showError(`<b>Sus respuestas deben sumar 100% para continuar</b> (suma actual: ${percent}%).<br>
          Por favor, ajuste los valores o haga clic en <b>Normalizar</b>, y luego envíe nuevamente.`);
        return;
      }

    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();
</script>
{{ endblock }}