{{ block title }}
    Fishery Game: Period 1
{{ endblock }}
{{ block content }}
    <h4>
        <center> Round {{ player.round_number }}</center>
        <center> Total earnings: {{ participant.payoff }}</center>
    </h4>
    <p></p>
    <p>     {{ if group.low_state }}
        Your group’s fishing ground is now in a<b><mark style="color: orangered; background-color: white">{{ group.field_display('low_state') }}</mark></b>.
            {{ else }}
        Your group’s fishing ground is now in a<b><mark style="color: #008CBA; background-color: white">{{ group.field_display('low_state') }}</mark></b>.
            {{ endif }}
        {{ if group.low_state }}
            <br>
        Rounds needed without fishing in<b><mark style="color: purple; background-color: white">Area A</mark></b>
        to get to<b><mark style="color: #008CBA; background-color: white">high state</mark></b>:
            {{ if group.round_number == 1 }}
                2
            {{ else }}
                {{ if group.pr_change }}
                    2
                {{ elif group.fisher_entered != 0 }}
                    2
                {{ else }}
                    1
                {{ endif }}
            {{ endif }}
        {{ endif }}
    </p>
    <p></p>
  <h4 align="center">Area choice</h4>
    <p>
        Fishing in<b><mark style="color: purple; background-color: white">Area A</mark>:
        {{ if group.low_state }}
            {{ C.A_LOW|cu }}
        {{ else }}
            {{ C.A_HIGH|cu }}
        {{ endif }}
        </b>
        <br>
        <br>Fishing in<b><mark style="color: orange; background-color: white">Area B</mark>:
        {{ if group.low_state }}
            {{ C.B_LOW|cu }}
        {{ else }}
            {{ C.B_HIGH|cu }}
        {{ endif }}
</b>


    <p> Where would you like to go fishing?</p>

<div class="center">
  <input type="radio" name="area_choice" value="1" id="A"/>
    <label for="A"><h3><mark  style="color: white; background-color: purple">Area A</mark></h3></label>
  <input type="radio" name="area_choice" value="0" id="B"/>
    <label for="B"><h3><mark style="color: white; background-color: orange">Area B</mark></h3></label>
</div>
{{ formfield_errors 'area_choice' }}
<br>
        <img  src="{{ static 'fishery_game_P1/pos_start.jpg' }}" width="400px" class="center">

<style>
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
}
</style>

{{ next_button }}


{{ endblock }}