{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}

{% endblock %}

{% block scripts %}

<script src="{% static 'back_button_v2/js/prev_next_button.js' %}"></script>

{% endblock %}


{% block styles %}

<link href="{% static 'back_button_v2/css/custom.css' %}" rel="stylesheet">

{% endblock %}


{% block content %}

<!-- Tab navigation -->
<ul class="nav nav-tabs   fixed-top navbar-light bg-light justify-content-center" id="myTab" role="tablist">
    <li class="nav-item">
       <a class="nav-link active" id="part1-tab" data-toggle="tab" href="#part1" role="tab" aria-controls="part1" onclick="topFunction()"> Tab 1</a>
    </li>
    <li class="nav-item">
       <a class="nav-link" id="part2-tab" data-toggle="tab" href="#part2" role="tab" aria-controls="part2" onclick="topFunction()">Tab 2</a>
    </li>

  
    <!-- <li class="nav-item">
       <a class="nav-link" id="part5-tab" data-toggle="tab" href="#part5" role="tab" aria-controls="part5" onclick="topFunction()">Tab 5</a>
    </li>
    <li class="nav-item">
       <a class="nav-link" id="part6-tab" data-toggle="tab" href="#part6" role="tab" aria-controls="part6" onclick="topFunction()">Tab 6</a>
    </li> -->
 </ul>
 <br>
 <br>
 <!-- Tab content -->
 <div class="tab-content" id="myTabContent">
    <div class="tab-pane show active" id="part1" role="tabpanel" aria-labelledby="part1-tab">
        <br>
      
<style>
    table, th, td {
  border:1px solid black;
}
</style>
<div style="display:inline-block" >
    <table border="1">
    <tr>
        <th>
            <div>
                <img src="https://cdn.shopify.com/s/files/1/0554/4611/0357/files/Delish_food1.png?v=1647928688"/>
                    <p>
                        is a national grocery retailer. Delish Food's vision is to
                        <u>
                            <i>"provide the largest and most complete range of healthy ingredients
                            so you can create innovative gourmet meals for your family and friends".
                            </i>
                        </u>
                        Delish Food promotes healthy food, healthy lifestyle and general wellbeing of the society and the environmental sustainability in the products they sell. Delish Food is committed to sourcing exotic food from around the world while educating their customers through free cooking classes and supporting TV shows.
                    </p>
            </div>
        </th>
        <th>
            <div><br>
                <img src="https://cdn.shopify.com/s/files/1/0554/4611/0357/files/Stylish_food1.png?v=1647928688"/>
                    <p>
                        is a national grocery retailer. Stylish Food's vision is
                        <u>
                            <i>"to provide simple or no step cooking that offers the
                                best convenience and healthy alternatives for busy people like you".
                            </i>
                        </u>
                        Stylish Food pride themselves on their finest quality foods while being committed to protecting the environment from where they are sourced and contributing to the society they serve. Stylish Food continues to focus on innovative packaging so prepared meals are fresh while reformulating their products to reduce saturated oil, salt and sugar for healthier eating.
                    </p>
            </div>
        </th>
    </tr>
    <tr>
        <td><div>
                    <p>
                        <h5>Performance in Snapshot for Yr 20X1</h5>
                    </p>
                    <p>
                        <img style="height: 23px;" src="https://cdn.shopify.com/s/files/1/0554/4611/0357/files/Screen_Shot_2022-04-01_at_8.07.34_pm.png?v=1648804244" alt=""> <strong>Food</strong> investment in more direct relationships with farmers has led to a wider
                        varieties of fresher produce available for sale. This results in group profit after
                        tax of $5638m, up 1.6%from previous year. However, interim and final dividends for
                        the year are down 1.5% from previous year.
                    </p>
                    <p>
                        <img style="height: 23px;" src="https://cdn.shopify.com/s/files/1/0554/4611/0357/files/Screen_Shot_2022-04-01_at_8.07.34_pm.png?v=1648804244" alt=""> <strong>Food</strong> is committed to creating an atmosphere that encourages shoppers to be
                        inspired and be creative in healthy cooking.Delish Food contributes significantly to
                        local farmers-affiliated charities (3.6% of total revenue).
                    </p>
                    <p>
                        <img style="height: 23px;" src="https://cdn.shopify.com/s/files/1/0554/4611/0357/files/Screen_Shot_2022-04-01_at_8.07.34_pm.png?v=1648804244" alt=""> <strong>Food</strong> believes a sustainable approach to operation is important and has in the
                        year diverted 1668 tonnes of waste from landfill which is up 3% from previous year.
                    </p>
            </div>
        </td>
        <td><div>
                    <p>
                        <h5>Performance in Snapshot for Yr 20X1</h5>
                    </p>
                    <p>
                        <img style="height: 23px;" src="https://cdn.shopify.com/s/files/1/0554/4611/0357/files/Screen_Shot_2022-04-01_at_8.07.30_pm.png?v=1648804215" alt=""> <strong>Food</strong>'s investment in a new store format to provide a contemporary and personal
                        shopping experience has led to a growth of 1.8% in group profit after tax of $5525m.
                        Total interim and final dividends for the year are down 1.7% from previous year.
                    </p>
                    <p>
                        <img style="height: 23px;" src="https://cdn.shopify.com/s/files/1/0554/4611/0357/files/Screen_Shot_2022-04-01_at_8.07.30_pm.png?v=1648804215" alt=""> <strong>Food</strong> is committed to offering healthy prepared foods that celebrate ethnic
                        diversity and sustainability ingredients. Stylish Food continues to perform random
                        social responsibility on at least 80% of their suppliers.
                    </p>
                    <p>
                        <img style="height: 23px;" src="https://cdn.shopify.com/s/files/1/0554/4611/0357/files/Screen_Shot_2022-04-01_at_8.07.30_pm.png?v=1648804215" alt=""> <strong>Food</strong>'s continuous improvement in energy efficiency across all stores and
                        delivery fleets has resulted in 23 tonnes of CO2 emission/ 1000 square metres of
                        floor space, an improvement of 3.5% from previous year.
                    </p>
            </div></td>
    </tr>
    </table>
</div>


       <button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">Next</button>
    </div>

    <div class="tab-pane" id="part3" role="tabpanel" aria-labelledby="part2-tab">
 
        <p>Please carefully answer the following two questions.</p>
        <p>It is important to remember that part of your final payment
            is based on the EPS performance of the investment you choose.
            Your pay will be higher if the EPS of your chosen company increases.
            The greater the extent to which EPS improves, the higher will your final
            pay be. Please carefully select one of the two companies.
        </p>
    
        <p>
            <i>
                After reviewing the information provided, I have decided to take a 10,000 shares long position in
            </i>
            {{ formfield player.Q3 }}
        </p>
        <p>
            Please press Continue to proceed after selecting your investment.
        </p>
        <div align = "right">
            <!-- <input type ="button" onclick="checkQ5_6()" class="btn btn-primary" value="CONTINUE"/> -->
            <script>
    
                function checkQ5_6(){
                    let form = document.getElementById('form');
                    let isValid = form.reportValidity();
                    if (!isValid) return;
                    let Q3 = document.getElementsByName('Q3')[0].value;
                    if (Q3 === '5'){
                        // alert(document.getElementsByName('Q3')[0].value);
                        alert("Thank you. You have selected to invest 10,000 shares in Delish Food in a long position.");
                        form.submit();
                    }else{
                        alert("Thank you. You have selected to invest 10,000 shares in Stylish Food in a long position.");
                        form.submit();
                    }
                }
            </script>
        </div>
       <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Review Information</button>
       <button onclick="checkQ5_6()" type="button" class="nexttab btn-primary btn next">Next</button>
    </div>
  
    <!-- <div class="tab-pane" id="part5" role="tabpanel" aria-labelledby="part5-tab">
       Page 5
       <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>
       <button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">Next</button>
    </div>
    <div class="tab-pane" id="part6" role="tabpanel" aria-labelledby="part6-tab">
       Page 6
       <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>
       <button class="nexttab btn-primary btn next">Next</button>
    </div> -->
 </div>
 </body>

{% endblock %}