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

{% block app_styles %}
<style>
body {
    font-family: Arial;
    color: black;
}

.left {
    display: inline-block;
    position: absolute;
    left: 20px;
    height: 50px;
    width: 40%;
    background-color: blue;
    border: 1px solid black;
    text-align: center;
    color: white;

}

.right {
    display: inline-block;
    position: absolute;
    right: 20px;
    height: 50px;
    width: 40%;
    background-color: blue;
    border: 1px solid black;
    text-align: center;
    color: white;

}

</style>
{% endblock %}


{% block title %}
    Decision Maker Choice for round {{ round_number }}
{% endblock %}

{% block content %}
    <h3>Your expert is: Expert #{{ expert_id }}</h3>

    {% if sender_timeout %}
    <p style="text-align: center"><b>
        The expert did not response in time. The default evaluation of this hotel is:</b></p>
    {% else %}
    <p style="text-align: center"><b>The expert chose the following  <u>{{ expert_selected }}</u> to describe the hotel</b></p>
    {% endif %}

    <div class="card bg-light">
        <div class="card-body" style="width: 100%">
            {% if expert_selected == 'review and score' %}
                <p><b>The review is: </b>{{ score_all_review }}</p>
                <p><b>Its score is: </b>{{ only_score }}</p>
            {% else %}
                <p>{{ score_all_review }}</p>
            {% endif %}
        </div>
    </div>


    <p style="text-align: center"><b>Please choose 'Hotel' or 'Stay at home'</b></p>


    <div class="card bg-light">
        <div class="card-body" style="width: 60%; height: 100px">
            <button name="receiver_choice" value="False" class="left btn btn-primary btn-large">
                    <h5>Hotel</h5>
            </button>
            <button name="receiver_choice" value="True" class="right btn btn-primary btn-large">
                <h5>Stay at home</h5>
        </div>
    </div>

{% endblock %}