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

{% block styles %}
    <link href="{% static 'global/css/trolley_problem.css' %}" rel="stylesheet"/>
{% endblock %}

{% block title %}
{% endblock %}

{% block content %}

    <div class="wrapper">
        <div class="container-fluid">
             <div class="row">
                <div class="col-sm">
                    {% if player.trolley_scenario == 'footbridge' %}
                        <div class="instructions mt-0">
                            {% include 'sel_measures/FootbridgeVersion.html' %}
                        </div>
                    {% else %}
                        <div class="instructions mt-0">
                            {% include 'sel_measures/BystanderVersion.html' %}
                        </div>
                    {% endif %}
                </div>
                {% if player.trolley_scenario == 'footbridge' %}
                    <div class="col-sm-5">
                        {% if player.trolley_skin == 'white' %}
                            <img src="{% static 'global/imgs/trolley_problem_footbridge_white.png' %}"
                            class="img-thumbnail">
                        {% else %}
                            <img src="{% static 'global/imgs/trolley_problem_footbridge_black.png' %}"
                            class="img-thumbnail">
                        {% endif %}
                    </div>
                {% else %}
                    <div class="col-sm-5">
                        {% if player.trolley_skin == 'white' %}
                            <img src="{% static 'global/imgs/trolley_problem_bystander_white.png' %}"
                            class="img-thumbnail">
                        {% else %}
                            <img src="{% static 'global/imgs/trolley_problem_bystander_black.png' %}"
                            class="img-thumbnail">
                        {% endif %}
                    </div>
                {% endif %}
             </div>

            <div class="row">
                <div class="col-md">
                    {% if player.trolley_scenario == 'footbridge' %}
                        <label>{{ Constants.trolley_label_footbridge }}</label>
                    {% else %}
                        <label>{{ Constants.trolley_label_bystander }}</label>
                    {% endif %}
                    {% formfield player.trolley_decision %}
                </div>
            </div>
        </div>

        <button class="otree-btn-next btn btn-primary">Confirm</button>
    </div>

{% endblock %}