{% set label_font_size = labelFontSize|default(14) %}
{% set label_color = labelColor|default('#333333') %}
{% set label_font_weight = labelFontWeight|default('normal') %}
{% set align_map = {'left': 'flex-start', 'center': 'center', 'right': 'flex-end'} %}
{% set justify = align_map.get(textAlign|default('center'), 'center') %}
{% set is_float = position_mode|default('inline') == 'float' %}
{% if is_float %}
<div style="position: absolute; left: {{ float_x|default(0) }}px; top: {{ float_y|default(0) }}px; z-index: {{ float_z_index|default(100) }};">
{% else %}
<div style="display: flex; justify-content: {{ justify }}; width: 100%; box-sizing: border-box;">
{% endif %}
  <div style="display: inline-flex; flex-direction: {% if labelPosition == 'top' %}column-reverse{% elif labelPosition == 'left' %}row-reverse{% elif labelPosition == 'right' %}row{% else %}column{% endif %}; align-items: center; gap: 4px;">
    {% if src %}
    <img src="{{ src }}" style="width: {{ width }}; height: {{ height }}; display: block;" />
    {% else %}
    <div style="width: {{ width }}; height: {{ height }}; display: flex; border: 2px dashed #dcdfe6; background-color: #f5f7fa; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: #909399; font-size: 12px;">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
        <circle cx="8.5" cy="8.5" r="1.5"></circle>
        <polyline points="21 15 16 10 5 21"></polyline>
      </svg>
      <span>{{ width }} × {{ height }}</span>
    </div>
    {% endif %}
    {% if label %}<span style="font-size: {{ label_font_size }}px; color: {{ label_color }}; font-weight: {{ label_font_weight }};">{{ label }}</span>{% endif %}
  </div>
</div>