{% extends "imadj/base.html" %}
{% load rl %}
<!--
Show what they just uploaded.  Allow checking, cropping, descriptions,
tags etc.  Then they must click 'accept'
-->

{% block extrahead %}
<script type="text/javascript" src="{{STATIC_URL}}imadj/js/jquery.autocomplete.min.js"></script>
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}imadj/css/jquery.autocomplete.css" media="screen" />
<script type="text/javascript">
//We could also have the tags in local memory rather than ajaxing and pass the array
//instead of a URL    

{% autoescape off %}
var tags = {{tags}};
{% endautoescape %}

function preview(url) {
    $('#preview_image').attr('src', url);
}

$(document).ready(function() {
    $("#tags").autocomplete('/imagegallery/te/tags/', {
        multiple: true,
        mustMatch: true,
        //autoFill: true,
                multipleSeparator: ' ',
    });

    boxes = {{boxes_js|safe}};

    for (b in boxes) {
        if ($('#box_' + boxes[b][0]).attr('checked')) {
            preview(boxes[b][1]);
        }
    }
        
});

</script>    

{% endblock %}


{% block content %}

<div id="preview">
    <div class="page_info_header">
        <div class="page_info_header_img">
            <img src="{{STATIC_URL}}imadj/img/_bg/upload_arrow_small.png" />
        </div>
        <div class="page_info_header_heading">
            <h1>Image upload preview for {{id}}</h1>
        </div>
    </div>
    <div class="page_info_content">
        <div class="image_preview">
            <img src="{{preview_image}}" style="border: dashed 1px black; padding: 0px;" alt="preview of your image" id="preview_image"/>

        </div>
        <form action="" method="post" enctype="multipart/form-data">
        <div class="details_preview">
            {% if format %}
            <h2>Format</h2>
            <p>{{format}}, {{width}}x{{height}}</p>
            {% endif %}
            {%if already_present %}
            <p>ALREADY PRESENT IN OUR SYSTEM!  Click <a href="">here</a> to see details.</p>
            {% else %}
            {% if possible_sizes %}
            <h2>Image size</h2>
            {% for size in possible_sizes %}
            <p>{{ size }}</p>
            {% endfor %}
            {% endif %}
            {# Django templates are useless... #}
            {% pyexec choosebox = format == 'PDF' and len(boxes) > 1 %}
            {% if choosebox %}
            <h2>Cropping</h2>
            <p>Which box to use?</p>
            {% for box, burl in boxes %}
            <p>
            <input type="radio" id="box_{{box}}" name="box" value="{{box}}" style="margin-right: 3px;" onClick="preview('{{burl}}')"
            {% ifequal box "media" %}checked="checked"{% endifequal %}/>
            <label for="box_{{box}}" onClick="preview('{{burl}}')">{{box}}</label>
            </p>
            {% endfor %}
            {% endif %}
            {% endif %}
        </div>    
        <div class="details_preview">
            {% if size %}
            <h2>Description</h2>
            <p><input type="text" name="description" /></p>
            <h2>Caption</h2>
            <p><input type="text" name="caption" /></p>
            <h2>Tags</h2>
            <p><input type="text" name="tags" id="tags" /></p>
                {% if settings.IMADJ_CUSTOM_ATTIBUTES %}
                    <hr />
                    {% for key, value in settings.IMADJ_CUSTOM_ATTIBUTES %}
                        <h2>{{ value }}</h2>
                        <p><input type="text" name="{{ key }}" /></p>
                    {% endfor %}
                {% endif %}
            <p>{% csrf_token %}<input type="submit" name="accept" value="Accept" class="default"/></p>
            {% else %}
            <p style="color:red;">This image does not match a known size in our database. Please check it is the correct size and then attempt to upload it again.</p>
            {% endif %}
        </div>
        </form>
    </div>
</div>
    
{% endblock %}