{{ block title }}Teil 4{{ endblock }}
{{ block content }}

<style>
  .slider-card {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #f9f9f9;
  }

  .slider-wrap {
    position: relative;
    display: flex;
    align-items: center
  }

  @media (min-width:768px) {
    .slider-inner {
      flex: 1;
      transform: translateX(var(--shift, 0px));
      position: relative
    }
  }

  @media (max-width:767.98px) {
    .slider-inner {
      flex: 1;
      transform: none;
      position: relative
    }
  }

  /* kein Springen */
  input[type="range"].no-jump {
    pointer-events: none
  }

  input[type="range"].no-jump::-webkit-slider-thumb {
    pointer-events: auto
  }

  input[type="range"].no-jump::-moz-range-thumb {
    pointer-events: auto
  }

  /* Thumb */
  input[type="range"].with-ticks::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0d6efd;
    border: none;
    margin-top: -6px;
    position: relative;
    z-index: 3;
  }

  input[type="range"].with-ticks::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0d6efd;
    border: none;
    position: relative;
    z-index: 3;
  }

  /* Natives Track unsichtbar (nur unsere Tickbar sichtbar) */
  input.form-range.with-ticks {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    width: 100%;
    height: 30px;
    /* größere Hitbox */
  }

  input.form-range.with-ticks::-webkit-slider-runnable-track {
    background: transparent !important;
    height: 6px !important;
  }

  input.form-range.with-ticks::-moz-range-track {
    background: transparent !important;
    height: 6px !important;
  }

  /* NEU: die graue Grundlinie (Rail) mittig */
  .rail {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    border-radius: 3px;
    background: #ddd;
    pointer-events: none;
    z-index: 1;
  }

  .tick-container {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% + 4px);
    /* direkt unter der 6px hohen Rail */
    transform: translateY(0);
    /* kein zentrieren mehr */
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 0;
  }

  .tick {
    width: 2px;
    border-radius: 1px;
    background: #999;
    opacity: .7
  }

  .tick.minor {
    height: 6px;
    opacity: .45
  }

  .tick.major {
    height: 10px;
    background: #666;
    opacity: .85
  }



  /* Pin mit Zielzahl */
  .target-pin {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    /* jetzt wirklich mittig */
    width: 4px;
    /* statt 2px */
    height: 24px;
    /* statt 16px */
    border-radius: 2px;
    pointer-events: none;
    opacity: .95;
    z-index: 2;
    transition: background-color .25s ease, transform .15s ease;
  }

  .target-pin.red {
    background: #dc3545;
  }

  .target-pin.green {
    background: #28a745;
  }

  .target-pin.hit {
    transform: translate(-50%, -50%) scale(1.12);
  }

  /* Zahl über dem Pin */
  .target-pin::after {
    content: attr(data-value);
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: .8rem;
    line-height: 1;
    color: #333;
    font-weight: 600;
    pointer-events: none;
  }

  /* Seitenanzeige (rechts) */
  .side-readout {
    margin-left: .75rem;
    min-width: 48px;
    text-align: right;
    font-size: .9rem
  }

  .pill {
    display: inline-block;
    padding: .25rem .55rem;
    border-radius: 999px;
    font-weight: 600;
    transition: background-color .25s ease, color .25s ease;
  }

  .pill.gray {
    background: #e9ecef;
    color: #495057
  }

  .pill.green {
    background: #d1e7dd;
    color: #146c43
  }

  .pill.yellow {
    background: #fff3cd;
    color: #997404
  }

  .pill.red {
    background: #f8d7da;
    color: #842029
  }
</style>


<div class="container">
  <div class="row g-3">
    {{ for s in sliders }}
    <div class="col-12 col-md-6">
      <div class="slider-card">
        <div class="slider-wrap">
          <div class="slider-inner" style="--shift: {{ s.shift }}px;">

            <input type="range" name="slider_{{ s.n }}" id="slider_{{ s.n }}" min="0" max="100" step="1"
              value="{{ s.start }}" class="form-range no-jump with-ticks" data-target="{{ s.target }}"
              oninput="updateValue({{ s.n }});" onkeydown="return false;">

            <!-- NEU: graue Grundlinie -->
            <span class="rail"></span>

            <!-- Ziel-Pin (sitzt exakt auf der Rail, gleiche Breite/Referenz) -->
            <span class="target-pin red" id="pin_{{ s.n }}" data-value="{{ s.target }}"></span>

            <!-- Schöne Ticks darunter -->
            <div class="tick-container">
              {{ for t in ticks }}
              <span class="tick {{ t.cls }}"></span>
              {{ endfor }}
            </div>
          </div>
          <!-- Seitenanzeige -->
          <div class="side-readout">
            <span class="pill gray" id="valpill_{{ s.n }}">0</span>
          </div>
        </div>
      </div>
    </div>
    {{ endfor }}
  </div>
</div>

<script>
  const TOL = 0
  const THUMB_W = 18;  // exakt wie im CSS

  function positionPin(n) {
    const slider = document.getElementById('slider_' + n);
    const pin = document.getElementById('pin_' + n);

    const min = parseFloat(slider.min) || 0;
    const max = parseFloat(slider.max) || 100;
    const target = parseFloat(slider.dataset.target);

    const rect = slider.getBoundingClientRect();
    const trackW = rect.width;

    // Der Thumb bewegt sich effektiv auf (trackW - THUMB_W).
    // Wir setzen den Pin so, dass seine Mitte dort sitzt, wo die Thumb-Mitte wäre:
    const frac = (target - min) / (max - min);
    const px = frac * (trackW - THUMB_W) + THUMB_W / 2;

    // Im gleichen Container wie Rail/Slider → links in Pixel
    pin.style.left = px + 'px';
  }

  function updateValue(n) {
    const slider = document.getElementById('slider_' + n);
    const target = parseInt(slider.dataset.target, 10);
    const val = parseInt(slider.value, 10);
    const off = Math.abs(val - target);

    // Pill (rechts)
    const valEl = document.getElementById('valpill_' + n);
    valEl.textContent = val;
    valEl.classList.remove('gray', 'yellow', 'green', 'red');
    if (off === 0) valEl.classList.add('green'); else valEl.classList.add('red');

    // Pin-Farbe
    const pin = document.getElementById('pin_' + n);
    pin.classList.remove('red', 'green', 'hit');
    if (off === 0) { pin.classList.add('green', 'hit'); } else { pin.classList.add('red'); }
  }

  // Initialisieren und bei Resize neu ausrichten
  (function init() {
    {{ for s in sliders }}
    positionPin({{ s.n }});
  updateValue({{ s.n }});
  {{ endfor }}

  // Keyboard-Input komplett verhindern (Pfeiltasten etc.)
  document.querySelectorAll('input[type="range"]').forEach(function (slider) {
    slider.addEventListener('keydown', function (e) {
      e.preventDefault();
      return false;
    });
  });

  window.addEventListener('resize', () => {
    {{ for s in sliders }} positionPin({{ s.n }}); {{ endfor }}
    });
  }) ();
</script>


{{ endblock }}