{#

!!!! BECAREFUL: ONLY FOR TESTING !!!!!
!!!! DON'T START TO TRANSLATE ALL VIEWS BASED ON THIS MODEL !!!!!

!!!! IT WILL PROBABLY FIRST NEED TO CHANGE  THE TWIG TEMPLATE SYNTAX TO AVOID CONFLICT WITH EXPRESSION MANAGER !!!!

/**
 * Multiple Choice Html : item row
 *
 * @var hiddenfield
 * @var name
 * @var code
 * @var answer
 * @var checkedState
 * @var sCheckconditionFunction
 * @var myfname
 * @var sValue
 **** Additional attributes:
 * @var question_template_attribute.fix_width
 * @var question_template_attribute.fix_height
 * @var question_template_attribute.keep_aspect
 * @var question_template_attribute.crop_or_resize
 * @var question_template_attribute.horizontal_scroll
 */
#}

{#<p>DEBUG:<br>
question_template_attribute.fix_width           : {{question_template_attribute.fix_width}}<br/>
question_template_attribute.fix_height          : {{question_template_attribute.fix_height}}<br/>
question_template_attribute.keep_aspect         : {{question_template_attribute.keep_aspect}}<br/>
question_template_attribute.crop_or_resize      : {{question_template_attribute.crop_or_resize}}<br/>
question_template_attribute.horizontal_scroll   : {{question_template_attribute.horizontal_scroll}}<br/>
</p>#}

<!-- answer_row -->
{% if answer|isAbsoluteUrl %}
<li id='javatbd{{ myfname }}' class='question-item answer-item checkbox-item imageselect-listitem {{ extra_class }}' {{ sDisplayStyle }} >
    <div class="imageselect-container">
        <input
            class="imageselect-checkbox"
            type="radio"
            name="{{ name }}"
            id="answer{{ name}}{{ code }}"
            value="{{code}}"
            {{ checkedState }}
            onclick='cancelBubbleThis(event); {{ sCheckconditionFunction }}'
        />
        <label for="answer{{ name }}{{ code }}" class="imageselect-label" onclick='cancelBubbleThis(event); {{ sCheckconditionFunction }}'>

         <img class="unforce-height" src="{{ answer|escape('html_attr') }}"
         style="{%if question_template_attribute.fix_width > 1%} 
            width: {{question_template_attribute.fix_width}}px 
            {% endif %} {%if question_template_attribute.fix_height > 1%}
            height: {{question_template_attribute.fix_height}}px
            {% endif %}"/>
        </label>
        <label for="answer{{ name }}{{ code }}" class="imageselect-radiobutton d-none"></label>
    </div>
    <input
        type="hidden"
        name="java{{ myfname }}"
        id="java{{ myfname }}"
        value="{{ sValue }}"
    />
</li>
<script>
    var imageselectjs_{{name}} = new IMAGESELECT("{{ name}}{{ code }}", {
        keepAspect: {{question_template_attribute.keep_aspect ? 'true' : 'false'}}, 
        horizontalScroll: {{question_template_attribute.horizontal_scroll ? 'true' : 'false'}},
        crop_or_resize: {{question_template_attribute.crop_or_resize ? true : false}}
        }); 
</script>
{% else %}
{# Standard List Radio row #}
<li id='javatbd{{ myfname }}' class='answer-item radio-item imageselect-container' {{ sDisplayStyle }} >
    <input
        type="radio"
        value="{{ code }}"
        name="{{ name }}"
        id="answer{{ name }}{{ code }}"
        {{ checkedState }}
        onclick="if (document.getElementById('answer{{ name }}othertext') != null) document.getElementById('answer{{ name }}othertext').value='';checkconditions(this.value, this.name, this.type)"
     />
    <label for="answer{{ name }}{{ code }}" class="control-label radio-label imageselect-radiobutton">
        {{ processString(answer) }}
    </label>
</li>
{% endif %}
<!-- end of answer_row -->
