{% if milestone_performance_score and milestone_performance_score.value is not none %}
    <div class="card border-0 shadow-sm bg-light-subtle rounded-4 h-100">
        <div class="card-body">
            <h4 class="header-title text-center">Score traitement</h4>
            <div class="widget-chart-1">
                <div class="widget-chart-box-1 text-center">
                    {% set score = milestone_performance_score.value %}
                    {% set fgColor = '#dc3545' %} {# Rouge par défaut #}
                    {% if score >= 15 %}
                        {% set fgColor = '#198754' %} {# Vert #}
                    {% elseif score >= 10 %}
                        {% set fgColor = '#ffc107' %} {# Orange #}
                    {% endif %}
                    <input
                            type="text"
                            class="knob"
                            value="{{ score }}"
                            data-plugin="knobValue"
                            data-width="70"
                            data-height="70"
                            data-thickness="0.30"
                            data-fgColor="{{ fgColor }}"
                            data-bgColor="#E9E9E9"
                            data-readOnly="true"
                            data-min="0"
                            data-max="20"
                            data-angleOffset="-125"
                            data-angleArc="250"
                            style="font-weight: bold;"
                    >
                </div>
                <div class="widget-detail-1 mb-0">
                    <p class="fw-lighter small text-muted text-center mb-0">{{ score_title }}</p>
                </div>
            </div>
        </div>
    </div>
{% else %}
    <div class="card border-0 shadow-sm bg-light-subtle rounded-4 h-100">
        <div class="card-body">
            <p class="text-muted mb-0">Score de traitement non disponible</p>
        </div>
    </div>
{% endif %}