{% extends "global/Page.html" %}
{% load otree static %}





{% block content %}

<p>
  <span style="font-size: 1.2em;">
    <b>Bitte beantworten Sie noch ein paar Fragen zu Ihrer Ernährung im Alltag</b>
  </span>
</p>

<div class="card mt-2 mb-4">
  <div class="card-body p-2">

    {% for f in form %}
      <div class="slider-wrap">

        {% if f.name == "nutri1" %}
            <label class="slider-q"><b>Ich esse mindestens drei Mahlzeiten am Tag und habe einen regelmäßigen Essensrhythmus.</b></label>
        {% elif f.name == "nutri2" %}
            <label class="slider-q"><b>Ich frühstücke jeden Morgen zuhause (mehr als eine Tasse Tee oder Kaffee).</b></label>
        {% elif f.name == "nutri3" %}
            <label class="slider-q"><b>Ich esse mindestens einmal täglich Obst.</b></label>
        {% elif f.name == "nutri4" %}
            <label class="slider-q"><b>Ich esse mindestens einmal täglich Gemüse.</b></label>
        {% elif f.name == "nutri5" %}
            <label class="slider-q"><b>Ich nehme täglich zwei Portionen Milch oder Milchprodukte zu mir.</b> <br> (z.B. Joghurt)</label>
        {% elif f.name == "nutri6" %}
            <label class="slider-q"><b>Ich begrenze die Aufname von tierischen Fetten.</b></label>
        {% elif f.name == "nutri7" %}
            <label class="slider-q"><b>Ich begrenze die Aufnahme von Salz.</b></label>
        {% elif f.name == "nutri8" %}
            <label class="slider-q"><b>Ich begrenze die Aufnahme von Süßigkeiten.</b></label>
        {% elif f.name == "nutri9" %}
            <label class="slider-q"><b>Ich vermeide das Naschen zwischen den Mahlzeiten.</b></label>
        {% endif %}

        {% with form_field=f %}
          {% include "slider_4.html" %}
        {% endwith %}
      </div>
    {% endfor %}

  </div>
</div>

{% next_button %}

<style>
  .btn-primary {
    background-color: #003360 !important;
    border-color: #003360 !important;
  }
  .btn-primary:hover {
    background-color: #001f3f !important;
    border-color: #001f3f !important;
  }

    /* Centered 80% width block */
    .slider-wrap {
    width: 100%;
    max-width: 1000px;
    margin: 0px auto;
  }

    /* Base slider element */
    input[type="range"].slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 10px;
    border-radius: 999px;
    outline: none;

    /* neutral pre-interaction background (you can set to #003360 if you prefer) */
    background: #cfd8e3;
  }

  /* WebKit track */
  input[type="range"].slider::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: 999px;
    background: transparent; /* we paint the input background (gradient) */
  }

  input[type="range"].slider::-moz-range-track {
    height: 10px;
    border-radius: 999px;
    background: transparent;
  }

  input[type="range"].slider::-moz-range-thumb{
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #001f3f;
    cursor: pointer;
    opacity: 1;
  }

  /* Thumb normal */
  input[type="range"].slider::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #001f3f;
    cursor: pointer;
    margin-top: -6px;
    opacity: 1;
  }

  /* Hide thumb until first interaction */
  input[type="range"].slider.unmoved::-webkit-slider-thumb { opacity: 0; pointer-events: none; }
  input[type="range"].slider.unmoved::-moz-range-thumb { opacity: 0; pointer-events: none; }

  .slider-scale {
    display:flex;
    justify-content:space-between;
    font-size: 12px;
    margin-top: 4px;
  }
  .slider-anchors {
    display:flex;
    justify-content:space-between;
    font-size: 12px;
    margin-top: 2px;
  }

/* center labels */
.mid-label {
  position: absolute;
  transform: translateX(+30%);
}

/* approximate slider positions */
.left-shift  { left: 29%; }
.right-shift { left: 65%; }

</style>

<script>
  function paintSlider(el) {
    const min = Number(el.min);
    const max = Number(el.max);
    const val = Number(el.value);
    const pct = ((val - min) / (max - min)) * 100;

    el.style.background =
      `linear-gradient(to right,
        #f39200 0%,
        #f39200 ${pct}%,
        #003360 ${pct}%,
        #003360 100%)`;
  }

  function applySliderStyle(slider) {
    slider.classList.remove('unmoved');
    paintSlider(slider);

    const hiddenId = slider.dataset.target;
    const hiddenInput = document.getElementById(hiddenId);
    if (hiddenInput) {
      hiddenInput.value = slider.value;
    }
  }

  document.addEventListener('DOMContentLoaded', function () {
    const sliders = document.querySelectorAll('input[type="range"].slider');

    sliders.forEach(function (slider) {
      // neutral initial state
      slider.classList.add('unmoved');
      slider.style.background = '#cfd8e3';

      slider.addEventListener('input', function () {
        applySliderStyle(slider);
      });

      slider.addEventListener('change', function () {
        applySliderStyle(slider);
      });

      slider.addEventListener('pointerup', function () {
        applySliderStyle(slider);
      });

      slider.addEventListener('click', function () {
        applySliderStyle(slider);
      });

      slider.addEventListener('pointerdown', function () {
        slider.classList.remove('unmoved');
      });
    });
  });
</script>



{% endblock %}

{% block styles %}
<style>
  #header {
    display: block;
    font-weight: normal;
    font-size: 14px;
    text-align: right;
    background-color: #003360;
    color: white;
  }
</style>
{% endblock %}