{% extends "base.html" %} {% block main_content %}
<script src="{{ url_for( 'internal', filename='js/face.js')}}"></script>

<div class="container-fluid">
    <div class="row col-12"><h3 class="offset-3">{{page_title}}</h3></div>
    <form id="pfm" class="form form-inline" action="" method="POST">
        {% for field in form %}
            {% if field.type == 'HiddenField' or field.type == 'CSRFTokenField' %}
                {{field}}
            {% elif field.type != 'SubmitField' %}
                <div class="row col-12">
                {{ field.label( class="col-3" ) }}
                {{ field( class="form-control col" ) }}
                </div class="row col-12">
            {% endif %}
        {% endfor %}
        <div class="row col-12">
            <label class="col-3">Reference Images:</label>
            {% for refimg in person.refimg %}
                {% set offset="" %}
                {% if (loop.index % 10) == 0 %}
                    {% set offset= "offset-3" %}
                {% endif %}
                <div id="RI{{refimg.id}}" class="col-1 px-0 {{offset}}">
                    <input type="hidden" id="ref-img-id-{{refimg.id}}" name="ref-img-id-{{refimg.id}}" value="1"></input>
                    <figure id="fig_{{refimg.id}}">
                        <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}}";
                                fig_{{refimg.id}}=$('#fig_{{refimg.id}}')

                                // 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_left}}
                                orig_face_{{refimg.id}}.y = {{refimg.face_top}}
                                orig_face_{{refimg.id}}.w = {{refimg.face_right}}-{{refimg.face_left}}
                                orig_face_{{refimg.id}}.h = {{refimg.face_bottom}}-{{refimg.face_top}}
                                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( fig_{{refimg.id}}, im_{{refimg.id}}, c_{{refimg.id}}, orig_face_{{refimg.id}} ) });

                            </script>
                            <div style="position:absolute; top: 2px; right: 2px;">
                                <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>
                </div id="/RI*">
            {% endfor %}
            <div id="throb" style="display:none" class="col-1 px-0 {{offset}}">
                <img height="64px" src="{{url_for('internal', filename='throbber.gif')}}"></img>
            </div>
        </div class="row col-12">
        <div class="row col-12">
        <br>
        </div class="form-row">
        <div class="row col-12">
            {{ form.save( id="save", class="btn btn-primary offset-3 col-2" )}}
            {% if 'Edit' in page_title %}
                {{ form.delete( class="btn btn-outline-danger col-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>
            <div class="row col-12">
                <label class="btn btn-success offset-3 col-2">
                    Add reference image
                    <input name="refimg_file" type="file" onChange="$('#throb').attr('style','show'); $('#new_ri').submit()" style="display:none;" id="new_file_chooser">
                </label>
            </div class="row col-12">
        </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 %}