{% extends "base.html" %}

{% block content %}
<section class="hero-band">
  <div>
    <p class="eyebrow">Calculadora OEE general</p>
    <h1>Control de eficiencia para cualquier proceso productivo</h1>
  </div>
  <div class="hero-actions">
    <a class="secondary-action" href="/interpret">Usar interprete IA</a>
  </div>
</section>

{% if errors %}
<div class="alert error">
  {% for error in errors %}
    <p>{{ error }}</p>
  {% endfor %}
</div>
{% endif %}

<section class="workspace-grid">
  <div class="tool-panel primary-panel">
    <div class="panel-head">
      <div>
        <p class="eyebrow">Ingreso manual</p>
        <h2>Datos del periodo</h2>
      </div>
      <span class="panel-badge">OEE</span>
    </div>

    <div class="example-actions">
      <button
        class="secondary-action"
        type="button"
        data-fill-example='{"unidad_produccion":"cajas","tiempo_turno_min":"480","paradas_planificadas_min":"30","paradas_no_planificadas_min":"45","produccion_total":"920","produccion_buena":"870","ciclo_ideal_seg":"25"}'
      >
        Caso Envasado
      </button>
      <button
        class="secondary-action"
        type="button"
        data-fill-example='{"unidad_produccion":"toneladas","tiempo_turno_min":"600","paradas_planificadas_min":"40","paradas_no_planificadas_min":"70","produccion_total":"1450","produccion_buena":"1390","ciclo_ideal_seg":"20"}'
      >
        Caso Chancado
      </button>
    </div>

    <form class="form-grid" action="/calculate" method="post" data-oee-form>
      <label>
        <span>Unidad de produccion</span>
        <input name="unidad_produccion" type="text" maxlength="40" value="{{ form.get('unidad_produccion', '') }}" placeholder="Ejm. toneladas" required>
      </label>

      <label>
        <span>Tiempo de turno (min)</span>
        <input name="tiempo_turno_min" type="number" step="0.01" min="0" value="{{ form.get('tiempo_turno_min', '') }}" placeholder="Ejm. 600" required>
      </label>

      <label>
        <span>Paradas planificadas (min)</span>
        <input name="paradas_planificadas_min" type="number" step="0.01" min="0" value="{{ form.get('paradas_planificadas_min', '') }}" placeholder="Ejm. 40" required>
      </label>

      <label>
        <span>Paradas no planificadas (min)</span>
        <input name="paradas_no_planificadas_min" type="number" step="0.01" min="0" value="{{ form.get('paradas_no_planificadas_min', '') }}" placeholder="Ejm. 70" required>
      </label>

      <label>
        <span>Produccion total</span>
        <input name="produccion_total" type="number" step="0.01" min="0" value="{{ form.get('produccion_total', '') }}" placeholder="Ejm. 1450" required>
      </label>

      <label>
        <span>Produccion buena</span>
        <input name="produccion_buena" type="number" step="0.01" min="0" value="{{ form.get('produccion_buena', '') }}" placeholder="Ejm. 1390" required>
      </label>

      <label>
        <span>Ciclo ideal (seg/unidad)</span>
        <input name="ciclo_ideal_seg" type="number" step="0.01" min="0" value="{{ form.get('ciclo_ideal_seg', '') }}" placeholder="Ejm. 20" required>
      </label>

      <div class="form-actions">
        <button class="primary-button" type="submit">Calcular OEE</button>
        <a class="text-button" href="/">Limpiar</a>
      </div>
    </form>
  </div>

  <aside class="insight-panel">
    <p class="eyebrow">Modelo</p>
    <h2>Disponibilidad x rendimiento x calidad</h2>
    <div class="factor-list">
      <div>
        <strong>Disponibilidad</strong>
        <span>Tiempo operativo frente al tiempo planificado.</span>
      </div>
      <div>
        <strong>Rendimiento</strong>
        <span>Produccion real frente a la capacidad teorica.</span>
      </div>
      <div>
        <strong>Calidad</strong>
        <span>Produccion buena frente a la produccion total.</span>
      </div>
    </div>
  </aside>
</section>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', path='/examples.js') }}"></script>
{% endblock %}