{% extends "base.html" %}
{% load i18n %}

{% block extra-head %}
<script type="text/javascript">
$(document).ready(function(){
    // Clear radiobuttons on file select
    $('#id_image').change(function(){
        $('input[name="default_avatar_id"]').each(function(){
            $(this).removeAttr('checked');
        });
    });
});
</script>
{% endblock %}

{% block content %}
<div class="join-finish">

    <div class="title">{% trans "Set your profile picture" %}</div>
            
    <form action="{% url join-finish %}" method="POST" enctype="multipart/form-data" class="foundry-form">   
        {% csrf_token %}
        {{ form.as_div }}
        <div class="field">
            <label for="pic-choose"><p>{% trans "Or, choose from our selection" %}:</p></label>
            {% for object in form.default_avatars %}
                <input type="radio" name="default_avatar_id" value="{{ object.id }}" />
                <img src="{{ object.image.url }}" width="32" height="32" class="pic-choose" />
            {% endfor %}
        </div>
        <div class="buttons">
            <input type="submit" value="{% trans "Finish" %}" />
        </div>
    </form>

</div>
{% endblock content %}
