{% extends "layout.html" %}

{% block content %}

<!--Create button that calls the download() function above, use dummy iframe
to stop the form from redirecting -->
<iframe name="dummyframe" id="dummyframe" style="display: none;"></iframe>
<form onsubmit="download('results.json', '{{ bbox_data_str }}')" target="dummyframe">
  <div class="d-flex">
    <div class="d-inline-block ml-1 mr-3 py-1"><h2>Results</h2></div>
    <div class="d-inline-block mx-3 py-1"><input class="btn btn-primary" type="submit" value="Download Results"></div>
  </div>
</form>

{% for img_base64, bbox_list in bbox_image_data_zipped %}
<table class="table">
<thead>
  <tr>
    <th>Class</th>
    <th>Bounding Box [x1, y1, x2, y2]</th>
    <th>Confidence</th>
  </tr>
</thead>
  {% for bbox in bbox_list %}
    <tr>
      <td>{{ bbox['class_name'] }}</td>
      <td>{{ bbox['bbox'] }}</td>
      <td>{{ bbox['confidence'] }}</td>
    </tr>
  {% endfor %}
</table>

<!--Display base64 encoded image, scale image so it fits browser window horizontally -->
<img src="data:image/jpeg;charset=utf-8;base64,{{ img_base64 }}" id="result_image" style="max-width: 100%;height: auto;width: auto\9;" />

<hr/>
{% endfor %}

<script>
  // from https://stackoverflow.com/questions/3665115/how-to-create-a-file-in-memory-for-user-to-download-but-not-through-server/18197341#18197341
  function download(filename, text) {
    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    element.setAttribute('download', filename);

    element.style.display = 'none';
    document.body.appendChild(element);

    element.click();

    document.body.removeChild(element);
  }
</script>


{% endblock %}