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

{% block title %}
Section C: Rating 5
{% endblock %}

{% block content %}

    <div class="card bg-light">
    <div class="card-body">


    <p>

    This is loan application was rate by real loan officers in Kampala: <br />

        <ul>

        </ul>

    <div align="center">
    <br />
    <img class="resize" src="{% static application %}" width=90% height=90% /> <br />
    <br />
    </div>


    <p>


    <table class="table-striped">
    <table id="answers">
            <thead><tr>
             <th>  </th>
            <th>  </th>
            <th>  </th>
             <th> 1 </th>
             <th> 2 </th>
             <th> 3 </th>
             <th> 4 </th>
             <th> 5 </th>
            </thead>

        {% for field in form.visible_fields|slice:"0:1" %}
            <tr>
                <th style="width:70%" > {% autoescape off %} {{ field.label | split:0 }} {% endautoescape %}</th>
                   <td> </td> <td> {{ field.label | split:1 }} </td>
                {% for choice in field %}
                    <td>{{ choice }}</td>
                {% endfor %} <td> {{ field.label | split:2 }} </td>
            </tr>
        {% endfor %}

    </table>
</table>

    </p>

    <p>


    <table class="table-striped">
    <table id="answers">

   <thead>
  <th>
       Now, please compare the costs of applying to
       likelihood receiving a loan for a person like this applicant. </br>
       In your opinion:
    </th>


   </thead>


        {% for field in form.visible_fields|slice:"1:2" %}
            <tr>
                <th style="width:70%" > {% autoescape off %} {{ field.label | split:0 }} {% endautoescape %}</th>
                   <td> </td> <td> {{ field.label | split:1 }} </td>
                {% for choice in field %}
                    <td>{{ choice }}</td>
                {% endfor %} <td> {{ field.label | split:2 }} </td>
            </tr>
        {% endfor %}


    </table>
</table>
    </p>

    </div>
    </div>

    </br>
    {% next_button %}

    <style>
    .myclass::-webkit-slider-thumb {
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        border: 1px solid #000000;
        height: 36px !important;
        width: 20px !important;
        border-radius: 3px !important;
        background: #ffffff !important;
        cursor: pointer !important !important;
        -webkit-appearance: none !important;
        margin-top: -14px !important;
    }

    input[type=range] {
        -webkit-appearance: none;
        margin: 18px 0;
        width: 100%;
    }

    input[type=range]:focus {
        outline: none;
    }

    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 8.4px;
        cursor: pointer;
        animate: 0.2s;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        background: #3071a9;
        border-radius: 1.3px;
        border: 0.2px solid #010101;
    }

    input[type=range]::-webkit-slider-thumb {
        border: 0px;
        height: 0px;
        width: 0px;
        border-radius: 0px;
        -webkit-appearance: none;
    }

    #answers td, #answers th {
        padding: 15px;
        vertical-align: center;
        text-align: center;
        border-bottom: 1px solid #ddd;
}
    }

    #answers th {
        text-align: center;
        padding-top: 12px;
        padding-bottom: 12px;
        font-weight: bold;
        table-layout: auto;
        vertical-align: center;

    }

    input[type=radio]{
        margin: -4px;
    }


</style>

{% endblock %}