{% set isPlain = isPlain|default(false) %}
<div class="hotspot {{ isPlain ? 'hotspot--plain' : '' }} {{ styleModifier|default('') }} js-hotspot" style="left: {{ left|default(0) }}%; top: {{ top|default(0) }}%;">
{% if isPlain %}
<div class="hotspot__btn">
{# <div class="avalanche-icon-container">#}
<span class="avalanche-icon {{ avalanche }}"></span>
{# </div>#}
</div>
{% else %}
<button type="button" class="hotspot__btn position-relative js-hotspot__toggle {{ smallHotspot | default(null) ? 'hotspot__btn--small' : '' }}">
{% if img|default(false) %}
<img src="{{ img }}" alt="" class="img-fluid hotspot__btn__img">
{% endif %}
{% if value|default(false) %}
<span class="hotspot__btn__value text-nowrap strong">{{ value }}</span>
{% endif %}
</button>
{% endif %}
{% if detail|default(false) and not isPlain %}
<div class="hotspot__popover text-md-center">
<button type="button" class="btn-no-styling hotspot__popover__close js-hotspot__toggle js-hotspot__toggle-close">
<span class="icon icon-close" aria-label="close" title="close"></span>
</button>
<div class="row row-gutter--2 align-items-center vertical-gutter--3">
<div class="col-12 vertical-gutter__item">
{% if detail.title|default(false) or title|default(false) %}
<div class="font-decorative">{{ detail.title|default(false) ?: title }}</div>
{% endif %}
{% if detail.subtitle|default(false) or subtitle|default(false) %}
{{ detail.subtitle|default(false) ?: subtitle}}
{% endif %}
{% if detail.image|default(false) %}
{% set description = getImageDescription(detail.image, true) %}
<img src="{{ detail.image.thumbnail('infobox') }}" title="{{ description|default('') }}" alt="{{ description|default('') }}" class="mt-1" width="75%">
{% endif %}
</div>
{% if detail.hasWeatherDetail | default(null) %}
<div class="col-4 col-md-12 vertical-gutter__item">
<div class="weather-item weather-item--sm">
<div class="row justify-content-center align-items-center">
<div class="col-auto">
<img alt="" class="img-fluid weather-item__img js-lazy-img" data-src="{{ img }}">
</div>
<div class="col-auto">
<div class=" mb-2 font-decorative text-uppercase fz14">
{{ 'weather.Heute'|trans }}
</div>
<div class="font-default-bold">
<span class="weather-item__val">{{ value }}C</span>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% if (detail.link|default(false) and detail.link.href|default(false)) or
(link|default(false) and link['href']|default(false))
%}
<div class="col-8 col-md-12 text-right text-md-center vertical-gutter__item">
<a href="{{ detail.link.href|default(false) ?: link['href']|default(false) }}" {{ detail.link.target|default(false) ? 'target="' ~ detail.link.target ~ '"' : ''}} class="btn btn-sm btn-primary-light">{{ detail.link.text|default(false) ?: link['text']|default(false) }}</a>
</div>
{% endif %}
</div>
</div>
{% endif %}
</div>