{# 
  Reusable component for clearable scale questions (1-4 radio buttons with clear option)
  
  Required parameters:
  - field_name: Name attribute for the radio buttons (e.g., 'interesting_scale')
  - field_label: Display label for the question
  - field_id_prefix: Prefix for radio button IDs (e.g., 'interesting')
  
  Optional parameters:
  - current_value: The currently selected value (for editing)
  - show_help: Show keyboard shortcut help text (default: false)
#}
{% set show_help = show_help if show_help is defined else false %}

<div class="d-flex flex-wrap gap-2 align-items-center" role="group" aria-label="{{ field_label }}">
    {% for value, label in [(1, 'auf jeden Fall'), (2, 'eher ja'), (3, 'eher nein'), (4, 'auf keinen Fall')] %}
    <div>
        <input type="radio" 
               class="btn-check clearable-scale" 
               name="{{ field_name }}" 
               id="{{ field_id_prefix }}_{{ value }}" 
               value="{{ value }}" 
               autocomplete="off" 
               {% if current_value and current_value == value %}checked{% endif %}>
        <label class="btn btn-outline-primary" for="{{ field_id_prefix }}_{{ value }}">{{ value }} – {{ label }}</label>
    </div>
    {% endfor %}
    
    {# Clear button #}
    <button type="button" 
            class="btn btn-sm btn-outline-secondary clear-scale-btn" 
            data-field="{{ field_name }}"
            title="Auswahl entfernen (oder Taste 0 drücken)"
            style="padding: 0.25rem 0.5rem;">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
        </svg>
    </button>
</div>

{% if show_help %}
<div class="form-text mt-2">Tasten 1–4 wählen, 0 zum Löschen, Shift+↓ vor, Shift+↑ zurück, Enter bestätigt.</div>
{% endif %}