{% 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 1
</center>
{% endblock %}

{% block content %}

<div class="question">

<p>Which option do you prefer the most?</p>
</div>

<div class="reponse">
    {% if player.reveal_state == "YES" and player.state == "aligned" %}
        <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>

        {% elif player.reveal_state == "YES" and player.state == "unaligned" %}
        <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>£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%; 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>£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%;">
                    <center>
                    <input type=radio name="choice" value="B">
                    </center>
                </td>
            </tr>
        </table>

        {% else %}

   
        <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 style="color:red;">£?</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%;">
                    <b>£5,00</b> to you and <b style="color:red;">£?</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>

        </table>

        <br>
        <br>
        <u>REMINDER:</u> here you can see the two choice situations, but you do not know which situation has been drawn. 
        <br>
        <br>

        <center style="background-color:lightgray">
            <table style="width:100%;">
                <tr>
                    <td style="text-align:center; width:45%;">
                        <b>SITUATION 1</b>
                    </td>
                    <td style="width:10px;">
                    </td>
                    <td style="text-align:center; width:45%;">
                        <b>SITUATION 2</b>
                    </td>
                </tr>
            
                <tr>
                    <td>
                        <table style="border: 3px solid black; width: 100%; font-weight:normal;">
                            <tr>
                                <td style="border: 3px solid black; padding:1%; width:30%">
                                   <b>OPTION A</b> 
                                </td>
                                
                                <td style="border: 3px solid black; padding:1%; width:70%">
                                   <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>
            
                            </tr>
                
                            <tr>
                                <td style="border: 3px solid black; padding:1%; width:30%">
                                    <b>OPTION B</b>
                                </td>
                                <td style="border: 3px solid black; padding:1%; width:70%">
                                 <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>
                            </tr>
                        </table>
                    </td>
            
                    <td>
                    </td>
            
                    <td>
                        <table style="border: 3px solid black; width: 100%; font-weight:normal;">
                            <tr>
                                <td style="border: 3px solid black; padding:1%; width:30%">
                                   <b>OPTION A</b> 
                                </td>
                                
                                <td style="border: 3px solid black; padding:1%; width:70%">
                                   <b>£6,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>
            
                            </tr>
                
                            <tr>
                                <td style="border: 3px solid black; padding:1%; width:30%">
                                    <b>OPTION B</b>
                                </td>
                                <td style="border: 3px solid black; padding:1%; width:70%">
                                 <b>£5,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>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            </center>
 
    {% endif %}
    

   
</div>

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

{% endblock %}