{% extends "global/Page.html" %}
{% load otree static %}
{% block styles %}
    <style>
        .form-group {
            margin-bottom: 1rem !important;
            margin-top: 1rem !important;
        }

        .wrap {
            justify-content: center;
            display: flex;
        }

        .inner {
            align-self: center;
        }

        p {
            margin-top: 1rem !important;
        }
    </style>
{% endblock %}

{% block title %}

<p align="center">Pantalla sobre Asignación de Rol</p>

{% endblock %}

{% block content %}

<p align="center">El computador le ha asignado aleatoriamente el Rol {%if mostrar%}A {%else%} B {% endif %}</p>
<p align="center">Recuerde que los pagos asociados a su Rol pueden ser:</p>
{%if mostrar%}
<table border="1" align="center">
             <col width="100"> <col width="95">  <col width="100">
            <tr>
                <td style="text-align:center">Escenario Posible</td>
                <th style="text-align:center">Opción X</th>
                <th style="text-align:center">Opción Y</th>
            </tr>
            <tr>
                <td style="text-align:center">Alto</td>
                <td style="text-align:center">{{Constants.neutral}}</td>
                <td style="text-align:center">{{a_11}} puntos</td>
            </tr>
            <tr>
                <td style="text-align:center">Bajo</td>
                <td style="text-align:center">{{Constants.neutral}}</td>
                <td style="text-align:center">{{a_12}}   puntos</td>
            </tr>
        </table>
{%else%}
<table border="1" align="center">
             <col width="100"> <col width="95">  <col width="100">
            <tr>
                <td style="text-align:center">Escenario Posible</td>
                <th style="text-align:center">Opción X</th>
                <th style="text-align:center">Opción Y</th>
            </tr>
            <tr>
                <td style="text-align:center">Alto</td>
                <td style="text-align:center">{{Constants.neutral}}</td>
                <td style="text-align:center">{{a_21}} puntos</td>
            </tr>
            <tr>
                <td style="text-align:center">Bajo</td>
                <td style="text-align:center">{{Constants.neutral}}</td>
                <td style="text-align:center">{{a_22}}   puntos</td>
            </tr>
        </table>
{% endif %}

<div align="right">

    {% next_button %}
</div>
{% endblock %}