{{ extends 'global/Page.html' }}
{{ block title }}Country Data{{ endblock }}

{{ block content }}

<!-- CDN link for font awesome icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<p id="country-name">Welcome, <strong>{{player.role}}.</strong></p>
<div id="country-flag"></div>

<p id="penalty-msg" hidden></p>

<p id="stats-message" hidden>Please read and study your country's data below.</p>

<table id="country-stats" hidden>
    <tr>
        <th style="width:18%"></th>
        <th style="width:12%" class="header-name">Energy</th>
        <th style="width:12%" class="header-name">Consumer Products</th>
        <th style="width:12%" class="header-name">Medical Supplies</th>
        <th style="width:12%" class="header-name">Food</th>
    </tr>
    <tr>
        <th class="header-icon"></th>   
        <th class="header-icon"><i class="fas fa-plug fa-lg"></i></th>
        <th class="header-icon"><i class="fas fa-shopping-cart fa-lg"></i></th>
        <th class="header-icon"><i class="fas fa-pump-medical fa-lg"></i></th>
        <th class="header-icon"><i class="fas fa-utensils fa-lg"></i></th>
    </tr>
    <tr>
        <td style="font-weight:600">Stockpile</td>
        <td>{{player.stockpile_energy}}</td>
        <td>{{player.stockpile_products}}</td>
        <td>{{player.stockpile_medical}}</td>
        <td>{{player.stockpile_food}}</td>
    </tr>
    <tr>
        <td style="font-weight:600">Needs</td>
        <td>{{player.needs_energy}}</td>
        <td>{{player.needs_products}}</td>
        <td>{{player.needs_medical}}</td>
        <td>{{player.needs_food}}</td>
    </tr>
    <tr>
        <td style="font-weight:600">Production</td>
        <td>{{player.outputs_energy}}</td>
        <td>{{player.outputs_products}}</td>
        <td>{{player.outputs_medical}}</td>
        <td>{{player.outputs_food}}</td>
    </tr>
    <tr>
        <td style="font-weight:600">Production Cost (per unit)</td>
        <td>{{player.costs_energy}}</td>
        <td>{{player.costs_products}}</td>
        <td>{{player.costs_medical}}</td>
        <td>{{player.costs_food}}</td>
    </tr>
</table><br>

<p id="savings">
    You start with savings of <strong>${{player.savings}}</strong>.
</p>

<p id="rules"> 
  <strong> Rules </strong> 
</p>

<!--<ol>
    <li>In each round, try to obtain enough of each of the 4 resources (energy, consumer products, medical supplies, food) to meet your country's needs.</li>
    <li>If resource needs are not met, production output will be reduced in the next round.</li>
    <li>You may choose to produce resources at a cost, trade with other players, and borrow and lend.</li>
    <li>You may also choose to gift resources and donate funds to other countries. </li>
</ol>-->

<ol>
    <li>In each round, try to obtain enough of each of the 4 resources (energy, consumer products, medical supplies, food) to meet your country's needs.</li>
    <li>If resource needs are not met, the following penalties apply:
        <ul>
            <li><strong>Production costs are increased</strong>. You’ll encounter the biggest rise in production costs if you are unable to meet medical needs, followed by food and energy needs, and finally consumer good needs</li>
            <li><strong>Production output is reduced</strong>. For every unit of consumer goods not met, it reduces output of all goods by 0.5. For every unit of energy not met, it reduces output of all goods by 0.75. For every unit of food not met, it reduces output of all goods by 0.75. For every unit of medical supplies not met, it reduces output of all goods by 1.</li>
        </ul>
    </li>
    <li>You may choose to produce resources at a cost, trade with other players, and borrow and lend.</li>
    <li>You may also choose to gift resources and donate funds to other countries. </li>
</ol>

<p id="otherinfo">
    <Strong> Other Information</Strong>
</p>

<ol>
    <li>Each country has a relative advantage in producing a resource, as follows:
        <ul>
            <li> <strong>Sadi Arabica</strong> - <i>Energy</i></li>
            <li> <strong>Chinland</strong> - <i>Consumer products</i></li>
            <li> <strong>Amerikas</strong> - <i>Medical supplies</i></li>
            <li> <strong>Brazilia</strong> - <i>Food</i></li>
        </ul>
    </li>
    <li>Amerikas is the richest country, and Brazil is the poorest.</li>
    <li>The world price for all products is currently at <strong>2</strong> per unit.</li>
</ol>

{{ next_button }}

<style>
    th {
        font-size: 16px; 
        text-align: center; 
        padding: 10px 10px 10px 10px;
    }
    
    td {
        font-size: 16px; 
        text-align: center;
        padding: 5px 10px 5px 10px;
        border: 1px solid lightgray;
    }

    table {
        width: 66%;
        border: 2px solid lightgray;
    }
    
    .fas {
        color: royalblue;
        font-size: 24px;
    }
    
    .header-name {
        border-top: 2px solid lightgray;
        border-left: 1px solid lightgray;
        border-right: 1px solid lightgray;
    }
    
    .header-icon {
        border-bottom: 2px solid lightgray;
        border-left: 1px solid lightgray;
        border-right: 1px solid lightgray;
    }
    
    #country-name, #country-flag {
        display: inline-block;
    }
    
    #country-flag {
        margin-left: 8px;
    }
    
    #penalty-msg {
        font-weight: 600;
        color: tomato;
    }
    
    #rules{
        font-size: 18px;
    }
    
    #otherinfo {
        font-size:  18px;
    }
</style>

<script>
    window.addEventListener('DOMContentLoaded', (event) => {
        displayFlag();
        displayPenaltyMsg();
    });
    
    if ({{player.round_number}} === 1) {
        let stats_table = document.getElementById("country-stats");
        let stats_msg = document.getElementById("stats-message");
        let starting_msg = document.getElementById("starting-msg");
        stats_table.removeAttribute("hidden");
        stats_msg.removeAttribute("hidden");
        starting_msg.removeAttribute("hidden");
    }
    
    // Show country flag according to player's country
    function displayFlag() {    
        let image_element = document.getElementById("country-flag");
        let country = js_vars.country;
        let image_url = '';
        let image_alt = '';
        switch (country) {
            case "Amerikas":
            image_url = "https://cte.smu.edu.sg/sites/cte.smu.edu.sg/files/image_hosting/intl-trade-amerikasflag.png";
            image_alt = "Amerikas' country flag";
            break;
        case "Brazilia":
            image_url = "https://cte.smu.edu.sg/sites/cte.smu.edu.sg/files/image_hosting/intl-trade-braziliaflag.png";
            image_alt = "Brazilia's country flag";
            break;
        case "Chinland":
            image_url = "https://cte.smu.edu.sg/sites/cte.smu.edu.sg/files/image_hosting/intl-trade-chinlandflag.png";
            image_alt = "Chinland's country flag";
            break;
        case "Sadi Arabica":
            image_url = "https://cte.smu.edu.sg/sites/cte.smu.edu.sg/files/image_hosting/intl-trade-sadiarabicaflag.png";
            image_alt = "Sadi Arabica's country flag";
        }
        image_element.innerHTML = `
            <img src="` + image_url + `" alt="` + image_alt + `" width="45" height="30">
        `;
    }
    
    // Show message if penalty is applied
    function displayPenaltyMsg() {
        let element = document.getElementById("penalty-msg");
        if (js_vars.penalty_check) {
            element.removeAttribute("hidden");
            element.innerHTML = "Because you failed to meet your country's needs, production output for all goods has been reduced for this round.";
        }
    }
    
</script>

{{ endblock }}