{{ block styles }}
    <style>
        .page-header {
            padding-top: 0px;
        }

        .mpl-table {
            margin-bottom: 1rem;
        }

        .mpl-table__table {
            text-align: center;
            margin-bottom: 0 !important;
        }

        .mpl-table__table thead th {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            background-color: #fff;
        }

        .mpl-table__table td {
            padding: .125rem .125rem !important;
        }

        .mpl-table__table th,
        .mpl-table__table td {
            background-clip: padding-box;
        }
    </style>

{{ endblock }}

{{ block scripts }}
    <script src="{{ static 'mpl_table/js/mpl_table.js' }}"></script>
{{ endblock }}

{{ block title }}

    {{title}} <em>{{coupon_name}}</em>
    
{{ endblock }}

{{ block content }}

    <p>
        Reminder: ticket <em>{{coupon_name}}</em> pays 
        <b><span style="color: #0070C0">{{ player.payoff_max }} PLN</span> if a <span style="color: #0070C0">blue</span> ball is drawn</b> and
        <b><span style="color: #ff0000">{{ player.payoff_min }} PLN</span> if a <span style="color: #ff0000">red</span> ball is drawn</b>
        from an Urn containing {{ C.NUM_BALLS_IN_URN }} colored balls 
        {{ if player.prospect == C.PROSPECTS.0 }}
           <b> half of which are blue and half are red</b>.
        {{ elif player.prospect == C.PROSPECTS.1 }}
            each of which is either blue or red.
            You know that <b>30 of these balls are blue, 30 red, and 30 of an unknown color</b> (blue or red).
        {{ elif player.prospect == C.PROSPECTS.2 }}
            each of which is either blue or red, but <b>the number of balls of each color is unknown</b>.
        {{ endif }}
    </p>

    {{ include 'mpl_table/includes/mpl_table.html' with params=mpl_table_params }}

    <p>
        Please note that once you press the Confirm button, you will <b>not</b> be able to go back and change your answer.
    </p>

{{ endblock }}