{% load i18n %}
<style>
    /* ... (CSS styles remain the same - omitted here for brevity) ... */
    .gauge-container {
        width: 250px;
        height: 125px;
        position: relative;
        overflow: hidden;
        margin: 20px auto 10px;
        border-radius: 10px 10px 0 0;
    }
    .gauge-arc {
        /* ... */
    }
    .gauge-color-fill {
        /* Color sectors: Green (0-45), Yellow (45-67.5), Red (67.5-90) 
           Note: The degrees in conic-gradient correspond to the 90-degree 
           segmentation of the 180-degree gauge arc. */
        background: conic-gradient(
            var(--color-success) 0deg 90deg, 
            var(--color-warning) 90deg 135deg, 
            red 135deg 180deg, 
            #e9ecef 180deg 360deg
        );
        /* ... */
    }
    .gauge-needle {
        /* ... */
        transition: transform 1.5s ease-out;
    }
    /* ... (rest of CSS) ... */
</style>

{# Use variables directly from the context #}
<div class="gauge-value-display">
    {{ avg_time_to_hire_days|default:0 }} {% trans "Days" %}
</div>

<div class="gauge-container">
    <div class="gauge-color-fill"></div>
    <div class="gauge-arc"></div>
    
    {# Inject the final, calculated degrees directly into the style attribute #}
    <div class="gauge-needle" style="transform: rotate({{ gauge_rotation_degrees }}deg);">
        <div class="gauge-center"></div>
    </div>
</div>

<div class="text-muted small mt-3">
    {% trans "Target:" %} **{{ gauge_target_days }}** {% trans "Days" %} | {% trans "Max Scale:" %} {{ gauge_max_days }} {% trans "Days" %}
</div>