{{ block title }}
Select your opponent
{{ endblock }}

{{ block styles }}
<link href="{{ static 'fullscreen.css' }}" rel="stylesheet" />
<link href="{{ static 'common.css' }}" rel="stylesheet" />
{{ endblock }}

{{ block content }}

<div class="fullscreen flex-col">
    <div class="main flex-row">
        {{ for opt in options }}
        <label class="opponent d-flex flex-column">
            {{ if opt.gender == 'M' }}<img src="{{ static 'man_1f468.png' }}">{{ endif }}
            {{ if opt.gender == 'F' }}<img src="{{ static 'woman_1f469.png' }}">{{ endif }}
            {{ if player.cond_scored }}
            {{ if opt.score == 1 }}<span class="stars">★</span>{{ endif }}
            {{ if opt.score == 2 }}<span class="stars">★★</span>{{ endif }}
            {{ if opt.score == 3 }}<span class="stars">★★★</span>{{ endif }}
            {{ endif }}
            <input type='radio' name="opponent_choice" value='{{ opt.gender }}{{ opt.score }}'>
        </label>
        {{ endfor }}
    </div>

    <div class="bottom">
        {{ next_button }}
    </div>
</div>

{{ endblock }}