{% extends "base.html" %}

{% block content %}
<div class="ph fi">
  <div class="ey">Tools</div>
  <h1>燃料换算</h1>
</div>

<div class="cvw fi">
  <form id="conv-form">
    <label>Value<input type="number" id="cv-val" value="1000" step="1"></label>
    <label>Mode<select id="cv-mode"><option value="L2t">Liters → Tons</option><option value="t2L">Tons → Liters</option></select></label>
    <label>Fuel<select id="cv-fuel">
      {% for f in fuel_factors %}
      <option value="{{ f.factor }}">{{ f.fuel_type }} ({{ f.factor }} kg/L)</option>
      {% endfor %}
    </select></label>
    <button type="submit" class="b ac">Convert</button>
  </form>
  <div class="res">
    <table>
      <thead><tr><th>Fuel</th><th>Density (kg/L)</th><th>Result</th></tr></thead>
      <tbody id="cv-res">
        {% for f in fuel_factors %}
        <tr><td>{{ f.fuel_type }}</td><td>{{ f.factor }}</td><td id="cv-{{ loop.index }}">—</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<script>
document.getElementById('conv-form').addEventListener('submit', function(e) {
  e.preventDefault();
  const val = parseFloat(document.getElementById('cv-val').value) || 0;
  const mode = document.getElementById('cv-mode').value;
  const factors = {{ fuel_factors|tojson }};
  factors.forEach(function(f, i) {
    const cell = document.getElementById('cv-' + (i+1));
    if (cell) {
      cell.textContent = mode === 'L2t'
        ? (val * f.factor / 1000).toFixed(4) + ' t'
        : (val * 1000 / f.factor).toFixed(0) + ' L';
      cell.style.color = 'var(--accent)';
      cell.style.fontFamily = 'var(--font-data)';
    }
  });
});
</script>
{% endblock %}