{{ extends 'global/Page.html' }}
{{ block title }}Welcome{{ 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">

<div id="header-logo">
    <!--<span><img src="https://www.smu.edu.sg/sites/all/themes/smubase_nw2_rev/svg/logo-d-smu.svg" alt="smu-logo" width="200" height="auto"></span>-->
    <span><img src="https://cte.smu.edu.sg/sites/cte.smu.edu.sg/files/image_hosting/FOS_H_Full_Colour.png" alt="smu-logo" width="250" height="auto" style="margin-left: -20px; margin-bottom: -20px"></span>
    <span><p style="margin-top:10px; font-size:11px;"><i>Created with the Centre for Teaching Excellence.</i></p></span>
    <hr>
</div>

<h6><b>Welcome to the International Trade Game.</b></h6>

<p>The purpose of this trade simulation game is to help students learn about the different considerations countries have when engaging in international trade. </p>

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

{{ next_button }}

<style>
.otree-title {
    visibility: hidden;
    height: 0;
}
#country-name, #country-flag {
    display: inline-block;
}
#country-flag {
    margin-left: 8px;
}
</style>

<script>  
window.addEventListener('DOMContentLoaded', (event) => {
    displayFlag();
});
// 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">
    `;
}
</script>

{{ endblock }}