{% extends "base.html" %}
{% block content %} 
<form action="/ratio_pyro" method="POST" enctype="multipart/form-data">
    <h2>Simple Ratio Pyrometry Interface</h2>

    <img src="#" id="img-preview" type="file"/>
    <br>

    <input id="img-upload" type="file" name="file" accept=".png,.jpg,.jpeg,.tiff" value="Choose Image"/>

    <h4>Camera Settings</h4>

    <label for="iso">ISO</label>
    <input type="number" name="iso" value="64"/>
    <br>

    <label for="i_darkcurrent">I_Darkcurrent</label>
    <input type="number" name="i_darkcurrent" value="7.7" step="0.001"/>
    <br>

    <label for="exposure_time">Exposure Time <i>t</i></label>
    <input type="number" name="exposure_time" value="0.5" step="0.001"/>
    <br>

    <label for="f_stop">F-stop <i>f</i></label>
    <input type="number" name="f_stop" value="2.4" step="0.001"/>
    <br>

    <h4>Temperature Settings</h4>

    <label for="min_temp">Min Temp (°C)</label>
    <input type="number" name="min_temp" value="600"/>
    <br>

    <label for="max_temp">Max Temp (°C)</label>
    <input type="number" name="max_temp" value="1200"/>
    <br>

    <h4>Pyrometry Equation Settings</h4>

    <img src="/s/pyrometry_eqn.png" id="pyro-eqn" alt="pyrometry calibration formula">
    <br>
    <label for="equation_scaling_factor">Equation scaling factor (1 default, 0.55 recommended)</label>
    <input type="number" name="equation_scaling_factor" value="0.55" step="0.001"/>
    <br>

    <h4>Output Settings</h4>

    <label for="smoothing_radius">Smoothing Radius (px)</label>
    <input type="number" name="smoothing_radius" value="2"/>
    <br>

    <label for="legend_entries">Legend Entries</label>
    <input type="number" name="legend_entries" value="20"/>
    <br>

    <br>
    <input type="submit" value="Generate Heatmap"/>
</form>

<script>
let imgPreview = document.getElementById('img-preview');
let imgUpload = document.getElementById('img-upload');
imgUpload.onchange = event => {
    const [file] = imgUpload.files;
    if (file) {
        console.log(file)
        imgPreview.src = URL.createObjectURL(file);
    }
};
</script>

<style>
#img-preview {
    width: 18rem;
}
#pyro-eqn {
    width: 800px;
}
</style>

{% endblock %}