{% 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 Bewegung 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 == "sport1" %}
            <label class="slider-q"><b>Ich bewege mich täglich mindestens 30 Minuten mit moderater oder hoher Intensität. </b><br> (z.B. Joggen, schnelles Gehen, Gartenarbeit, Sportaktivitäten)</b></label>
        {% elif f.name == "sport2" %}
            <label class="slider-q"><b>Ich mache mindestens 2-3 mal pro Woche Kräftigungsübungen für die großen Muskelgruppen.</b></label>
        {% elif f.name == "sport3" %}
            <label class="slider-q"><b>Ich steigere meine körperliche Aktivität in meinem Alltag. </b><br>  (z.B. zu Fuss gehen statt mit dem Auto fahren; die Treppe statt den Aufzug nehmen)</label>
        {% elif f.name == "sport4" %}
            <label class="slider-q"><b>Ich begrenze die Zeit, die ich vor dem Fernseher verbringe.</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 %}