{% load i18n %}
<div{% if widget.attrs.id %} id="{{ widget.attrs.id }}"{% endif %}{% if widget.attrs.class %} class="thumbnail-radio-select {{ widget.attrs.class }}"{% else %} class="thumbnail-radio-select"{% endif %} style="--thumbnail-size: {{ widget.thumbnail_size }}px;">
  <div class="thumbnail-filter-wrapper">
    <div class="thumbnail-selected-preview"></div>
    <input type="text" class="thumbnail-filter-input" placeholder="{% trans 'Select an option...' %}" autocomplete="off" readonly>
  </div>
  <div class="thumbnail-dropdown">
{% for item in widget.tree_items %}
  {% if item.type == "heading" %}
    <div class="thumbnail-radio-heading"
         data-type="heading"
         data-depth="{{ item.depth }}"
         data-label="{{ item.label|lower }}"
         style="--heading-depth: {{ item.depth }};">
      {{ item.label }}
    </div>
  {% else %}
    <label{% if item.attrs.id %} for="{{ item.attrs.id }}"{% endif %} class="thumbnail-radio-option{% if item.attrs.checked and item.value %} selected{% endif %}" data-label="{{ item.label|lower }}" data-depth="{{ item.depth }}">
      <input type="{{ item.type }}" name="{{ item.name }}"{% if item.value != None %} value="{{ item.value }}"{% endif %}{% for name, value in item.attrs.items %} {{ name }}{% if value != True %}="{{ value }}"{% endif %}{% endfor %}>
      <span class="thumbnail-wrapper" {% if item.thumbnail_url and not item.thumbnail_template_html %}style="--thumbnail-mask: url('{{ item.thumbnail_mask_url }}');"{% endif %}>
        {% if item.thumbnail_template_html %}
          {{ item.thumbnail_template_html|safe }}
        {% elif item.thumbnail_url %}
          <img src="{{ item.thumbnail_url }}" alt="{{ item.label }}" class="thumbnail-image">
        {% else %}
          <span class="thumbnail-placeholder"></span>
        {% endif %}
      </span>
      <span class="thumbnail-label">{{ item.label }}</span>
    </label>
  {% endif %}
{% endfor %}
    <div class="thumbnail-no-results" style="display: none;">{% trans "No matching options found." %}</div>
  </div>
</div>