{% set label_font_size = labelFontSize|default(14) %}
{% set label_color = labelColor|default('#333333') %}
{% set label_font_weight = labelFontWeight|default('normal') %}
{% set label_position = labelPosition|default('bottom') %}
{% set align_map = {'left': 'flex-start', 'center': 'center', 'right': 'flex-end'} %}
{% set justify = align_map.get(textAlign|default('center'), 'center') %}
<div style="display: flex; justify-content: {{ justify }}; width: 100%; box-sizing: border-box; line-height: 0;">
  <div style="display: inline-flex; flex-direction: {% if label_position == 'top' %}column-reverse{% elif label_position == 'left' %}row-reverse{% elif label_position == 'right' %}row{% else %}column{% endif %}; align-items: center; gap: 4px; line-height: normal;">
    {% if qrcode_image %}
    <img src="{{ qrcode_image }}" style="width: {{ width }}; height: {{ height }}; display: block;" />
    {% else %}
    <div style="width: {{ width }}; height: {{ height }}; display: inline-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="7" height="7"></rect>
        <rect x="14" y="3" width="7" height="7"></rect>
        <rect x="3" y="14" width="7" height="7"></rect>
        <rect x="14" y="14" width="3" height="3"></rect>
        <rect x="18" y="14" width="3" height="3"></rect>
        <rect x="14" y="18" width="3" height="3"></rect>
        <rect x="18" y="18" width="3" height="3"></rect>
      </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>