{% load crispy_forms_field %}
{% load sekizai_tags %}

	<div id="div_{{ field.auto_id }}" class="clearfix control-group{% if form_show_errors%}{% if field.errors %} error{% endif %}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
		{% if field.label %}
			<label for="{{ field.id_for_label }}" class="control-label {% if field.field.required %}requiredField{% endif %}">
				{{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
			</label>
		{% endif %}
    

<div class="controls" {% if flat_attrs %}{{ flat_attrs|safe }}{% endif %}>
	{% include 'bootstrap/layout/field_errors_block.html' %}

	{% for choice in field.field.choices %}

  <label class="radio" for="id_{{ field.html_name }}_{{ forloop.counter }}">
	    <input type="radio" {% if choice.0 == field.value|stringformat:"s" %}checked="checked" {% endif %} name="{{ field.html_name }}" id="id_{{ field.html_name }}_{{ forloop.counter }}" value="{{ choice.0 }}" /><span id="id_{{ field.html_name }}" class="base-profile-btn btn btn-large {% if choice.0 == field.value|stringformat:"s" %}btn-primary{% endif %}" href="#" rel="popover" title="{{ choice.1.name }}" data-content="{{ choice.1.description }}{{ choice.1.display_choices }}">{{ choice.1 }} <i class="{% if choice.0 == field.value|stringformat:"s" %}icon-ok{% endif %}"></i></span>
    </label>

    {% addtoblock "endscripts" %}<!-- sekizay -->
    <script>
	$("input.#id_{{ field.html_name }}_{{ forloop.counter }}").change(function(event){ 
	// reset all buttons, and colorize the checked one
	$("label.radio[for^=id_{{ field.html_name }}_] > span").attr('class', 'btn btn-large');
	$("label.radio[for^=id_{{ field.html_name }}_] > span > i").attr('class', '');
	$(this).parent().find("span > i").attr('class', 'icon-ok');
	$(this).parent().find("span").attr('class', 'btn btn-large btn-primary');
	// reset choices
	$("input[name^=reprography-profile_option_]").attr('checked', false);
	// check choices
	{% for c in choice.1.choices.all %}
	$("input[name^=reprography-profile_option_][value={{ c.id}}]").attr('checked', true);
	{% endfor %}
});
    </script>
    {% endaddtoblock %}

    {% endfor %}
    {% addtoblock "endscripts" %}<!-- sekizay -->
    <script>
      $('.base-profile-btn').each(function (i, elt) {
        if ($('input', $(elt).parent()).attr('checked')) {
          $(elt).addClass('btn-primary');
        }
      });
    </script>
    {% endaddtoblock %}

    {% include 'bootstrap/layout/help_text.html' %}
</div>
</div>
