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

{% block title %} Bitte denken Sie nochmal an diese Situation {% endblock %}

{% block content %}


<br><br>
<table class="table table-bordered text-center" style="width: 80%; margin: auto;">
    <thead>

     <h4 class="text-center">
        In dieser Situation haben Sie das eigene
        <span style="color: #f39200; font-weight: 700;">Auto</span> gewählt.
    </h4>

    <br>

    </thead>
    <tbody>
        <tr>
            <th class="text-end">
                Wetter
            </th>
            <td>
                {% if car_case.weather == "Sonnig" %}
                <img src="{% static 'Sun_new.png' %}" alt="Sun" style="height:70px;">
                {% elif car_case.weather == "Bewölkt" %}
                <img src="{% static 'Cloud_new.png' %}" alt="Cloud" style="height:70px;">
                {% elif car_case.weather == "Leichter Regen" %}
                <img src="{% static 'Rain_new.png' %}" alt="Rain" style="height:60px;">
                {% endif %}
                {{ car_case.weather }}      (22°)
            </td>

        </tr>

        <tr>
            <th class="text-end">Direkte Strecke zum Badesee</th>
            <td>

        {% if car_case.bikelane == "Separat abgegrenzter Fahrradweg" %}
        <img src="{% static 'SeparateBikeLane_new.png' %}" alt="BikeLane_sep" style="width:240px;">

        {% elif car_case.bikelane == "Fahrradstreifen direkt neben Hauptstrasse" %}
        <img src="{% static 'BikeLane_new.png' %}" alt="BikeLane_sep" style="width:240px;">

        {% elif car_case.bikelane == "Fahren im gemischten Verkehr" %}
        <img src="{% static 'NoBikeLane_new.png' %}" alt="NoBikeLane" style="width:240px;">

        {% endif %}
        <br>
        {{ car_case.bikelane }}
            </td>
        </tr>

        <tr>
            <th class="text-end">Entfernung zum Badesee (direkte Strecke) </th>
            <td>
                {{ car_case.distance }}
            </td>
        </tr>

        <tr>
            <th class="text-end">Registrierung für Leihrad-Nutzung</th>
            <td>{{ car_case.bike_conv }}</td>
        </tr>

        <tr>
            <th class="text-end">Leihgebühren für E-Bike</th>
            <td>{{ car_case.bike_cost }}</td>
        </tr>


        <tr>
            <th class="text-end">Rückgabe von Leihrädern </th>
            <td>{{ car_case.bike_return }}</td>
        </tr>

        <tr>
            <th class="text-end">Parkgebühren</th>
            <td>{{ car_case.park_cost }}</td>
        </tr>
        <tr>
            <th class="text-end">Parkplätze direkt am See</th>
            <td>{{ car_case.park_aval }}</td>
        </tr>

        <tr>
            <th class="text-end">Alternative Strecke
            </th>
            <td>
                {{ car_case.detour }}
            </td>
        </tr>

    </tbody>
</table>

    <br><br>
    <h5 class="text-center">
        In wiefern stimmen Sie den folgenden Aussagen zu oder nicht zu?
    </h5>
    <br>


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

        {% if f.name == "DCE_hed_1" %}
            <label class="slider-q"><b>Die Fahrt mit dem Auto verspricht mir gute Laune.</b></label>
        {% elif f.name == "DCE_hed_2" %}
            <label class="slider-q"><b>Die Fahrt mit dem Auto verspricht mir echte Freude.</b></label>
        {% elif f.name == "DCE_hed_3" %}
            <label class="slider-q"><b>Die Fahrt mit dem Auto verspricht mir Spaß.</b></label>
        {% elif f.name == "DCE_hed_4" %}
            <label class="slider-q"><b>Die Fahrt mit dem Auto verbessert mein Urlaubserlebnis.</b></label>
        {% elif f.name == "DCE_eud_1" %}
            <label class="slider-q"><b>Die Fahrt mit dem Auto ermöglicht es mir, mich zu entspannen.</b></label>
        {% elif f.name == "DCE_eud_2" %}
            <label class="slider-q"><b>Die Fahrt mit dem Auto bringt mich in Einklang mit der Natur.</b></label>
        {% elif f.name == "DCE_eud_3" %}
            <label class="slider-q"><b>Die Fahrt mit dem Auto motiviert mich, etwas Gutes für mich zu tun.</b></label>
        {% elif f.name == "DCE_eud_4" %}
            <label class="slider-q"><b>Die Fahrt mit dem Auto verspricht mir, mit einem guten Gefühl anzukommen.</b></label>
        {% elif f.name == "DCE_eud_5" %}
            <label class="slider-q"><b>Die Fahrt mit dem Auto motiviert mich, das Beste aus mir herauszuholen.</b></label>
        {% endif %}

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


<br>
{% 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: 90%;
    max-width: 800px;
    margin: 14px 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: 31%; }
.right-shift { left: 62%; }

</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);
  }

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

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

      // Dragging updates continuously
      slider.addEventListener('input', function () {
        applySliderStyle(slider);
      });

      // Clicking a discrete value may only fire 'change' (or nothing until release)
      slider.addEventListener('change', function () {
        applySliderStyle(slider);
      });

      // Covers “click on track” edge cases where input/change timing is weird
      slider.addEventListener('pointerup', function () {
        applySliderStyle(slider);
      });

      // Fallback for some browsers / devices
      slider.addEventListener('click', function () {
        applySliderStyle(slider);
      });

      // Optional: reveal thumb immediately on touch/click (even before value updates)
      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 %}