{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ruta No Encontrada</title>
    <!-- A-Frame & environment component -->
    <script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
</head>
<body>
  <a-scene environment="preset: yavapai; skyType: atmosphere; skyColor: #001840; fog: 0.6; groundColor: #444; groundTexture: walk; dressing: none;">

    <!-- Camera & Controls -->
    <a-entity id="mainCamera" camera look-controls wasd-controls position="0 2 4">
      <a-cursor color="#FF0000"></a-cursor>
    </a-entity>

    <!-- Ground plane -->
    <a-plane position="0 -0.1 0" rotation="-90 0 0" width="200" height="200" color="#444" opacity="0.3"></a-plane>

    <!-- Animated box as placeholder for a happy truck -->
    <a-box color="#FF4136" depth="1" height="0.5" width="2" position="0 0.25 -3"
           animation="property: rotation; to: 0 360 0; loop: true; dur: 3000">
    </a-box>

    <!-- Message -->
    <a-text value="Ruta no encontrada"
            align="center"
            position="0 1 -3"
            color="#FFF"
            width="4">
    </a-text>

  </a-scene>

  <!-- Sugerencia de URL si aplica -->
  {% if first_subdivision %}
  <div style="
      position: absolute;
      bottom: 20px;
      left: 20px;
      background: rgba(0,0,0,0.6);
      color: #fff;
      padding: 8px 12px;
      border-radius: 4px;
      font-family: sans-serif;
    ">
    Quizá quieras ver la ruta por defecto en
    <a href="{% url 'waste_route' first_subdivision %}{% if first_route %}?route={{ first_route }}{% endif %}"
       style="color: #ffd700; text-decoration: underline;">
      {{ first_subdivision }}{% if first_route %} (ruta {{ first_route }}){% endif %}
    </a>
  </div>
  {% endif %}
</body>
</html>
