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

{% block title %}
    Kursentwicklung bis Ende 2021:
{% endblock %}

{% block content %}

    <div class="alert alert-secondary" role="alert">

            Nachdem Sie Ihre Position Ende 2020 angepasst haben, ist der Aktienkurs der XY AG das darauffolgende Jahr bis Ende 2021
            von <b>{{ player.stock_price_2 }}</b> auf <b>{{ player.stock_price_3 }}</b>

            {% if player.number == 1 or player.number == 2 %}
            gesunken.
            {% else %}
            gestiegen.
            {% endif %}

        Die Entwicklung des Aktienkurses wird unten dargestellt.  
    </div>


    {% if player.number == 1 or player.number == 2 %}
        {% include 'EXPERIMENT_OBEXER_1/KursBear_T2_T3.html' %}
    {% else %}
        {% include 'EXPERIMENT_OBEXER_1/KursBull_T2_T3.html' %}
    {% endif %}


 <b> Portfolio Ende 2021:</b>

    <table class="table" border="2" cellspacing="10" cellpadding="30">

        <tr>
            <th>Aktien</th>
            <th>"Cash"</th>
            <th>Gesamtwert</th>
            <th>Vermögensveränderung 2020</th>
            <th>Vermögensveränderung 2021</th>
        </tr>

    <tr>
        <td>{{ player.stock_amount_2 }} ({{ player.stock_value_2 }})</td>
        <td>{{ player.cash_amount_2 }}</td>
        <td>{{ player.final_wealth_2 }}</td>
        <td>{{ player.change_wealth_1 }}</td>
        <td>{{ player.change_wealth_2 }}</td>
    </tr>
    </table>
    <br>

    <div class="alert alert-secondary" role="alert">
            Stellen Sie sich vor es ist der <b>31.Dezember 2021</b>, da wendet sich der Geschäftsführer der XY AG mit folgenden
            "Tweet" an die Öffentlichkeit:
    </div>

    <center>
        {% if player.number == 1 or player.number == 3 %}
        <img src="{% static "EXPERIMENT_OBEXER_1/Tweet_NEG_2.png" %}" width="600" height="300" alt="Tweet" style="border:2px solid #000000"/>
        {% else %}
        <img src="{% static "EXPERIMENT_OBEXER_1/Tweet_POS_2.png" %}" width="600" height="300" alt="Tweet" style="border:2px solid #000000"/>
        {% endif %}
    </center>
    <br>

    <h2> Fragen: </h2>

    <ol>
        <li>
            Was sind Ihre Erwartungen bezüglich der Entwicklung des Aktienkurses der XY AG für das kommende Jahr?
            <br>
            {% formfield player.Beliefs_3 label="<b>Erwartungshaltung</b> (-4 sinkt stark, +4 steigt stark, 0 keine signifikante Änderung)" %}
        </li>
        <hr><br>
        <li>
            Wiederum eröffnet sich Ihnen die Möglichkeit Ihre Position anzupassen. Ihre derzeitige Position besteht aus
            <b>{{ player.stock_amount_2 }}</b> XY AG Aktien, notierend bei {{ player.stock_price_3 }}
            und <b>{{ player.cash_amount_2 }}</b> in "cash".
            <br>

            <label class="contorl-label" for="buy_sell_3"></label>
            <select class="form-control" id="buy_sell_3" required>
                <option value="">Bitte wählen Sie eine Option</option>
                <option value="1">Kaufen</option>
                <option value="2">Verkaufen</option>
                <option value="3">Keine Veränderung</option>
            </select>

            <label class="control-label" for="buy3"><br/>Aktien&nbsp;kaufen:</label>
            <input class="form-control" name="buy_3" id="buy3" value="0">
            {{ form.buy_3.errors }}
            <br>
            <b>oder</b>
            <br>
            <label class="control-label" for="sell3"><br/>Aktien&nbsp;verkaufen:</label>
            <input class="form-control" name="sell_3" id="sell3" value="0">
            {{ form.sell_3.errors }}
        </li>
        <hr><br>
        <li>
            Wie stark haben Sie sich von dem "Tweet" des Geschäftsführers in Ihrem Entscheidungsprozess beeinflussen lassen?
            <br>
            {% formfield player.TweetImpact_2 label="<b>Beeinflussung des 'Tweets'</b> (-4 gar nicht, +4 sehr stark, 0 weiß nicht)" %}
        </li>
        <hr><br>
        <li>
            Wie stark haben Sie sich von der historischen Kursentwicklung der XY AG in Ihrem Entscheidungsprozess beeinflussen lassen?
            <br>
            {% formfield player.KursentwicklungImpact_2 label="<b>Beeinflussung der Kursentwicklung</b> (-4 gar nicht, +4 sehr stark, 0 weiß nicht)" %}
        </li>
    </ol>

    <script>
        var one = document.getElementById('buy_sell_3');
        var two = document.getElementById('buy3');
        var three = document.getElementById('sell3');

        //checks instantly
        var checker = setInterval(function() {
            if(one.value == '1') {
              two.readOnly = false;
            } else {
              two.readOnly = true;
            }
            if(one.value == '2') {
              three.readOnly = false;
            } else {
              three.readOnly = true;
            }
        }, 30);
    </script>

    <button value="True" class="btn btn-primary btn-large">Weiter</button>

{% endblock %}