{% extends "simulation/Page.html" %}
{% load otree static %}
{% block title %}
    {% if round == 1 %}
        Media Under Siege
    {% elif round == 2 %}
        National Services Under Fire
    {% else %}
        New Revelations
    {% endif %}
{% endblock %}
{% block content %}
<div class="card bg-light" xmlns="http://www.w3.org/1999/html">
    <div class="card-body">
        <!--Background Module-->
        <table border="1" cellpadding="15" align="center">
            <tr>
                <td>{% include 'simulation/modules/Background.html' %}</td>
            </tr>
        </table>
        <br/>
        <p align="justify">Click on the headers below to display the desired information.</p>
        <!--Vadare Background-->
        <button class="collapsible" type="button">
            <h6>Vadare Background</h6>
        </button>
        <div class="content">
            <br/>
            {% include 'simulation/text/vignette/common/vadare_background.html' %}
        </div>
        <br/>
        <br/>
        <!--World Map-->
        <button class="collapsible" type="button">
            <h6>Regional Map</h6>
        </button>
        <div class="content">
            <br/>
            <img src="{% static 'simulation/images/map.jpg' %}" align="center"/>
        </div>
        <br/>
        <br/>
        <!--Information Module-->
        <button class="collapsible" type="button">
            {% if role == 'policy' %}
                <h6>Diplomatic Cables</h6>
            {% elif role == 'cyber' %}
                <h6>Security Reports</h6>
            {% else %}
                <h6>Military Intelligence</h6>
            {% endif %}
        </button>
        <div class="content">
            <br/>
            {% include 'simulation/modules/Information.html' %}
        </div>
        <br/>
        <br/>
        <!--Response Module-->
        <button class="collapsible" type="button">
            <h6>Response Options</h6>
        </button>
        <div class="content">
            <br/>
            {% include 'simulation/modules/Response.html' %}
        </div>
        <br/>
        <br/>
       <!--Chatbox-->
        <button class="collapsible" type="button">
            <h6>Group Chat</h6>
        </button>
        <div class="content">
            <br/>
            {% chat nickname=player.participant.vars.name %}
        </div>
        <br/>
        <br/>
        <p align="right">
            <b>After selection a response, press "Continue"</b>.
            <button>Next</button>
        </p>
        </div>
</div>
{% endblock %}

{% block scripts %}
    <script>
        var coll = document.getElementsByClassName("collapsible");
        var i;

        for (i = 0; i < coll.length; i++) {
          coll[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var content = this.nextElementSibling;
            if (content.style.display === "block") {
              content.style.display = "none";
            } else {
              content.style.display = "block";
            }
          });
        }
    </script>
{% endblock %}