<!-- Glass core -->
  <a-circle
    radius="1"
    class="glass-core"
    color="{{ ring_color|default:'#00FFFF' }}"
    material="shader: standard; transparent: true; opacity: 0.3; metalness: 0.8; roughness: 0.1; side: double"
    rotation="0 90 0">
  </a-circle>

  <!-- Animated outer ring -->
  <a-ring
    class="gauge-ring"
    radius-inner="1.2"
    radius-outer="1.4"
    color="{{ ring_color|default:'#00FFFF' }}"
    material="shader: flat; opacity: 0.8; side: double"
    rotation="0 90 0"
    animation="property: rotation; to: 0 90 0; loop: true; dur: 2000; easing: linear">
  </a-ring>

  <!-- Dynamic Text -->
  <a-text 
    class="gauge-label"
    value="ID: {{ id }}\n{{ status }}"
    align="center"
    color="#FFFFFF"
    width="2"
    side="double"
    position="0 0 0.02"
    rotation="0 90 0">
  </a-text>
