{{ block title }}
    Tutorial - Slider Choice
{{ endblock }}
{{ block content }}
<div class="alert alert-primary" role="alert">
  On this page, you can influence the probability that either event A or event B happens. To influence the probability, please click on the slider.
    It is costly to influence the probability. For this task, you have an endowment of 3€ that you can spend on influencing the probability.
    Any unspent endowment may go towards your bonus payoff. Please see below the slider for the current probabilities and the price.
</div>

    <style>
        .mgslider-wrapper {
            border-spacing: 10px;
        }
        .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 {
            height: 16px;
            width: 100%;
            background: #1e5bff;
        }
        .mgslider-feedback {
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>
    <div>
        <p style="margin-bottom:2cm;">
        You can now use an endowment of <strong> {{ C.ENDOWMENT }}€ </strong> to change the probability that event A or event B happens.

        </p>
    </div>

    <div class="container">
      <div class="row" style="margin-bottom:0.5cm">
        <div class="col-sm">

          <div class="card">
              <div class="card-body">
                <span style="font-weight: bold; font-size: 20px;">Event A</span>
              </div>
          </div>

        </div>
        <div class="col-sm">

          <div class="card">
              <div class="card-body">
                <span style="font-weight: bold; font-size: 20px; float: right">Event B</span>
              </div>
          </div>

        </div>
      </div>
    </div>

    {{ formfield_errors 'event_wtp' }}
    <p>
        <strong>Click the blue bar to reveal the slider.</strong>
    </p>

    <div id="sliders_here"></div>

    <script src="{{ static 'mgslider_train.js' }}"></script>

    <script>
        $(document).ready(function (event) {
            slider1 = new mgslider("event_wtp", 0, 1, 0.01);
            slider1.print(document.getElementById("sliders_here"));
        });
    </script>
    <br>

    <div style="width:100px; margin:0 auto;">
        {{ next_button }}
    </div>


{{ endblock }}