{{ block title }}
    <h4><b><center>Advice from your Manager</center></b></h4>
{{ endblock }}

{{ block content }}
<style>
    .powered-by-otree { display: none !important; }
    .reveal-item {
        padding: 10px 14px;
        margin: 6px 0;
        border-radius: 5px;
        display: flex;
        align-items: center;
    }
    .reveal-item.math { background: #dce8f7; border-left: 4px solid #007bff; }
    .reveal-rank {
        background: #28a745; color: white; border-radius: 50%;
        width: 28px; height: 28px; display: inline-flex;
        align-items: center; justify-content: center;
        margin-right: 12px; font-weight: bold;
    }
</style>

<p>Here is the advice you paid to receive, in the order your manager prioritized:</p>

{{ for item in revealed_items }}
<div class="reveal-item.math">
    <br>
    <span class="reveal-rank">{{ item.rank }}</span>
    <span>{{ item.text }}</span>
</div>
{{ endfor }}
<br>
{{ next_button }}
{{ endblock }}