{{ load static }}
{{ block content }}
<!--External CSS & js-->
<link rel="stylesheet" href="{{ static 'style_sheets/stage_2.css' }}" type="text/css">
<script src="{{ static 'java_scripts/stage_2.js' }}"></script>

<!-- Title -->
{{ block title }}
<div class="Title_decision">
    <h3 style="float: left"><u>Role:</u> Investor</h3>
    <span>Advisor's Advice: <b style="color: red">{{ advice }}</b></span>
    <h3 style="float: right">Stage 2 Decision 3</h3>
</div>
{{ endblock }}

<!-- Payoff Tables -->
<div class="tables-container">
    <div>
        <p class="payofftableheader">Investors Payoff Table</p>
        <table class="playerpayofftable" style="display: flex; margin: unset">
            <tr>
                <td style="width: 75px;"></td>
                <td class="header" colspan="5">Total Investors (Including You)</td>
            </tr>
            <tr>
                <td style="font-style: italic; width: 75px;">Quality</td>
                <td class="row1">1</td>
                <td class="row1">2</td>
                <td class="row1">3</td>
                <td class="row1">4</td>
                <td class="row1">5</td>
            </tr>
            <tr>
                <td class="column1">Low</td>
                {{ for p in pb_table.1 }}
                <td>{{ p }}</td>
                {{ endfor }}
            </tr>
            <tr>
                <td class="column1">High</td>
                {{ for p in pb_table.3 }}
                <td>{{ p }}</td>
                {{ endfor }}
            </tr>
        </table>

    </div>
    <div style="margin: 20px"></div>
    <div>
        <p class="payofftableheader">Advisor's Payoff Table</p>
        <table class="playerpayofftable" style="display: flex; margin: unset">
            <tr>
                <td style="width: 75px;"></td>
                <td class="header" colspan="6">Total Investors</td>
            </tr>
            <tr>
                <td  style="font-style: italic; width: 75px;">Quality</td>
                <td class="row1">0</td>
                <td class="row1">1</td>
                <td class="row1">2</td>
                <td class="row1">3</td>
                <td class="row1">4</td>
                <td class="row1">5</td>
            </tr>
            <tr>
                <td class="column1">Low</td>
                {{ for p in pa_table.1 }}
                <td>{{ p }}</td>
                {{ endfor }}
            </tr>
            <tr>
                <td class="column1">High</td>
                {{ for p in pa_table.3 }}
                <td>{{ p }}</td>
                {{ endfor }}
            </tr>
        </table>
    </div>
</div>

<!-- Slider & Info. -->
<h4 style="margin: 50px">Please use the slider to select the <span style="color: red">maximum</span> outside option for which you will choose Invest.</h4>
<label><input class="decision-slider" type="range" name="pb_outside_option" id="slider" oninput="updateInputValue(this.value)" value="1" min="1" max="300"></label>
<label><input type="number" id="sliderInput" name="pb_outside_option" oninput="updateSliderFromInput(this.value)" value="1" size="3" min="1" max="300"></label>


<!-- Next Button with confirmation pop-up & Instructions Button-->
<div class="button">
    <button onclick="ConfirmDecision(event)" class="Instructions">Continue</button>
    <button id="pop-up" class="Instructions" style="float: left; background-color: red">Instructions</button>
</div>

{{ include '_static/instructions/stage_2_decision_3_instructions.html' }}

{{ endblock }}