{% extends "base.html" %}

{% block main_content %}
<script src="{{ url_for( 'internal', filename='js/face.js')}}"></script>
    <div class="container-fluid">
        <h3>Unmatched Faces</h3>
        <div class="row mt-3">
        {% for f in faces %}
            <div id="F{{f.id}}" class="col col-auto mt-3 pr-1">
                <form id="_fm" method="POST" action="/search/{{f.filename}}">
                    <figure id="fig_{{f.id}}" class="mb-0">
                        <div style="position:relative">
                            <canvas id="c_{{f.id}}" height="128"></canvas>
                            <script>
                                var im_{{f.id}}=new Image();
                                im_{{f.id}}.src="data:image/jpeg;base64,{{f.img}}";
                                fig_{{f.id}}=$('#fig_{{f.id}}')
                                // store this stuff in an javascript Object to use when document is ready event is triggered
                                var orig_face_{{f.id}}=new Object;
                                orig_face_{{f.id}}.x = (({{f.face_right}}*1.05 - {{f.face_left}}*.95) -  {{f.w}}) / 2
                                orig_face_{{f.id}}.y = (({{f.face_bottom}}*1.05 - {{f.face_top}}*.95) -  {{f.h}}) / 2
                                orig_face_{{f.id}}.w = {{f.w}}
                                orig_face_{{f.id}}.h = {{f.h}}
                                orig_face_{{f.id}}.orig_w = {{f.face_right}}*1.05 - {{f.face_left}}*.95
                                orig_face_{{f.id}}.orig_h = {{f.face_bottom}}*1.05 - {{f.face_top}}*.95

                                //console.log( orig_face_{{f.id}} )

                                // when the document is ready, then DrawRefimg
                                $(function() { DrawUnmatchedFace( fig_{{f.id}}, im_{{f.id}}, c_{{f.id}}, orig_face_{{f.id}} ) });
                            </script>
                            <figcaption>Face #{{f.id}}</figcation>
                        </div>
                    </figure>
                    <button class="btn btn-outline-info">Go</button>
                </form>
            </div id="/F*">
        {% endfor %}
        </div class="row">
    </div class="container-fluid">
{% endblock main_content %}