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

{% block styles %}
    <link rel="stylesheet" type="text/css" href="{% static "css/sliders.css" %}">
    <style>
      th, td {
        padding: 5px;
      }
      td:nth-child(1) {
          width: 15%;
          font-style: italic;
          margin-left: 12pt;
      }
      td:nth-child(2) {
          text-align: center;
          font-weight: bold;
          vertical-align: middle;
      }
      td:nth-child(3) {
          width: 10%;
          text-align: right;
          vertical-align: middle;
          font-style: italic;
      }
    </style>
{% endblock %}


{% block scripts %}
    <script type="text/javascript" src="{% static 'js/sliders.js' %}"></script>
{% endblock %}


{% block title %}
    Adoption Costs
{% endblock %}


{% block content %}

    <div class="alert alert-danger" id="alert" style="display:none;">
        Please indicate your estimate for all items. If you would like to answer '0' for an item, please make sure to click the slider once.
    </div>

    <div class="alert alert-light" style="border-color: lightgrey; color: black">
            <p>
                On this page, we ask you to indicate <strong>how costly it would be to you personally to adopt various behaviours</strong>.
                The scale goes from "not costly at all" to "prohibitively costly".
                When considering costs, please think not only about <em>monetary costs</em>,
                but also about how <em>difficult</em> it would be to you personally to adopt this behaviour.
            </p>
    </div>

    <div  style="margin-bottom:1cm; margin-top:1cm; position:sticky; top: -1px; padding: 10px 0px; background-color: white; z-index:5;">
        <p>
            Please indicate how <strong>costly</strong> the adoption of each item in the list below is to you:
        </p>
    </div>

        <!-- Making the table responsive -->
		<div style="overflow-x: auto;">

        <!-- Adding table in the web page -->
        <table class="table table-striped" style="width:80%; margin-right: auto; margin-left: auto;">
            <thead>
                <tr>
                    <th></th>
                    <th style="text-align:center">Adoption Costs</th>
                    <th></th>
                </tr>
            </thead>

            <tbody>
                {% for field in form %}
                    <tr>
                        <td></td>
                        <td>{{ field.label }}</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td style="padding-bottom: 18pt; padding-top: 18pt">Not costly at all</td>
                        <td>
                            <div class="slidecontainer" style="margin-left: auto; margin-right: auto">
                                <input type="range" name="{{ field.name }}" min="0" max="100" value="0" step="1" id="{{ field.name }}" class="slider" style="width: 100%">
                            </div>
                            <div> {{ field.errors }}</div>
                        </td>
                        <td>prohibitively costly</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>


	<div style="margin-top:12pt; text-align: right">
       <button name="slider_task_check" id="test" class="btn btn-primary btn-large" onclick="checkTouched()">Next</button>
    </div>

{% endblock %}