{{ extends "global/Page.html" }}
{{ block title }}Provide an answer{{ endblock }}
{{ block content }}
  {{ formfield 'answer' label=answer_label }}
    <style>
        .mgslider-wrapper {
            border-spacing: 10px;
        }
        .mgslider-limit {
            width: auto;
            min-width: 20px;
            height: 40px;
            margin: 100px;
            text-align: center;
            padding: 10px;
        }
        .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>

    {{ formfield_errors 'confidence' }}
    <p> How confident are you on scale of 0 to 100?</p>

    <div id="slider_here"></div>

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

  <button id='submit-button' class="btn btn-primary" type="button">Submit</button>

  <div id="prediction" style="display:none; padding-top:10px;">
    <p>What do you think are the most frequent first-ranked answers given by others? Please give at least 1 answer.</p>
    <div class="controls ">
      1. <input type="text" class="form-control" id="id_prediction1" name="prediction1" required="true">
    </div>
    <div class="controls">
      2. <input type="text" class="form-control" id="id_prediction2" name="prediction2">
    </div>
    <div class="controls">
      3. <input type="text" class="form-control" id="id_prediction3" name="prediction3">
    </div>
    <div class="controls">
      4. <input type="text" class="form-control" id="id_prediction4" name="prediction4">
    </div>
      5. <div class="controls">
    <input type="text" class="form-control" id="id_prediction5" name="prediction5">
    </div>
    <div style="padding-top:10px;">
    {{ next_button }}
    </div>
   </div>

  <script type="text/javascript">
        $(document).ready(function (event) {
            slider1 = new mgslider("conficence", 0, 100, 1);
            slider1.print(document.getElementById("slider_here"));
    $("#submit-button").click(function(){
            if( $('#id_answer').val().length > 0 ) {
          $("#submit-button").css('display', 'none');
          $("#id_answer").attr('readonly', true);
          $(".mgslider").prop('disabled', true);
          $("#prediction").css("display", "block");
            }
    });

        });
  </script>
{{ endblock }}