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


{# ****************************************************************************************************************** #}
{# *** STYLES *** #}
{# ****************************************************************************************************************** #}
{% block styles %}
    <link href="{% static 'EXLEY_DANA/EXLEY_CONSIGNE_style.css' %}" rel="stylesheet">
    <link href="{% static 'EXLEY_DANA/EXLEY_DEMOG_style.css' %}" rel="stylesheet">
{% endblock %}

{% block title %}
<center>
DECISION 3
</center>
{% endblock %}

{% block content %}

    <div class="question">
        <p>Which option do you prefer the most?</p>
    </div>

    <div class="reponse">

        <table style="border: 3px solid black; width: 50%;">
            <tr>
                <td style="border: 3px solid black; padding:1%; font-weight:bold;" >
                    OPTION A
                </td>
                <td style="border: 3px solid black; padding:1%; width:65%">
                    <b>£6,00</b> to you and <b>£5,00</b> to charity 
                    {% if participant.vars.association_choice == 'World Wide Fund for Nature - UK (WWF)' %}
                        WWF
                    {% elif participant.vars.association_choice == 'GreenPeace - UK (GP)' %}
                        GP
                    {% elif participant.vars.association_choice == 'Sea Shepherd (SP)' %}
                        SP
                    {% elif participant.vars.association_choice == 'The Nature Conservancy (NC)' %}
                        NC
                    {% elif participant.vars.association_choice == 'Surfers Against Sewage (SAS)' %}
                        SAS
                    {% endif %}  
                </td>

                <td style="border: 3px solid black; padding:1%; width: 10%;">
                    <center>
                    <input type=radio name="choice" value="A">
                    </center>
                </td>
            </tr>

            <tr>
                <td style="border: 3px solid black; padding:1%; font-weight:bold;" >
                    OPTION B
                </td>
                <td style="border: 3px solid black; padding:1%; width:65%">
                    <b>£5,00</b> to you and <b>£1,00</b> to charity 
                    {% if participant.vars.association_choice == 'World Wide Fund for Nature - UK (WWF)' %}
                        WWF
                    {% elif participant.vars.association_choice == 'GreenPeace - UK (GP)' %}
                        GP
                    {% elif participant.vars.association_choice == 'Sea Shepherd (SP)' %}
                        SP
                    {% elif participant.vars.association_choice == 'The Nature Conservancy (NC)' %}
                        NC
                    {% elif participant.vars.association_choice == 'Surfers Against Sewage (SAS)' %}
                        SAS
                    {% endif %}  
                </td>
                <td style="border: 3px solid black; padding:1%;">
                    <center>
                    <input type=radio name="choice" value="B"> 
                    </center>
                </td>
            </tr>
        </table>
      
    </div>

    <center> 
        <button class="blue-button">NEXT</button>
    </center>

{% endblock %}