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

<!-- Title -->
{{ block title }}
<span class="sample">**Sample**</span>
<div class="Title">
    <h3 style="float: left"><u>Role:</u> Investor</h3>
    <h3 style="float: right">End of Round 7</h3>
</div>
{{ endblock }}

<!-- Sample End of Round Results -->
<div class="feed">
    <h4>End of Round Results:</h4>
    <table>
        <tr>
            <th>True Investment Quality:</th>
            <td>Low</td>
        </tr>
        <tr>
            <th>Advisor's Advice:</th>
            <td>Invest</td>
        </tr>
        <tr>
            <th>Your Decision:</th>
            <td>Invest</td>
        </tr>
        <tr>
            <th>Total Investors:</th>
            <td>5</td>
        </tr>
        <tr>
            <th>Advisor's Payoff:</th>
            <td>3 Points</td>
        </tr>
        <tr class="last">
            <th>Your Payoff:</th>
            <td>4 Points</td>
        </tr>
    </table>
</div>

<!-- Sample Player History Table-->
<div class="tablescroll">
    <h4>Previous Results:</h4>
    <div>
        <table class="history_header">
            <tr>
                <th>Round</th>
                <th>Advisor's Advice</th>
                <th>Your Decision</th>
                <th>Other Investors</th>
                <th>Total Investors</th>
                <th>True Quality</th>
                <th>Your Payoff</th>
                <th>Advisor's Payoff</th>
            </tr>
        </table>
        <table id="data_table">
            <tr>
                <td>7</td>
                <td>Invest</td>
                <td>Invest</td>
                <td>4</td>
                <td>5</td>
                <td>Low</td>
                <td>4</td>
                <td>3</td>
            </tr>
            <tr>
                <td>6</td>
                <td>Invest</td>
                <td>Invest</td>
                <td>3</td>
                <td>4</td>
                <td>Medium</td>
                <td>7</td>
                <td>6</td>
            </tr>
            <tr>
                <td>5</td>
                <td>Keep</td>
                <td>Invest</td>
                <td>1</td>
                <td>2</td>
                <td>Low</td>
                <td>1</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Invest</td>
                <td>Invest</td>
                <td>4</td>
                <td>5</td>
                <td>Low</td>
                <td>4</td>
                <td>3</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Invest</td>
                <td>Invest</td>
                <td>3</td>
                <td>4</td>
                <td>High</td>
                <td>14</td>
                <td>0</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Keep</td>
                <td>Invest</td>
                <td>2</td>
                <td>3</td>
                <td>Medium</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Invest</td>
                <td>Invest</td>
                <td>0</td>
                <td>1</td>
                <td>Low</td>
                <td>0</td>
                <td>3</td>
            </tr>
        </table>
    </div>
</div>

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

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

<script>
// Checking if button has been clicked
window.onload = function () {
    const IsClicked = sessionStorage.getItem('IsClicked');

    if (IsClicked === 'true') {
        document.getElementById('validation').disabled = true;
    }
    // Adjusting History Width
  const headerCells = document.querySelectorAll('.history_header th');
  const dataCells = document.querySelectorAll('#data_table td');

  headerCells.forEach((headerCell, index) => {
      dataCells[index].style.width = headerCell.offsetWidth + 'px';
  });
};

// Websocket to check if all players are ready
function liveRecv(data) {
    if (data === 'all_ready') {
        sessionStorage.setItem('IsClicked', 'false')
        document.forms[0].submit();
    }
}
</script>

{{ endblock }}