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

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

{% block title %}
    Ranking of principles
{% endblock %}

{% block content %}
    <div class="wrapper textbox">
        <p>
            In this task, we ask you to <b>rank</b> a number of <b>principles</b> that can be applied to compare
            different economic programs and identify which of the options is preferable. We want to know which of these
            principles you agree with the most, second most, etc. <br> <br>
            Please indicate your ranking using the form fields
            below. <br><br>
            Consider the following principles.
        </p>
        <p>
            <b>Principle A</b>: {{ p1 }}
        </p>
        <p>
            <b>Principle B</b>: {{ p2 }}
        </p>
        <p>
            <b>Principle C</b>: {{ p3 }}
        </p>
        <p>
            <b>Principle D</b>: {{ p4 }}
        </p>
        <p>
            <b>Principle E</b>: {{ p5 }}
        </p>
    </div>

    <div class="wrapper attentionbox">
        {% formfield player.rank1 %}
        {% formfield player.rank2 %}
        {% formfield player.rank3 %}
        {% formfield player.rank4 %}
        {% formfield player.rank5 %}
    </div>

    <p>
        <button class="otree-btn-next btn btn-primary">Submit ranking</button>
    </p>


{% endblock %}