{# Pick one option from a set of selectable images.

   Each image becomes a clickable thumbnail; the participant's selection is
   stored as the chosen image's `value`. Only one image can be selected at
   a time (radio behaviour). When every image's `value` is an integer (or
   float), the database column is created with that numeric type
   automatically.

   Args:
       images (list): Image entries (see Example for shape).
       shuffle (bool, optional): Randomise the image order on each render.
           Defaults to False.
       horizontal (bool, optional): Wrap images in a centered row when true,
           stack in a centered column when false. Defaults to True.
       width (int, optional): Per-image pixel width. Ignored when
           auto_resize is true.
       auto_resize (bool, optional): Normalize rendered image dimensions on
           the client so they all match the smallest image in the group.
           With horizontal=false all widths are matched; otherwise all
           heights are matched. Defaults to False.

   Example:
       {
           "questiontype": "image_select",
           "id": "new_image_select",
           "instructions": "",
           "horizontal": true,
           "auto_resize": true,
           "images": [
               {"src": "/static/option_a.png", "value": "a", "label": "Option A"},
               {"src": "/static/option_b.png", "value": "b", "label": "Option B"}
           ]
       }
#}
<style>
    .bofs-image-select-group {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }
    .bofs-image-select-group.horizontal {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
    }
    .bofs-image-select-group.vertical {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }
    .bofs-image-select-item {
        position: relative;
        display: inline-block;
    }
    .bofs-image-select-input {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .bofs-image-select-option {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
    }
    .bofs-image-select-option img {
        display: block;
        border: 3px solid transparent;
        border-radius: 4px;
        transition: border-color 0.15s ease-in-out;
        max-width: 100%;
    }
    .bofs-image-select-option:hover img {
        border-color: #9ec5fe;
    }
    .bofs-image-select-input:checked + .bofs-image-select-option img {
        border-color: #0d6efd;
        box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
    }
    .bofs-image-select-input:focus-visible + .bofs-image-select-option img {
        outline: 2px solid #0d6efd;
        outline-offset: 2px;
    }
    .bofs-image-select-caption {
        margin-top: 4px;
        font-size: 0.875em;
        text-align: center;
        color: #6c757d;
    }
</style>

{% if question.shuffle %}
    {% do shuffle(question.images) %}
{% endif %}

<div class="bofs-image-select-group {{ 'horizontal' if question.horizontal|default(true) else 'vertical' }}"
     id="bofs-image-select-group-{{ question.id }}">
{% for image in question.images %}
    <span class="bofs-image-select-item">
        <input class="bofs-image-select-input"
               type="radio"
               name="{{ question.id }}"
               id="{{ question.id }}{{ loop.index }}"
               value="{{ image.value }}"
               {{ "required" if question.required }}
               {% if question.value is not none and question.value|string == image.value|string %}checked{% endif %}>
        <label class="bofs-image-select-option"
               for="{{ question.id }}{{ loop.index }}">
            <img src="{{ image.src }}"
                 alt="{{ image.alt if image.alt is defined else (image.label if image.label else '') }}"
                 {% if question.width and not question.auto_resize %}style="width: {{ question.width }}px;"{% endif %}>
            {% if image.label %}
                <span class="bofs-image-select-caption">{{ image.label }}</span>
            {% endif %}
        </label>
    </span>
{% endfor %}
</div>

{% if question.auto_resize %}
<script>
(function () {
    var group = document.getElementById('bofs-image-select-group-{{ question.id }}');
    if (!group) return;
    var images = group.querySelectorAll('img');
    if (!images.length) return;
    var isVertical = {{ 'true' if not question.horizontal|default(true) else 'false' }};
    var loaded = 0;
    var total = images.length;

    function adjust() {
        var min = Infinity;
        images.forEach(function (img) {
            var dim = isVertical ? img.naturalWidth : img.naturalHeight;
            if (dim && dim < min) min = dim;
        });
        if (min === Infinity) return;
        images.forEach(function (img) {
            if (isVertical) {
                img.style.width = min + 'px';
                img.style.height = 'auto';
            } else {
                img.style.height = min + 'px';
                img.style.width = 'auto';
            }
        });
    }

    function onLoaded() {
        loaded += 1;
        if (loaded === total) adjust();
    }

    images.forEach(function (img) {
        if (img.complete && img.naturalWidth) {
            onLoaded();
        } else {
            img.addEventListener('load', onLoaded);
            img.addEventListener('error', onLoaded);
        }
    });
})();
</script>
{% endif %}