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

{% block styles %}
    <style>

    </style>
{% endblock %}

{% block scripts %}
    <script src="{% static 'js/button.js' %}"></script>
{% endblock %}


{% block title %}
    Carbon Footprint Calculator
{% endblock %}


{% block content %}


<div style="margin-bottom: 18pt">
    <div class="progress" style="margin-bottom: 12pt">
            <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
     </div>
    <p>
        With your answers below, we will determine your carbon footprint. At the end of the calculator, you will also receive
        feedback on how your footprint compares to the average in the UK. Therefore, please try to answer as precisely as possible, to the
        best of your knowledge.
    </p>
</div>

<div class="alert alert-warning" style="width:80%; margin-right: auto; margin-left: auto;">
    <p>
        On this page, we ask you for individual-level information about your mobility behavior. In your answers,
        please consider all private trips, i.e., please also include commuting trips to your work. Business trips (i.e., trips
        you must take during your working time) should be excluded.
    </p>
    <p>
        <strong>When answering the questions about mobility, please answer for your pre-pandemic behavior</strong>.
    </p>
</div>


    <!-- MOBILITY QUESTIONS -->
    <div class="container">
        <table class="table table-striped" style="width:80%; margin-right: auto; margin-left: auto;">
            <thead>
                <tr>
                    <th style="text-align: center">Your Mobility Behavior</th>
                </tr>
            </thead>
                <tbody>

                    <!-- CAR QUESTION -->
                    <div>
                        <tr>
                            <td><img style="width: 3%;margin-right:0.5cm" src="{% static 'img/car.png' %}">{{ form.car_miles.label }}</td>
                        </tr>
                        <tr>
                            <td>
                                <ul>
                                    <li>
                                        <label for="id_car_miles_1"><input type="radio" name="car_miles" value="0" required="" id="id_car_miles_1" class="form-check-input" onClick="show_hide_car(1);calculate_car_miles();">
                                        I never travel by car</label>
                                    </li>
                                    <li>
                                        <label for="id_car_miles_2"><input type="radio" name="car_miles" value="6000" required="" id="id_car_miles_2" class="form-check-input" onClick="show_hide_car(2);calculate_car_miles();">
                                        Little (6000 miles)</label>
                                    </li>
                                    <li>
                                        <label for="id_car_miles_3"><input type="radio" name="car_miles" value="9000" required="" id="id_car_miles_3" class="form-check-input" onClick="show_hide_car(3);calculate_car_miles();">
                                        Average (9000 miles)</label>
                                    </li>
                                    <li>
                                        <label for="id_car_miles_4"><input type="radio" name="car_miles" value="12000" required="" id="id_car_miles_4" class="form-check-input" onClick="show_hide_car(4);calculate_car_miles();">
                                        Much (12000 miles)</label>
                                    </li>
                                    <li>
                                        <label for="id_car_miles_5"><input type="radio" name="car_miles" value="-99" required="" id="id_car_miles_5" class="form-check-input" onClick="show_hide_car(5);">
                                        Enter actual miles travelled:</label>
                                    </li>

                                    <div id ="miles" style="display:none">
                                        <input id="miles_field" class = "form-control" type="number" name="miles_field" min="1" max="50000" oninput="calculate_car_miles();">
                                    </div>
                                </ul>

                                <div id="car" style="display:none">
                                    {{ form.car_size_mpg.label }}

                                    <ul>
                                        <li>
                                        <label for="id_car_mpg_1"><input type="radio" name="car_size_mpg" value="35" id="id_car_mpg_1" class="form-check-input">
                                            Sports car or large SUV (35 mpg)</label>
                                        </li>
                                        <li>
                                        <label for="id_car_mpg_2"><input type="radio" name="car_size_mpg" value="46" id="id_car_mpg_2" class="form-check-input">
                                            Small or medium SUV, or MPV (46 mpg)</label>
                                        </li>
                                        <li>
                                        <label for="id_car_mpg_3"><input type="radio" name="car_size_mpg" value="52" id="id_car_mpg_3" class="form-check-input">
                                            City, small, medium, large or estate car (52 mpg)</label>
                                        </li>

                                    </ul>
                                </div>
                            </td>
                        </tr>
                    </div>


                    <!-- BUS QUESTION -->
                    <div>
                        <tr>
                            <td><img style="width: 3%;margin-right:0.5cm" src="{% static 'img/bus.png' %}"> How much do you travel by bus? Thinking about the time before the pandemic, ...</td>
                        </tr>
                        <tr>
                            <td>
                                <table class="table table-light">
                                    <body>
                                    <tr style="background-color: white">
                                        <td style="width:80%">How many miles did you travel <em>every week</em> by bus for <em>commuting</em>?</td>
                                        <td>{{ form.bus_miles_commute }}</td>
                                    </tr>
                                    <tr style="background-color: white">
                                        <td>In an <em>average year</em>, how many miles did you travel by bus <em>for vacation/travel trips</em>?</td>
                                        <td>{{ form.bus_miles_travel }}</td>
                                    </tr>
                                    </body>
                                </table>
                            </td>
                        </tr>
                    </div>


                    <!-- TRAIN QUESTION -->
                    <div>
                        <tr>
                            <td><img style="width: 3%;margin-right:0.5cm" src="{% static 'img/train.png' %}">How much do you travel by train? Thinking about the time before the pandemic, ...</td>
                        </tr>
                        <tr>
                            <td>
                                <table class="table table-light">
                                    <body>
                                    <tr style="background-color: white">
                                        <td style="width:80%">How many miles did you travel <em>each week</em> by train <em>for commuting trips</em>?</td>
                                        <td>{{ form.train_miles_commute }}</td>
                                    </tr>
                                    <tr style="background-color: white">
                                        <td>In an <em>average year</em>, how many miles did you travel by train <em>for vacation/travel trips</em>?</td>
                                        <td>{{ form.train_miles_travel }}</td>
                                    </tr>
                                    </body>
                                </table>
                            </td>
                        </tr>
                    </div>


                    <!-- PLANE QUESTION -->
                    <div>
                        <tr>
                            <td><img style="width: 3%;margin-right:0.5cm" src="{% static 'img/plane.png' %}">{{ form.plane_hours.label }}</td>
                        </tr>
                        <tr>
                            <td>{{ form.plane_hours }}</td>
                        </tr>
                    </div>

                </tbody>
              </table>
            </div>


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





{% endblock %}