{% block styles %}
<style type="text/css">
    .slidecontainer {
        width: 100%;
    }

    span {
        display: inline-block;
        width: 15%;
        text-align: left;

    }

    .slider {
        -webkit-appearance: none;
        width: 85%;
        height: 25px;
        background: #d3d3d3;
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        position: relative;
        margin-left: 70px;
        margin-right: 50px;

    }

    .slider:hover {
        opacity: 1;
    }

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        background: #000000;
        cursor: pointer;
    }

    .slider::-moz-range-thumb {
        width: 25px;
        height: 25px;
        background: #04AA6D;
        cursor: pointer;
    }

    datalist {
        display: flex;
        justify-content: space-between;
        color: black;
        width: 85%;
        margin-left: 70px;
        margin-right: 50px;


    }
</style>

<link href="{{ static 'global/css/style.css' }}" rel="stylesheet" type="text/css"/>
{% endblock %}

{{ block title }}
Fase 2
{{ endblock }}


{{ block content }}

<p>
    In questa fase dell'esperimento è stata/o accoppiato casualmente con un'altra persona. Le vostre identità
    rimarranno reciprocamente anonime. Le chiediamo di prendere una serie di decisioni riguardanti l'allocazione di
    risorse tra lei e l'altra persona.<br>
    <br>
    Alla fine dell'esperimento, verrà scelta a caso una persona per ogni coppia e verrà applicata una delle decisioni
    prese da questa persona. Questo determinerà i guadagni che entrambi riceverete in questa fase. In altre parole, se
    lei viene selezionata/o, una delle sue scelte determinerà il guadagno che riceverete sia lei che l'altra persona. Se
    non viene selezionata/o, verrà assegnata una scelta casuale fatta dall'altra persona e i suoi guadagni
    dipenderanno dalla scelta dell'altra persona rispetto alla distribuzione delle risorse.<br>
    <br>
    Per ciascuna "decisione" qui di seguito indichi come intende distribuire le risorse tra lei ("Lei") e l'altra
    persona ("Altra/o") contrassegnando la rispettiva posizione lungo il cursore.<br>
</p>

<div>
    <center><strong>Decisione 1</strong></center>
    <span>Lei:</span>
    <datalist>
        {{for p in C11}}
        <option value={{p}} label={{p}}></option>
        {{endfor}}
    </datalist>
    <input type="range" name="q1" min="1" max="9" step="1" class="slider">
    <datalist>
        {{for p in C21}}
        <option value={{p}} label={{p}}></option>
        {{endfor}}
    </datalist>
    <span>Altra/o:</span>
    <br><br>
</div>
<div>
    <center><strong>Decisione 2</strong></center>
    <span>Lei:</span>
    <datalist>
        {{for p in C12}}
        <option value={{p}} label={{p}}></option>
        {{endfor}}
    </datalist>
    <input type="range" name="q2" min="1" max="9" step="1" class="slider">
    <datalist>
        {{for p in C22}}
        <option value={{p}} label={{p}}></option>
        {{endfor}}
    </datalist>
    <span>Altra/o:</span>
    <br><br>
</div>

<div>
    <center><strong>Decisione 3</strong></center>
    <span>Lei:</span>
    <datalist>
        {{for p in C13}}
        <option value={{p}} label={{p}}></option>
        {{endfor}}
    </datalist>
    <input type="range" name="q3" min="1" max="9" step="1" class="slider">
    <datalist>
        {{for p in C23}}
        <option value={{p}} label={{p}}></option>
        {{endfor}}
    </datalist>
    <span>Altra/o:</span>
    <br><br>
</div>

<div>
    <center><strong>Decisione 4</strong></center>
    <span>Lei:</span>
    <datalist>
        {{for p in C14}}
        <option value={{p}} label={{p}}></option>
        {{endfor}}
    </datalist>
    <input type="range" name="q4" min="1" max="9" step="1" class="slider">
    <datalist>
        {{for p in C24}}
        <option value={{p}} label={{p}}></option>
        {{endfor}}
    </datalist>
    <span>Altra/o:</span>
    <br><br>
</div>

<div>
    <center><strong>Decisione 5</strong></center>
    <span>Lei:</span>
    <datalist>
        {{for p in C15}}
        <option value={{p}} label={{p}}></option>
        {{endfor}}
    </datalist>
    <input type="range" name="q5" min="1" max="9" step="1" class="slider">
    <datalist>
        {{for p in C25}}
        <option value={{p}} label={{p}}></option>
        {{endfor}}
    </datalist>
    <span>Altra/o:</span>
    <br><br>
</div>

<div>
    <center><strong>Decisione 6</strong></center>
    <span>Lei:</span>
    <datalist>
        {{for p in C16}}
        <option value={{p}} label={{p}}></option>
        {{endfor}}
    </datalist>
    <input type="range" name="q6" min="1" max="9" step="1" class="slider">
    <datalist>
        {{for p in C26}}
        <option value={{p}} label={{p}}></option>
        {{endfor}}
    </datalist>
    <span>Altra/o:</span>
    <br><br>
</div>


<button class="otree-btn-next btn btn-primary next-button otree-next-button">Confermi le scelte</button>


{{ endblock  }}