{% import "_includes/forms" as forms %}

{% set id = id ?? 'hotspot'~random() -%}
{% set containerId = containerId ?? id~'-container' -%}

{% set x = value.x %}
{% set y = value.y %}

<div id="{{ id }}" class="hotspot--field flex" data-imagehotspot="{{ relatedAssetHandle }}-{{ asset is not null ? asset.id }}">
    {% if asset is null %}
        {{ 'Please save the "{fieldHandle}" field before placing hotspots.'|t('imagehotspots', { fieldHandle: relatedAssetHandle }) }}
    {% else %}
        <input id="{{ id }}-x" type="hidden" name="{{ name }}[x]" value="{{ x }}" data-imagehotspot-x="true" />
        <input id="{{ id }}-y" type="hidden" name="{{ name }}[y]" value="{{ y }}" data-imagehotspot-y="true" />
        <div class="btn edit icon">{{ 'Set hotspot position'|t('imagehotspots') }}</div>
    {% endif %}
</div>

{% set width = 0 %}
{% set height = 0 %}

{% if asset is not null %}
    {% set maxSize = min(2048, asset.width, asset.height) %}
    {% set ratioW = asset.width / asset.height %}
    {% set ratioH = asset.height / asset.width %}

    {% set width = (ratioW > ratioH) ? maxSize : maxSize * ratioW %}
    {% set height = (ratioH > ratioW) ? maxSize : maxSize * ratioH %}
{% endif %}

{% set jsSettings = {
    id: id|namespaceInputId,
    asset: (asset is not null) ? {
        url: craft.app.assets.thumbUrl(asset, width, height, false, false),
        width: asset.width,
        height: asset.height,
    } : null,
} %}

{% js %}
    new Born05.ImageHotspotInput({{ jsSettings|json_encode|raw }});
{% endjs -%}