{% extends "base.jinja2" %}
{% block content %} 

<table class="img-table">
    <tr>
        <th class="img-table-heading">Input Image</th>
        <th class="img-table-heading">Resultant Heatmap</th>
    </tr>
    <tr>
        {# Original image #}
        <td class="img-table-cell" id="orig-cell">
            <img class="img-out" src="data:image/png;base64,{{ img_orig_b64 }}" alt="original image">
            {# <img class="img-out" src="{{ img_orig_path }}" alt="original image"> #}
        </td>
        {# Result image #}
        <td class="img-table-cell" id="res-cell">
            <img class="img-out" src="data:image/png;base64,{{ img_res_b64 }}" alt="result image">
            {# <img class="img-out" src="{{ img_res_path }}" alt="resulting heatmap"> #}
        </td>
    </tr>
    {# Legend #}
    <tr>
        <td class="img-table-cell"></td>
        <td class="img-table-cell">
            <table class="legend" id="legend">
                <tr>
                    <th>Color</th>
                    <th>Temperature</th>
                </tr>
                {% for temp, color in legend.items() %}
                <tr>
                    <td class="legend-cell"><div style="width:20px;height:20px;background-color:{{ color }};"></div></td>
                    <td class="legend-cell">{{ temp }}°C</td>
                </tr>
                {% endfor %}
            </table>

        </td>
    </tr>
</table>

<style>
    .img-table-heading {
        padding: 4px 10px;
    }

    .img-table-cell {
        padding: 10px 20px;
    }

    .img-out {
        width: 32rem;
    }

    .legend-cell {
        padding: 4px 30px;
    }
</style>

{% endblock %}