{% extends 'base.html' %}
{% load static %}

{% block title %}CoreLab - Simulación Interactiva{% endblock %}

{% block extra_css %}
 <link rel="stylesheet" href="{% static 'corelab/css/simulacion.css' %}">
{% endblock %}

{% block content %}
<div class="simulacion-container">
  <h1>Máquina Universal de Ensayos</h1>

  <!-- === Menús de Selección === -->
  <div class="modo-selector">
    <div>
        <label for="material-select">Selecciona el material:</label>
        <select id="material-select">
          <option value="" disabled selected>-- Elige un material --</option>
          {% for mat in materiales %}<option value="{{ mat.nombre }}">{{ mat.nombre_display }}</option>{% endfor %}
        </select>
    </div>
    <div>
        <label for="tipo-ensayo-select">Selecciona el tipo de ensayo:</label>
        <select id="tipo-ensayo-select">
          <option value="" disabled selected>-- Elige un ensayo --</option>
          <option value="tension">Tensión</option>
          <option value="compresion">Compresión</option>
          <option value="torsion">Torsión</option>
        </select>
    </div>
  </div>

  <!-- === Contenedor Principal (Máquina y Gráfico) === -->
  <div class="machine-graph-container">
    
<!-- Columna Izquierda: Máquina Interactiva -->
    <div class="machine-section">
      <div id="contenedor-maquina">
        
        <!-- ▼▼▼ ¡RUTA CORREGIDA! Se ha cambiado 'core_lab' por 'corelab' ▼▼▼ -->
        <img id="marco-maquina" src="{% static 'corelab/images/maquinainteractiva.png' %}" alt="Marco Fijo de la Máquina">
        
        <!-- ▼▼▼ ¡RUTA CORREGIDA! ▼▼▼ -->
        <img id="mordaza-superior-movil" src="{% static 'corelab/images/mordaza_superior.png' %}" alt="Mordaza Superior Móvil">
        
        <!-- ▼▼▼ ¡RUTA CORREGIDA! ▼▼▼ -->
        <img id="handle-torsion" src="{% static 'corelab/images/flecha_torsion.png' %}" alt="Mango de Torsión">

      </div>
    </div>
    <!-- Columna Derecha: Gráfico y Mensajes -->
    <div class="graph-section">
      <div class="canvas-wrapper">
        <canvas id="grafica"></canvas>
      </div>
      <p id="placeholder-text" class="placeholder-text">Selecciona un material y ensayo para comenzar.</p>
    </div>

  </div>

  <!-- === Tabla de Datos (Debajo de la Máquina/Gráfico) === -->
  <div class="table-section">
    <h2>Datos del Ensayo (Tiempo Real)</h2>
    <table id="tabla-datos">
      <thead>
        <tr>
          <th>Tiempo (s)</th>
          <th>Deformación (%)</th>
          <th>Esfuerzo (Pa)</th>
        </tr>
      </thead>
      <tbody>
        <tr><td colspan="3">Selecciona un material y ensayo</td></tr>
      </tbody>
    </table>
  </div>

</div>
{% endblock %}

{% block scripts %}
  <script>
    const OBTENER_DATOS_URL = "{% url 'obtener_datos' %}";
  </script>
  <script src="{% static 'corelab/js/simulacion.js' %}"></script>
{% endblock %}