{{ extends 'global/Page.html' }}
{% load static %}

{{ block title }}Select an avatar{{ endblock }}

{{ block content }}

    <p>Please choose the image with which you want to present yourself to the other player.</p>
    {{ for image in image_data }}
        <label style="text-align: center">
            <img src="{{ static image.path }}" width="170px">
            <br>
            <input type="radio" name="chosen_avatar" value="{{ image.name }}" class="persist">
        </label>
    {{ endfor }}
    {{ formfield_errors 'chosen_avatar' }}

    <br>
    <script src="{{ static 'persist-raw.js' }}"></script>

<style>
    /* Customize radio button style */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 2px solid #333;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

/* Style for checked radio button */
input[type="radio"]:checked {
  background-color: #008080;
  border: 2px solid #333;
  content: '\2713'; /* Unicode checkmark symbol */
  color: #fff;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
}
</style>
{{ next_button }}

{{ endblock }}