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

{% block styles %}
<style>
.score-text {
  font-weight: bold;
}

.error-text {
    color: red;
}

.selections {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    margin-top: 50px;
    text-align: center;
}

.selection {
    width: 25px;
    height: 25px;
}

.custom-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 70px;
}

.note {
    width: 100%;
    text-align: center;
    margin-top: 20px;
}
</style>
{% endblock %}

{% block title %}
    Select a lottery option - Round: {{ current_round }}
{% endblock %}

{% block content %}

    <p class="score-text">
    Score in previous round: {{ previous_round_score }}
    </p>

    <div class="error-text">
        {{ form.selection.errors }}
    </div>

    <div class="selections">
        <div>
            <input type="radio" name="selection" value="A" id="A" class="selection"/>
            <label for="A">A</label>
        </div>

        <div>
            <input type="radio" name="selection" value="B" id="B" class="selection"/>
            <label for="B">B</label>
            <div>Loyalty: {{ loyalty_b }}</div>
        </div>

        <div>
            <input type="radio" name="selection" value="C" id="C" class="selection"/>
            <label for="C">C</label>
            <div>Loyalty: {{ loyalty_c }}</div>
        </div>
    </div>

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

    <div class="note">
        <p>
            *If you reach 10 points on a loyalty card,
            you will get a bonus round *
        </p>
    </div>

{% endblock %}