{% load static %}
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Gauge Ahead</title>
  <!-- A-Frame & AR.js -->
  <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
  <script src="https://raw.githack.com/AR-js-org/AR.js/3.4.5/aframe/build/aframe-ar.js"></script>

  <!-- Billboard & click toggle (ya los usas en tu sistema) -->
  <script>
    AFRAME.registerComponent('billboard', {
      schema: {type: 'selector'},
      tick: function () {
        if (!this.data) return;
        this.el.object3D.lookAt(this.data.object3D.position);
      }
    });

    AFRAME.registerComponent('gauge-click-toggle', {
      init: function () {
        const colors = ["#00FF00", "#FFFF00", "#FF0000", "#00FFFF"];
        const statuses = ["OK", "Warning", "Critical", "Offline"];
        let i = 0;
        const ring = this.el.querySelector('.gauge-ring');
        const label = this.el.querySelector('.gauge-label');

        this.el.addEventListener('click', () => {
          i = (i + 1) % colors.length;
          if (ring) ring.setAttribute('color', colors[i]);
          if (label) {
            const current = label.getAttribute('value');
            const idLine = current.split("\n")[0];
            label.setAttribute('value', `${idLine}\n${statuses[i]}`);
          }
        });
      }
    });
  </script>
</head>
<body>
  <a-scene embedded arjs="sourceType: webcam; debugUIEnabled: false" vr-mode-ui="enabled: false">

    <!-- Cámara -->
    <a-entity id="mainCamera" camera look-controls wasd-controls position="0 2 5">
      <a-cursor color="#FF0000"></a-cursor>
    </a-entity>

    <!-- Gauge fijo visible a 3 unidades frente a cámara -->
    <a-entity position="0 1.5 -3">
{% include "pxy_city_digital_twins/_status_gauge_augmented.html" with pos_x="0" pos_y="1.6" pos_z="-3" scale="2.7 2.7 2.7" ring_color="#00FF00" label="WELCOME\nUSER" %}


    </a-entity>

  </a-scene>
</body>
</html>
