{{ block title }}Round 3{{ endblock }}
{{ block content }}
<style>
table {
    border:none;
    border-collapse: collapse;
}

table td {
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}

table {
  border-collapse: collapse;
  width: 100%;
}

tr {
  border-bottom: 1pt solid black;
}

tr:nth-child(even) {background-color: #CCC;}
</style>

<p>
    You are the judge. You are matched with a citizen 1 and a citizen 2.
</p>
    <p>
        You have {{ Constants.endowment_punisher|cu }}.
        Citizen 1 and 2 each had {{ Constants.endowment_dictator|cu }}.
        Citizen 1 decided how much to give to or steal from citizen 2.
        You can now decide how to restore the justice in the community.
        Each penalty point decreases citizen 1's remaining earnings by {{ Constants.rate_punishment|cu }},
        and your earnings by 1 point.
    </p>

<br>
<p>How many penalty points do you want to charge citizen 1 to restore the justice in the community, if:</p>

<table class="table" style='width: 75%'>
    <thead>
    <tr>
        <th></th>
        <th style='text-align:center; vertical-align:middle'></th>
    </tr>
    </thead>
    {{ for field in form }}
    <tr>
        <td>{{ field.label }}</td>
        <td style='text-align:center; vertical-align:middle'>{{ field }}</td>
    </tr>
    {{ endfor }}
</table>




<center><button type="button" class="btn btn-primary btn-large" onclick="checkSubmit()"><strong>NEXT</strong></button></center>


<script>
        function checkSubmit() {
            let form = document.getElementById('form');
            let isValid = form.reportValidity();
            if (!isValid) return;

            let warnings = [];

            let contribution = 100;
            if (contribution < 500) {
                warnings.push("Press Cancel if you want to review your choices.");
            }

            if (warnings.length > 0) {
                warnings.push("Press OK to submit your choices and proceed.")
                let confirmed = window.confirm(warnings.join('\r\n'));
                if (!confirmed) return;
            }

            form.submit();
        }
    </script>

{{ endblock }}