{% extends "global/Page.html" %}
{% load staticfiles otree_tags %}


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


{# ****************************************************************************************************************** #}
{# *** CONTENT *** #}
{# ****************************************************************************************************************** #}
{% block content %}
<div align="center">
        <h2 text-align="center">
            <span style="text-transform: uppercase; color: rgb(244,161,13);">FUTURE:</span> The Best Economy
        </h2>
</div>
<br>

{% if page == 1 %}
<div class="wrapper instructions" text-align="justify" style="font-size: large;">
Next, we would like you to evaluate different projections of <strong style="color: rgb(244,161,13);">future</strong> <strong>personal income growth</strong>. The following 4 pages will show you two growth projections in the same plot.
<br>
<br>
After looking at each figure, you'll be asked to select which of the two projections you believe to be the better economy.      
</div>
<br>
<br>
{% endif %}

    <div class="wrapper">
        <!-- ------------------------------------------------------------------------------------------------------- -->
        <!-- Table - Lottery Decisions (Option A/B) -->
        <!-- ------------------------------------------------------------------------------------------------------- -->

            <table class="table" style="border:none">
                <tr style="border:none">
                Which of these two personal income growth projections do you think is better?
                </tr>
                <br>
                <br>
                <tr style="border:none">
                <td style="border:none">
                {% if payoff_delayed == 4.0 %}
                        <img src="{% static 'App2/staircase-updated/staircase1_Avg/stair_av23.jpg' %}" width="591.5" height="389.35"/>
                {% endif %}
                
                {% if payoff_delayed == 4.5 %}
                        <img src="{% static 'App2/staircase-updated/staircase1_Avg/stair_av25.jpg' %}" width="591.5" height="389.35"/>
                {% endif %}
                
                {% if payoff_delayed == 5.0 %}
                        <img src="{% static 'App2/staircase-updated/staircase1_Avg/stair_av27.jpg' %}" width="591.5" height="389.35"/>
                {% endif %}
                
                {% if payoff_delayed == 5.5 %}
                        <img src="{% static 'App2/staircase-updated/staircase1_Avg/stair_av29.jpg' %}" width="591.5" height="389.35"/>
                {% endif %}    
                
                {% if payoff_delayed == 6.0 %}
                        <img src="{% static 'App2/staircase-updated/staircase1_Avg/stair_av31.jpg' %}" width="591.5" height="389.35"/>
                {% endif %}                  
                                
                {% if payoff_delayed == 6.5 %}
                        <img src="{% static 'App2/staircase-updated/staircase1_Avg/stair_av33.jpg' %}" width="591.5" height="389.35"/>
                {% endif %}        
                
                {% if payoff_delayed == 7.0 %}
                        <img src="{% static 'App2/staircase-updated/staircase1_Avg/stair_av35.jpg' %}" width="591.5" height="389.35"/>
                {% endif %}    
                
                {% if payoff_delayed == 7.5 %}
                        <img src="{% static 'App2/staircase-updated/staircase1_Avg/stair_av37.jpg' %}" width="591.5" height="389.35"/>
                {% endif %}                      
                
                {% if payoff_delayed == 0.5 %}
                        <img src="{% static 'App2/staircase-updated/staircase1_Avg/stair_av09.jpg' %}" width="591.5" height="389.35"/>
                {% endif %}
                
                {% if payoff_delayed == 1.0 %}
                        <img src="{% static 'App2/staircase-updated/staircase1_Avg/stair_av11.jpg' %}" width="591.5" height="389.35"/>
                {% endif %}
                
                {% if payoff_delayed == 1.5 %}
                        <img src="{% static 'App2/staircase-updated/staircase1_Avg/stair_av13.jpg' %}" width="591.5" height="389.35"/>
                {% endif %}    
                
                {% if payoff_delayed == 2.0 %}
                        <img src="{% static 'App2/staircase-updated/staircase1_Avg/stair_av15.jpg' %}" width="591.5" height="389.35"/>
                {% endif %}                  
                                
                {% if payoff_delayed == 2.5 %}
                        <img src="{% static 'App2/staircase-updated/staircase1_Avg/stair_av17.jpg' %}" width="591.5" height="389.35"/>
                {% endif %}        
                
                {% if payoff_delayed == 3.0 %}
                        <img src="{% static 'App2/staircase-updated/staircase1_Avg/stair_av19.jpg' %}" width="591.5" height="389.35"/>
                {% endif %}    
                
                {% if payoff_delayed == 3.5 %}
                        <img src="{% static 'App2/staircase-updated/staircase1_Avg/stair_av21.jpg' %}" width="591.5" height="389.35"/>
                {% endif %}                   
                  </td>                                          
                 <td style="border:none">
                        <button class="btn btn-primary choice" style="height:50px;width:50px;color: rgb(240,128,128); background-color: rgb(255,255,255); border-color: rgb(0,0,0)" name="future_choice" value="A" required>
                            Choose A
                        </button>
                        <button class="btn btn-primary choice" style="height:50px;width:50px;color: rgb(70,130,180); background-color: rgb(255,255,255); border-color: rgb(0,0,0)" name="future_choice" value="B" required>
                            Choose B
                        </button>
                 </td>
                </tr>
            </table>

    </div>

{% endblock %}