{% extends "base.html" %} {% block main_content %}
<script>
    // Define this once and before it will be called, hence at the top of this file
    function DrawRefimg(img, canvas, orig_face )
    {
        // FIXME: should get this from shared.py, not sure why this doesnt work at present
        thumbsize=256

        context=canvas.getContext('2d')
        // another call to this func will occur on load, so skip this one
        if( img.width == 0 )
            return

        // only set canvas.width once we have valid img dimensions
        canvas.width=img.width/2

        // actually draw the pixel images to the canvas at the right size
        context.drawImage(img, 0, 0, img.width/(img.height/canvas.height), canvas.height);

        // draw rectangle on face
        context.beginPath();
        new_x=(orig_face.x/orig_face.orig_w)*img.width/(img.height/canvas.height)
        new_y=(orig_face.y/orig_face.orig_h)*thumbsize/(img.height/canvas.height)
        new_w=(orig_face.w/orig_face.orig_w)*img.width/(img.height/canvas.height)
        new_h=(orig_face.h/orig_face.orig_h)*thumbsize/(img.height/canvas.height)
        context.rect(new_x, new_y, new_w, new_h)
        context.lineWidth = 2;
        context.strokeStyle = 'green';
        context.stroke();
    }
</script>

<div class="container-fluid">
    <h3 class="offset-lg-3">{{page_title}}</h3>
    <form id="pfm" class="form form-inline" action="" method="POST">
        {% for field in form %}
            {% if field.type == 'HiddenField' or field.type == 'CSRFTokenField' %}
                {{field}}<br>
            {% elif field.type != 'SubmitField' %}
                <div class="form-row col-lg-12">
                {{ field.label( class="col-lg-3" ) }}
                {{ field( class="form-control col" ) }}
                </div class="form-row col-lg-12">
            {% endif %}
        {% endfor %}
        <div class="form-row col-lg-12">
            <span class="col-lg-3"><center>Reference Images:</center></span>
            {% for refimg in person.refimg %}
                {% set offset="" %}
                {% if (loop.index % 10) == 0 %}
                    {% set offset= "offset-lg-3" %}
                {% endif %}
                <div id="RI{{refimg.id}}" class="px-0 col-lg-1 w-100 {{offset}}">
                    <center>
                    <input type="hidden" id="ref-img-id-{{refimg.id}}" name="ref-img-id-{{refimg.id}}" value="1"></input>
                    <figure style="border: 1px solid #5bc0de; border-radius: 3px;" class="figure my-auto h-100 w-100">
                        <div style="position:relative">
                            <canvas id="c_{{refimg.id}}" height="128"></canvas>
                            <script>
                                var im_{{refimg.id}}=new Image();
                                im_{{refimg.id}}.src="data:image/jpeg;base64,{{refimg.thumbnail}}";

                                // store this stuff in an javascript Object to use when document is ready event is triggered
                                var orig_face_{{refimg.id}}=new Object;
                                orig_face_{{refimg.id}}.x = {{refimg.face_locn[0][3]}}
                                orig_face_{{refimg.id}}.y = {{refimg.face_locn[0][0]}}
                                orig_face_{{refimg.id}}.w = {{refimg.face_locn[0][1]}}-{{refimg.face_locn[0][3]}}
                                orig_face_{{refimg.id}}.h = {{refimg.face_locn[0][2]}}-{{refimg.face_locn[0][0]}}
                                orig_face_{{refimg.id}}.orig_w = {{refimg.orig_w}}
                                orig_face_{{refimg.id}}.orig_h = {{refimg.orig_h}}

                                // when the document is ready, then DrawRefimg
                                $(function() { DrawRefimg(im_{{refimg.id}}, c_{{refimg.id}}, orig_face_{{refimg.id}} ) });

                            </script>
                            <div style="position:absolute; top: 2; right: 2;">
                                <button type="button" style="font-size:12px" class="btn btn-danger" 
                                    onClick="DelImg({{refimg.id}})">X</button>
                            </div>
                            <figcaption class="figure-caption text-center text-wrap text-break">{{refimg.fname}}</figcaption>
                        </div>
                    </figure>
                    </center>
                </div id="/RI*">
            {% endfor %}
        </div class="form-row col-lg-12">
        <div class="form-row col-lg-12">
        <br>
        </div class="form-row">
        <div class="form-row col-lg-12">
            {{ form.save( id="save", class="btn btn-primary offset-lg-3 col-lg-2" )}}
            {% if 'Edit' in page_title %}
                {{ form.delete( class="btn btn-outline-danger col-lg-2" )}}
            {% endif %}
        </div class="form-row">
    </form>
    {% if person.id %}
        <form id="new_ri" class="form" action="{{url_for('add_refimg')}}" method="POST" enctype="multipart/form-data">
            <input type="hidden" name="person_id" value="{{person.id}}"></input>
            <label class="btn btn-success offset-lg-3 col-lg-2">
                Add reference image
                <input name="refimg_file" type="file" onChange="$('#new_ri').submit()" style="display:none;" id="new_file_chooser">
            </label>
        </form>
    {% endif %}
</div class="container">
{% endblock main_content %}

{% block script_content %}
<script>
function DelImg(ri_num)
{
$('#RI'+ri_num).remove()
$('#pfm').submit()
}

</script>
{% endblock script_content %}