{{ block title }}
        Stock 10 - Investment
{{ endblock }}
{{ block content }}
<p>
  <b>
  If this round is drawn for your bonus payment, the bonus payment will be based on this investment decision.
  </b>
  <br>
   Remember: The stock in this round is unrelated to those in other rounds.
</p>
<p>
{{ formfield_errors 'invest' }}
  How much of a sum of £10 000 do you want to keep invested in the stock? Please select an amount between £0 and £10 000.
  <br>Click the blue bar to reveal the slider.
  <div id="sliders_here"></div>
  <script src="{{ static 'mgslider.js' }}"></script>
    <script>
        $(document).ready(function (event) {
            slider1 = new mgslider("invest", -0, 10000, 1, "£0", "£10 000","Amount Invested (£)");
            slider1.recall = false; // Optional line to remember value across errors
            slider1.print(document.getElementById("sliders_here"));
        });
    </script>
</p>
    <br>
    {% next_button %}
{{ endblock }}


{% block style %}
<style>

.slider-container {
    display: inline-block;
}

.circle {
    width: 30px;
    height: 30px;
    background-color: #ccc;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    line-height: 30px; /* Center the text vertically */
}
.sliderValue {
    position: absolute;
    top: -30px; /* Adjust top position as needed */
    transform: translateX(-50%);
}

:root {
  --slider-color: #d3d3d3; /* Default color */
  --slider-thumb-color: #007BFF; /* Default thumb color */
  --slider-thumb-hover-color: #0056b3; /* Darker blue color on hover */
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 0px;
  border-radius: 50%;
  background: var(--slider-color); /* Use CSS variable */
  cursor: pointer;
  position: relative;
  margin-top: -5px;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 0px;
  border-radius: 50%;
  background: var(--slider-color); /* Use CSS variable */
  cursor: pointer;
  position: relative;
  margin-top: -5px;
}

.slider.active::-webkit-slider-thumb {
  height: 25px; /* Increase height on interaction */
}

.slider.active::-moz-range-thumb {
  height: 25px; /* Increase height on interaction */
}

.slider.interacted:hover::-webkit-slider-thumb {
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 0 50%;
  transform: rotate(45deg);
  background: var(--slider-thumb-hover-color);
   margin-top: -20px;
}

.slider.interacted:hover::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 0 50%;
  transform: rotate(45deg);
  background: var(--slider-thumb-hover-color);
   margin-top: -20px;
}
datalist {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.tickmarks {
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 100%;
}

.tickmarks span {
    position: absolute;
    bottom: -5px; /* Adjust distance from the track */
    width: 1px; /* Tick width */
    height: 5px; /* Tick height */
    background-color: black; /* Tick color */
    transform: translateX(-50%);
}

.tickmarks span:nth-child(1) {
    left: 1%;
}

.tickmarks span:nth-child(2) {
    left: 16.666%; /* Adjust for the number of ticks */
}

.tickmarks span:nth-child(3) {
    left: 33.333%; /* Adjust for the number of ticks */
}

.tickmarks span:nth-child(4) {
    left: 50%; /* Adjust for the number of ticks */
}

.tickmarks span:nth-child(5) {
    left: 66.666%; /* Adjust for the number of ticks */
}

.tickmarks span:nth-child(6) {
    left: 83.333%; /* Adjust for the number of ticks */
}

.tickmarks span:nth-child(7) {
    left: 99%;
}

     .custom-border {
        border-color: #d6d8db;
    }
      .radio-inline {
        margin-right: 20px;
        margin-left: 30px;
    }

input {
    width: 10%;
}
</style>
{% endblock %}




{% block script %}

   <style>
        .mgslider-wrapper {
            border-spacing: 10px;
        }
        .mgslider-show {
            text-align: center;
        }
        .mgslider-limit {
            width: 10%;
            min-width: 75px;
            height: 40px;
            margin: 100px;
            text-align: center;
            background: #eee;
            border: 1px solid #888;
        }
        .mgslider-limit, .mgslider-value {
            font-variant-numeric: tabular-nums;
        }
        .mgslider-before {
            width: 100%;               /* Set width to match the slider */
            height: 6px;               /* Match the slider's height */
            background-color: #007bff; /* Adjust color to match slider */
            border-radius: 5px;        /* Match slider's border radius */
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Optional shadow for depth */
            cursor: pointer;
        }
        .mgslider-feedback {
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

    </style>


{% endblock %}