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

{% block title %}
    Configure Alien Game
{% endblock %}

{% block styles %}

    <style type="text/css">
        .otree-btn-next{
            class: disabled;

        }
    </style>

{% endblock %}

{% block content %}
    {% load app_tags %}

    Scenario: <b id="scenario-select-warning" style="color: #dc3545;">Please select</b> <br>

    {% populate_scenario_options as scenario_options %}

    <div class="btn-group" style="margin-top: 6px; margin-bottom: 12px">
        <button id="scenario-chooser" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="false">
            Select
        </button>
        <ul class="dropdown-menu" role="menu">
            {% for option in scenario_options %}
                <li><a class="dropdown-item" href="#">{{ option.landscape }} - ( {{ option.length }} choices )</a></li>
            {% endfor %}
        </ul>
    </div>

    <a href="testing/FileUpload.html" class="btn btn-primary" style="margin-top: 6px; margin-bottom: 12px">Upload new scenario</a>

    {% formfield player.multiplier label="Point multiplier:" %}
    {% formfield player.startingPoint label="Starting point:" %}
    {% formfield player.numberOfGameSteps label="Number of game steps:" %}
{#    {% formfield player.numberOfChoices label="Number of choices:" %}#}
    {% formfield player.pointToSubtract label="Points to subtract:" %}
    {% formfield player.waitingWindow label="Use waiting window:" %}

    {% next_button %}

    {% block scripts %}

        <script>
            $(document).ready(function () {
                document.getElementsByClassName("otree-btn-next")[0].style.display = "none";
            });

            $(".dropdown-menu li a").click(function () {
                $("#scenario-chooser").text($(this).text());
                {#$(".btn:first-child").val($(this).text());#}
                $("#scenario-chooser").val($(this).text());
                sessionStorage.setItem("landscape", $(this).text().split(" ")[0]); //landscape name (disgusting format...)
                sessionStorage.setItem("length", $(this).text().split(" ")[3]); //bitstring length (disgusting format...)
                document.getElementById("scenario-select-warning").style.display = "none";
                document.getElementsByClassName("otree-btn-next")[0].style.display = "";
            });

        </script>

    {% endblock %}

{% endblock %}